/* ==========================================================
 * Header clone của nahaki.com.vn — phiên bản dùng HEADER BUILDER của Flatsome.
 *
 * Markup nguồn (do Header Builder sinh ra, KHÔNG hardcode):
 *   #header.header
 *     #masthead.header-main                       <- hàng "Main"
 *        .header-inner.container
 *           #logo.flex-col.logo  > a > img.header-logo     (LOGO)
 *           .flex-col.flex-left  (rỗng)
 *           .flex-col.flex-right > ul.header-nav-main
 *               li.html_topbar_left  > p.slogan__content   (HTML 1 = slogan)
 *               li.html_topbar_right > .header__top-right   (HTML 2 = catalogue + SĐT)
 *     #wide-nav.header-bottom                      <- hàng "Bottom"
 *        .flex-col.flex-center > ul.header-bottom-nav        (Main Menu = vị trí primary)
 *
 * Mục tiêu: tái tạo y giao diện cũ (logo đỏ vát chéo + thanh menu xanh vát chéo),
 * nhưng mọi dữ liệu (logo / slogan / liên hệ / menu) đều lấy động từ builder.
 * ========================================================== */

/* --ptl-logo-w: bề rộng khối logo đỏ (cột trái).
   --ptl-right-gap: lề phải bỏ trống của cả slogan/liên hệ và menu (giống nahaki: nội dung dừng ~82%). */
:root {
	--ptl-logo-w: 27%;       /* bề rộng khối đỏ (mép phải, đo ở ĐỈNH) */
	--ptl-logo-h: 72px;      /* chiều cao tối đa của logo (tăng số này để logo to hơn) */
	--ptl-slant: 72px;       /* độ vát chéo: mép phải đỏ thu vào bao nhiêu px từ trên xuống dưới */
	--ptl-gap: 16px;         /* khe trắng chéo giữa khối đỏ và thanh xanh */
	--ptl-right-gap: 16%;    /* lề phải bỏ trống của slogan/liên hệ & menu (nahaki dừng ~82%) */
	--ptl-red: var(--fs-color-secondary);
	--ptl-blue: var(--fs-color-primary);
}

/* ---------- Phá .container của Flatsome để header tràn viền như bản cũ ---------- */
#header .header-main > .header-inner.container,
#header #wide-nav > .flex-row.container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Khung header ---------- */
#header.header {
	position: relative;
	background-color: #fff;
	font-family: 'UTM Helve', UTMHelve, sans-serif;
	box-shadow: none;
	z-index: 2222;
}
/* .header-wrapper là phần tử bị position:fixed khi STICKY (Flatsome thêm class .stuck).
   Chỉ đặt NỀN TRẮNG ở đây để khi cuộn header không bị trong suốt.
   KHÔNG set position ở đây: Flatsome đã cho .header-wrapper position:relative sẵn,
   và phải để .stuck (position:fixed) ghi đè được — nếu set sẽ làm hỏng sticky. */
#header .header-wrapper {
	background-color: #fff;
}
/* Vô hiệu hoá các phần thừa của Flatsome (đường kẻ divider + lớp nền). */
#header .top-divider,
#header .header-bg-container { display: none !important; }
/* Bỏ chiều cao tối thiểu/àpdding mặc định để 2 hàng sát nhau như cũ. */
#header #masthead,
#header #wide-nav { min-height: 0; background: transparent; }
#header .header-main .header-inner { min-height: 0; }

/* ==========================================================
 * CỘT ĐỎ (logo) — hình bình hành: trải full chiều cao cả 2 hàng,
 * mép phải là MỘT đường chéo (rộng ở trên, hẹp dần xuống) — giống nahaki.
 * ========================================================== */
/* Gắn vào .header-wrapper (KHÔNG phải #header) để khối đỏ đi theo header khi
   STICKY — lúc cuộn Flatsome đặt .header-wrapper thành position:fixed. */
#header .header-wrapper:before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: var(--ptl-logo-w);
	background-color: var(--ptl-red);
	/* đỉnh phải = 100% (logo-w); đáy phải = 100% - slant => đường chéo "\" */
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--ptl-slant)) 100%, 0 100%);
	z-index: 2;
}

/* ---------- Logo nằm trong cột đỏ ---------- */
#header #masthead { position: relative; z-index: 3; }
#header #logo {
	width: var(--ptl-logo-w);
	flex: 0 0 var(--ptl-logo-w);
	max-width: var(--ptl-logo-w);
	padding: 0 30px;
	display: flex;
	align-items: center;
	justify-content: center;   /* logo căn giữa khối đỏ (giống nahaki) */
	position: relative;
	z-index: 3;
	margin: 0;
}
#header #logo a {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
}
.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before {
    display: none;
}
.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after, .nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before {
    display: none;
}
/* Logo to: cao tối đa --ptl-logo-h, rộng theo tỉ lệ (đặt logo NAHAKI thật sẽ tự khớp). */
#header #logo img { max-height: var(--ptl-logo-h); max-width: 80%; height: auto; width: auto; }
/* Ẩn bản logo "dark" thừa của Flatsome. */
#header #logo img.header-logo-dark { display: none !important; }

/* ==========================================================
 * HÀNG MAIN bên phải: slogan (trái) + liên hệ (phải), dàn space-between
 * ========================================================== */
/* Cột trái rỗng: không cho giãn; dồn toàn bộ chỗ cho cột phải. */
#header #masthead .header-inner > .flex-col.flex-left { flex: 0 0 auto; }
#header #masthead .header-inner > .flex-col.flex-right {
	flex: 1 1 auto;
	max-width: none;
}
#header #masthead .flex-right > ul.header-nav-main {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0 var(--ptl-right-gap) 0 0;
}
/* Các <li> bọc HTML block: bỏ style nav mặc định của Flatsome. */
#header #masthead .header-nav-main > li.html {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
#header #masthead .header-nav-main > li.html:before { display: none; }

/* ---------- Slogan (HTML 1) ---------- */
#header .slogan__content {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ptl-red);
	font-style: italic;
	margin-bottom: 0;
	padding: 10px 0 10px 70px;
	line-height: 1.3;
}

/* ---------- Liên hệ (HTML 2): catalogue nhấp nháy + SĐT ---------- */
#header .header__top-right ul { display: flex; margin-bottom: 0; padding-left: 10px; list-style: none; }
#header .header__top-right ul li { margin-right: 30px; }
#header .header__top-right ul li:last-child { margin-right: 0; }
#header .header__top-right ul li a {
	color: var(--ptl-red);
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
}
#header .header__top-right ul li a:hover { text-decoration: none; color: var(--ptl-red); }
#header .header__top-right ul li a svg { height: 25px; margin-right: 5px; }
/* nahaki: Catalogue (blinking) đứng TRƯỚC, SĐT đứng sau — giữ thứ tự gốc, không đảo. */
#header .header__top-right ul li.blinking svg {
	-webkit-animation: ptlFlicker 0.5s infinite;
	animation: ptlFlicker 0.5s infinite;
}
#header .header__top-right ul li a .icon-mobile {
	width: 30px; height: 30px;
	border: 2px solid #e6e7e9;
	border-radius: 50%;
	display: none !important;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}
@-webkit-keyframes ptlFlicker { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ptlFlicker { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* ==========================================================
 * HÀNG BOTTOM: thanh menu xanh, bắt đầu sau cột đỏ + vát chéo trái
 * ========================================================== */
#header #wide-nav {
	position: relative;
	background-color: transparent;
	z-index: 1;
}
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li a {

    margin: 0px;
}
#header #logo {

    top: 20px;
}
/* Thanh xanh: mép trái là đường chéo SONG SONG với mép đỏ, lệch phải 1 khe trắng.
   left = (mép đỏ ở đáy) + khe trắng; clip đẩy đỉnh-trái sang phải để tạo độ chéo trong dải. */
#header #wide-nav:before {
	content: "";
	position: absolute;
	left: calc(var(--ptl-logo-w) - var(--ptl-slant) + var(--ptl-gap));
	top: 0; bottom: 0; right: 0;
	background-color: var(--ptl-blue);
	clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%);
	z-index: 1;
}
#header #wide-nav .flex-row.container { position: relative; z-index: 3; }

/* Menu căn phải trong vùng xanh: chừa cột đỏ bên trái; menu kéo gần sát mép phải (nahaki ~97%). */
#header #wide-nav .flex-col.flex-center {
	max-width: 100%;
	flex: 1 1 100%;
	padding-left: var(--ptl-logo-w);
	padding-right: 2.5%;
}
#header #wide-nav ul.header-bottom-nav {
	display: flex;
	justify-content: center
	align-items: center;
	margin: 0;
	padding-left: 0;
	width: 100%;
	list-style: none;
}
#header #wide-nav ul.header-bottom-nav > li { position: relative; display: flex; align-items: stretch; margin: 0; }
#header #wide-nav ul.header-bottom-nav > li > a,
#header #wide-nav ul.header-bottom-nav > li > a.nav-top-link {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	display: flex;
	align-items: center;
	flex: 1;
	padding: 15px 15px;
	text-decoration: none;
	line-height: 1;
}
#header #wide-nav ul.header-bottom-nav > li > a:hover { background-color: #fff; color: var(--ptl-blue); }
/* Mũi tên cho mục có submenu (dùng icon của Flatsome, chỉnh cho gọn). */
#header #wide-nav ul.header-bottom-nav .nav-top-link i.icon-angle-down { margin-left: 6px; font-size: 12px; }

/* ---------- Dropdown (override nav-dropdown của Flatsome thành flyout giống bản cũ) ---------- */
#header #wide-nav ul.header-bottom-nav li ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 250px;
	min-width: max-content;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,.75);
	opacity: 0;
	visibility: hidden;
	transition: none;
	transform: none;
	z-index: 999;
}
#header #wide-nav ul.header-bottom-nav li:hover > ul.sub-menu { opacity: 1; visibility: visible; }
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li {
	border-top: 1px solid #ccc;
	background: #fff;
	position: relative;
	margin: 0;
	border-radius: 0;
	width: 100%;
}
#header #wide-nav ul.header-bottom-nav li ul.sub-menu > li:first-child { border-top: 0; }
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li a {
	color: var(--ptl-blue);
	text-transform: capitalize;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 20px;
	display: block;
}
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li a:hover { color: #fff; background-color: var(--ptl-blue); }
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li.menu-item-has-children:hover > a { color: #fff; background-color: var(--ptl-blue); }

/* Mũi tên báo "còn submenu con" cho mục trong dropdown (vd: Bàn Kệ Inox Công Nghiệp).
   Flatsome không tự thêm icon cho mục con có children, nên tự vẽ tam giác bằng CSS.
   Submenu con bung sang PHẢI → mũi tên chỉ sang phải; màu theo chữ (currentColor) nên tự đổi khi hover. */
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li.menu-item-has-children > a {
	position: relative;
	padding-right: 28px;
}
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li.menu-item-has-children > a:after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0; height: 0;
	border-style: solid;
	border-width: 4px 0 4px 5px;                 /* tam giác chỉ sang PHẢI */
	border-color: transparent transparent transparent currentColor;
}
/* Nhánh sát mép phải bung sang TRÁI → đảo mũi tên chỉ sang trái cho khớp hướng mở. */
#header #wide-nav ul.header-bottom-nav > li:last-child ul.sub-menu li.menu-item-has-children > a:after {
	border-width: 4px 5px 4px 0;                 /* tam giác chỉ sang TRÁI */
	border-color: transparent currentColor transparent transparent;
	right: auto;
	left: 12px;
}
#header #wide-nav ul.header-bottom-nav > li:last-child ul.sub-menu li.menu-item-has-children > a {
	padding-right: 20px;
	padding-left: 28px;
}

/* Submenu cấp 2+ : bung sang phải (flyout) */
#header #wide-nav ul.header-bottom-nav li ul.sub-menu li > ul.sub-menu {
	position: absolute;
	left: 100%;
	top: -1px;
	width: 250px;
}
/* Mục menu sát mép phải: dropdown & flyout bung sang trái để khỏi tràn. */
#header #wide-nav ul.header-bottom-nav > li:last-child > ul.sub-menu { left: auto; right: 0; }
#header #wide-nav ul.header-bottom-nav > li:last-child ul.sub-menu li > ul.sub-menu { left: auto; right: 100%; }

/* ==========================================================
 * RESPONSIVE
 * ========================================================== */
@media screen and (max-width: 1199px) {
	#header #logo { padding: 10px 30px; }
	#header .header__top-right ul li { margin-right: 20px; }
}
@media screen and (max-width: 1023px) {
	#header .slogan__content { font-size: 16px; padding-left: 40px; }
	#header #wide-nav ul.header-bottom-nav > li > a { padding: 10px 12px; font-size: 12px; }
	#header .header__top-right ul li { margin-right: 12px; }
	#header .header__top-right ul li a { font-size: 13px; }
}

/* Mobile/tablet: Flatsome đã ẩn #wide-nav (hide-for-medium). Hàng main hiển thị
   logo + khối liên hệ + nút "Menu" — bố cục GIỐNG nahaki: logo | liên hệ | Menu(phải cùng). */
@media screen and (max-width: 849px) {
	:root { --ptl-logo-w: 28%; --ptl-slant: 38px; }
	#header #logo { padding: 8px 8px; }
	#header .slogan__content { display: none; }
	/* Cột mobile không có padding ngang để dồn chỗ cho nút Menu. */
	#header #masthead .header-inner > .flex-col.show-for-medium { padding-left: 0; padding-right: 0; }

	/* Đảo thứ tự cột bằng flex `order` để khớp nahaki (DOM mặc định là logo → Menu → liên hệ).
	   logo(1) → khối liên hệ(2, ở giữa, co giãn) → nút Menu(3, sát mép phải). */
	#header #masthead .header-inner { align-items: stretch; }
	#header #masthead .header-inner > #logo { order: 1; }
	#header #masthead .header-inner > .flex-col.show-for-medium.flex-right {
		order: 2;
		flex: 1 1 0;               /* chiếm khoảng trống giữa logo và nút Menu, basis 0 để không lấn chỗ Menu */
		min-width: 0;             /* cho phép co lại, tránh đẩy nút Menu tràn ra ngoài */
		max-width: none;
		margin-left: 0;           /* huỷ margin-left:auto mặc định của Flatsome */
		display: flex !important;
		align-items: center;
		align-self: stretch;
	}
	#header #masthead .header-inner > .flex-col.show-for-medium.flex-left {
		order: 3;
		flex: 0 0 auto;
		margin-left: auto;            /* đẩy nút Menu ra sát mép phải */
		display: flex !important;
		align-items: center;
		align-self: stretch;
		padding-left: 0;
	}

	/* Khối liên hệ (quà + SĐT): căn giữa toàn khối trong khoảng trống giữa logo và nút Menu. */
	#header .mobile-nav.nav-right { display: flex; justify-content: center; align-items: center; margin: 0; height: 100%; width: 100%; }
	#header .header__top-right ul { padding-left: 0; flex-wrap: nowrap; }
	#header .header__top-right ul li { margin-right: 8px; }
	#header .header__top-right ul li a { font-size: 13px; }
	#header .header__top-right ul li a svg { height: 20px; margin-right: 4px; }
	#header .header__top-right ul li a .icon-mobile { display: flex !important; width: 26px; height: 26px; }
	#header .header__top-right ul li a span.d-none.d-md-block { display: none !important; }

	/* Nút "Menu" sát mép phải (xanh), giống nahaki. */
	#header .mobile-nav.nav-left { display: flex; align-items: center; justify-content: flex-end; margin: 0; height: 100%; padding-right: 10px; }
	#header .mobile-nav.nav-left > li.html_top_right_text { margin: 0; }
}

/* ==========================================================
 * Nút "Menu" mobile (HTML 3 = top_right_text) + nguồn menu off-canvas
 * ========================================================== */
/* li bọc nút Menu: bỏ style nav mặc định của Flatsome. */
#header .mobile-nav > li.html_top_right_text {
	margin: 0 0 0 10px;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
}
#header .mobile-nav > li.html_top_right_text:before { display: none; }
#header .show-menu-mobile {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	margin-left: auto;          /* span Menu luôn căn sát lề phải */
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ptl-blue);
	white-space: nowrap;
	line-height: 1;
	/* Vô hiệu style mà hc-offcanvas-nav áp qua class .hc-nav-trigger
	   (position:absolute; top:5px; width:30px; min-height:24px) làm vỡ layout sau khi JS chạy. */
	position: static;
	top: auto;
	width: auto;
	min-height: 0;
	z-index: auto;
}
/* Icon 3 gạch (hamburger) đặt sau chữ "Menu"; tô màu theo chữ qua mask. */
#header .show-menu-mobile::after {
	content: "";
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-left: .4em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M120-240v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M120-240v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Nguồn menu (#main-nav) ẩn hoàn toàn — hc-offcanvas-nav tự dựng panel gắn vào body. */
#main-nav,
#main-nav.hidden { display: none; }

#footer .row-full-width .col {
    padding-left: 0px;
    padding-right: 0px;
}