/* ============================================================
   An Thành Phát — Header DMCL-style
   ============================================================ */

/* Reset parent theme's reserved space for its old position:fixed header.
   `.cp-header` is position:relative, so no space needs to be reserved. */
body, body.admin-bar, body.menuStick, body.menuStick.admin-bar, body.menu_only_stick { padding-top: 0 !important; }

.cp-header *,.cp-header *::before,.cp-header *::after{box-sizing:border-box}
.cp-header{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--cp-primary,#3C4CE6);position:relative;z-index:50}
.cp-header__container{max-width:1280px;margin:0 auto;padding:0 15px;display:flex;align-items:center;gap:18px}

/* ---- Top promo strip ---- */
.cp-header__promo{background:linear-gradient(90deg,var(--cp-primary-deep,#1F2A99),var(--cp-primary-dark,#2A37C2));color:#fff;font-size:13px;line-height:1.2}
.cp-header__promo .cp-header__container{padding-top:7px;padding-bottom:7px;justify-content:space-between}
.cp-header__promo-text{display:flex;gap:10px;align-items:center;color:#fff;flex-wrap:wrap}
.cp-header__promo-text strong{font-weight:700;letter-spacing:.3px;color:#ffd86b}
.cp-header__promo-text span{opacity:.85}
.cp-header__promo-call{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);color:#fff;padding:5px 14px;border-radius:30px;text-decoration:none;transition:background .15s}
.cp-header__promo-call:hover{background:rgba(255,255,255,.22);color:#fff}
.cp-header__promo-call svg{flex-shrink:0}
.cp-header__promo-call small{display:block;font-size:10px;opacity:.85;text-transform:uppercase;letter-spacing:.5px;line-height:1}
.cp-header__promo-call strong{display:block;font-size:14px;font-weight:700;line-height:1.2}

/* ---- Main bar ---- */
.cp-header__main{padding:14px 0;background:#fff;border-bottom:1px solid #e5e5e5}
.cp-header__main .cp-header__container{gap:24px}
.cp-header__main .cp-header__search{border:1px solid #e1e8ee}
/* Utils on white background: ocean-blue text/icons; cart stays as primary CTA. */
.cp-header__main .cp-header__util{color:var(--cp-primary-dark,#2A37C2)}
.cp-header__main .cp-header__util:hover{color:var(--cp-primary,#3C4CE6);opacity:1}
.cp-header__main .cp-header__util--icon{background:#eef4f9;color:var(--cp-primary-dark,#2A37C2)}
.cp-header__main .cp-header__util--icon:hover{background:#dde9f3}
.cp-header__main .cp-header__util--cart{background:var(--cp-primary,#3C4CE6);color:#fff}
.cp-header__main .cp-header__util--cart:hover{background:var(--cp-primary-dark,#2A37C2);color:#fff;opacity:1}
.cp-header__main .cp-header__cart-badge{border-color:#fff}

.cp-header__logo{flex:0 0 auto;display:block;background:transparent;padding:0;border-radius:0;text-decoration:none;max-height:60px;line-height:0}
.cp-header__logo img{max-height:48px;width:auto;display:block}

.cp-header__search{flex:1;display:flex;background:#fff;border-radius:30px;overflow:hidden;height:44px;max-width:680px}
.cp-header__search input{flex:1;border:none;background:transparent;padding:0 22px;font-size:14px;color:#1a1a1a;outline:none}
.cp-header__search input::placeholder{color:#999}
.cp-header__search button{flex:0 0 auto;background:transparent;border:none;cursor:pointer;color:var(--cp-primary,#3C4CE6);padding:0 18px;display:flex;align-items:center;justify-content:center;transition:color .15s}
.cp-header__search button:hover{color:var(--cp-primary-dark,#2A37C2)}

.cp-header__utils{display:flex;align-items:center;gap:14px;flex-shrink:0}
.cp-header__util{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:14px;font-weight:500;padding:6px 4px;transition:opacity .15s;line-height:1.2}
.cp-header__util:hover{color:#fff;opacity:.85}
.cp-header__util svg{flex-shrink:0}
.cp-header__util--icon{padding:8px;background:rgba(255,255,255,.12);border-radius:50%;width:42px;height:42px;justify-content:center}
.cp-header__util--icon:hover{background:rgba(255,255,255,.2)}
.cp-header__util--cart{background:rgba(255,255,255,.12);border-radius:30px;padding:7px 14px 7px 10px}
.cp-header__util--cart:hover{background:rgba(255,255,255,.2)}
.cp-header__cart-icon{position:relative;display:inline-flex}
.cp-header__cart-badge{position:absolute;top:-6px;right:-8px;background:var(--cp-sale,#ff5722);color:#fff;font-size:10px;font-weight:700;font-style:normal;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;border:2px solid var(--cp-primary,#3C4CE6)}

/* Hide parent header leftovers if any */
.main_body > .container > .row > .header,
header.header.header.header{display:none}

/* ---- Hide page templates' broken top because we replaced header ---- */
body{background:var(--cp-bg-soft,#f1f6fa)}
.main_body{background:transparent}

/* ---- Responsive ---- */
@media (max-width:1024px){
	.cp-header__main .cp-header__container{gap:14px}
	.cp-header__util span{display:none}
	.cp-header__util{padding:8px;background:rgba(255,255,255,.12);border-radius:50%;width:42px;height:42px;justify-content:center}
	.cp-header__util--cart{width:auto;padding:7px 12px 7px 8px}
	.cp-header__util--cart span:last-child{display:none}
}
@media (max-width:768px){
	.cp-header__promo .cp-header__container{padding:6px 10px}
	.cp-header__promo-text span{display:none}
	.cp-header__promo-call{padding:4px 10px}
	.cp-header__promo-call small{display:none}
	.cp-header__main{padding:10px 0}
	.cp-header__main .cp-header__container{gap:10px}
	.cp-header__logo img{max-height:32px}
	.cp-header__search{height:38px;border-radius:24px}
	.cp-header__search input{padding:0 14px;font-size:13px}
}
@media (max-width:640px){
	.cp-header__main .cp-header__container{flex-wrap:wrap}
	.cp-header__logo{order:1}
	.cp-header__utils{order:2;margin-left:auto}
	.cp-header__search{order:3;flex:1 1 100%;max-width:none}
}

/* ============ Header nav (below main row) ============ */
.cp-header__nav{background:var(--cp-primary-dark,#2A37C2);border-top:1px solid rgba(255,255,255,.08)}
.cp-header__nav .cp-header__container{padding:0 16px}
.cp-header__nav-menu{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;align-items:stretch}
.cp-header__nav-menu>li{position:relative}
.cp-header__nav-menu>li>a{display:flex;align-items:center;gap:6px;padding:13px 18px;color:#fff;font-weight:700;text-transform:uppercase;font-size:13.5px;letter-spacing:.3px;text-decoration:none;line-height:1;transition:background .15s}
.cp-header__nav-menu>li>a:hover,.cp-header__nav-menu>li.current-menu-item>a,.cp-header__nav-menu>li.current-menu-parent>a{background:var(--cp-primary,#3C4CE6);color:#fff}
.cp-header__nav-menu>li.cp-nav-mega-trigger>a,.cp-header__nav-menu>li:first-child>a{background:var(--cp-primary,#3C4CE6)}
.cp-header__nav-menu>li.cp-nav-mega-trigger>a::before,.cp-header__nav-menu>li:first-child>a::before{content:"";display:inline-block;width:18px;height:12px;background:linear-gradient(#fff,#fff) 0 0/100% 2px no-repeat,linear-gradient(#fff,#fff) 0 5px/100% 2px no-repeat,linear-gradient(#fff,#fff) 0 10px/100% 2px no-repeat;margin-right:4px;flex:0 0 auto}
/* Sub-menu (dropdown) */
.cp-header__nav-menu .sub-menu{position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--cp-border,#e1e8ee);box-shadow:0 6px 18px rgba(0,0,0,.08);list-style:none;margin:0;padding:6px 0;display:none;z-index:50}
.cp-header__nav-menu>li:hover>.sub-menu{display:block}
.cp-header__nav-menu .sub-menu a{display:block;padding:8px 16px;color:var(--cp-text,#1a1a1a);text-decoration:none;font-size:13.5px;font-weight:500;transition:background .15s,color .15s}
.cp-header__nav-menu .sub-menu a:hover{background:#f6f9fc;color:var(--cp-primary,#3C4CE6)}
@media (max-width:1024px){
	.cp-header__nav-menu>li>a{padding:12px 14px;font-size:12.5px}
}
@media (max-width:768px){
	.cp-header__nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
	.cp-header__nav-menu{flex-wrap:nowrap;width:max-content}
	.cp-header__nav-menu>li>a{padding:10px 12px;font-size:12px;white-space:nowrap}
}

/* ============ DANH MỤC SẢN PHẨM mega dropdown ============ */
.cp-header__nav-menu > li.cp-nav-mega-trigger { position: relative; }
.cp-mega-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	max-width: 360px;
	background: #fff;
	border-top: 3px solid var(--cp-primary, #3C4CE6);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
	z-index: 80;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
}
.cp-header__nav-menu > li.cp-nav-mega-trigger:hover .cp-mega-dropdown,
.cp-header__nav-menu > li.cp-nav-mega-trigger:focus-within .cp-mega-dropdown { display: block; }

/* Internal devvn_mega_menu_wrap layout — neutralize parent theme box-shadow/border */
.cp-mega-dropdown .devvn_mega_menu_wrap { position: static; display: block; width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.cp-mega-dropdown ul.devvn_mega_menu_ul { margin: 0; padding: 4px 0; list-style: none; }
.cp-mega-dropdown ul.devvn_mega_menu_ul > li { border-bottom: 1px solid #f1f3f5; position: relative; }
.cp-mega-dropdown ul.devvn_mega_menu_ul > li:last-child { border-bottom: 0; }
.cp-mega-dropdown ul.devvn_mega_menu_ul > li > a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 16px;
	color: #1a1a1a;
	font-weight: 500; font-size: 14px; text-transform: none;
	text-decoration: none;
	background: transparent;
	transition: background .15s, color .15s;
}
.cp-mega-dropdown ul.devvn_mega_menu_ul > li > a:hover { background: #f5f9fc; color: var(--cp-primary, #3C4CE6); }
.cp-mega-dropdown ul.devvn_mega_menu_ul > li > a .devvn_mega_menu_icon { display: inline-block; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }

/* Sub-menu (level-2) flyout */
.cp-mega-dropdown .devvn_sub_menu { position: absolute; left: 100%; top: 0; min-width: 240px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.15); list-style: none; margin: 0; padding: 6px 0; display: none; z-index: 90; }
.cp-mega-dropdown ul.devvn_mega_menu_ul > li:hover > .devvn_sub_menu { display: block; }
.cp-mega-dropdown .devvn_sub_menu li a { display: block; padding: 8px 16px; color: #1a1a1a; font-size: 13.5px; text-decoration: none; }
.cp-mega-dropdown .devvn_sub_menu li a:hover { background: #f5f9fc; color: var(--cp-primary, #3C4CE6); }

/* Hide the parent theme's "+" toggle icon (it's a mobile-only affordance there) */
.cp-mega-dropdown .click_open_sub_megamenu { display: none; }

/* Mega-content variant (when have_mega = true) */
.cp-mega-dropdown .devvn_sub_mega_content { position: absolute; left: 100%; top: 0; min-width: 480px; background: #fff !important; box-shadow: 0 8px 20px rgba(0,0,0,.15); padding: 14px 16px; display: none; z-index: 90; transform: none; visibility: visible; opacity: 1; }
.cp-mega-dropdown ul.devvn_mega_menu_ul > li:hover > .devvn_sub_mega_content { display: block; }

@media (max-width: 768px) {
	.cp-mega-dropdown { position: static; min-width: 0; max-width: none; box-shadow: none; border-top: 0; max-height: none; }
	.cp-mega-dropdown .devvn_sub_menu,
	.cp-mega-dropdown .devvn_sub_mega_content { position: static; min-width: 0; box-shadow: none; }
	.cp-header__nav-menu > li.cp-nav-mega-trigger:hover .cp-mega-dropdown { display: block; }
}