/* ==========================================================================
   Nội Thất Hòa Phát — theme "HoaPhat2026"
   Design system: navy + orange, catalog/lead-gen style (no cart/buy button)
   ========================================================================== */

:root{
	--navy-900:#0a1f44;
	--navy-800:#0d2a5c;
	--navy-700:#123a75;
	--orange-600:#f5720c;
	--orange-500:#ff8a1e;
	--red-600:#e02424;
	--gold-500:#f5a623;
	--gray-50:#f7f8fa;
	--gray-100:#eef1f5;
	--gray-200:#e2e6ec;
	--gray-400:#9aa4b2;
	--gray-600:#5b6472;
	--gray-800:#2a3140;
	--text:#22262f;
	--radius:8px;
	--shadow:0 2px 10px rgba(10,31,68,.08);
	--shadow-md:0 6px 24px rgba(10,31,68,.12);
	--maxw:1280px;
}

*{box-sizing:border-box;}
body.hp{margin:0;font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif;color:var(--text);background:#fff;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;}
body.hp h1,body.hp h2,body.hp h3,body.hp h4{font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif;letter-spacing:-.01em;}
.hp a{color:inherit;text-decoration:none;}
.hp ul{list-style:none;margin:0;padding:0;}
.hp img{max-width:100%;display:block;}
.hp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px;}
.hp .clear{clear:both;}

#AjaxLoading{display:none !important;}

/* ---------- Top utility bar ---------- */
.hp-topbar{background:var(--navy-900);color:#cfd9ec;font-size:12px;}
.hp-topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;}
.hp-topbar-left{display:flex;gap:22px;}
.hp-topbar-left span{display:inline-flex;align-items:center;gap:6px;}
.hp-topbar-right{display:flex;gap:18px;}
.hp-topbar a{color:#cfd9ec;}
.hp-topbar i{color:var(--orange-500);}

/* ---------- Main header ---------- */
.hp-mobile-menu-toggle{display:none;border:0;background:none;font-size:22px;color:var(--navy-800);cursor:pointer;padding:4px 6px 4px 0;flex:0 0 auto;}
.hp-header{background:#fff;padding:14px 0;border-bottom:1px solid var(--gray-200);}
.hp-header .wrap{display:flex;align-items:center;gap:28px;}
.hp-logo img{height:52px;width:auto;}
.hp-search{flex:1;max-width:560px;position:relative;}
.hp-search input{width:100%;height:44px;border:2px solid var(--navy-800);border-radius:22px;padding:0 50px 0 18px;font-size:14px;font-family:inherit;}
.hp-search button{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;border-radius:50%;background:var(--orange-600);color:#fff;cursor:pointer;}

/* AJAX quick-search results dropdown - table markup + class names come
   from the stock javascript/quicksearch.js (unchanged, reused as-is),
   only the visuals are themed here to match navy/orange. */
table.QuickSearch{position:absolute;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:0 12px 30px rgba(10,31,68,.18);z-index:120;border-collapse:collapse;overflow:hidden;font-family:inherit;}
table.QuickSearch tr.QuickSearchResult{cursor:pointer;border-bottom:1px solid var(--gray-100);}
table.QuickSearch tr.QuickSearchResult:last-child{border-bottom:0;}
table.QuickSearch tr.QuickSearchResult.QuickSearchHover,
table.QuickSearch tr.QuickSearchResult:hover{background:var(--gray-50);}
table.QuickSearch td.QuickSearchResultImage{width:52px;padding:8px 0 8px 10px;vertical-align:middle;}
table.QuickSearch td.QuickSearchResultImage img{width:44px;height:44px;object-fit:contain;background:var(--gray-50);border-radius:6px;border:1px solid var(--gray-200);}
table.QuickSearch td.QuickSearchResultMeta{padding:8px 12px 8px 10px;vertical-align:middle;}
table.QuickSearch .QuickSearchResultName{font-size:12.5px;font-weight:600;color:var(--navy-800);line-height:1.35;margin-bottom:3px;}
table.QuickSearch .QuickSearchResultName a{color:inherit;}
table.QuickSearch .Price{font-size:12.5px;font-weight:700;color:var(--orange-600);}
table.QuickSearch .RatingIMG{display:none;}
table.QuickSearch tr.QuickSearchAllResults{cursor:pointer;background:var(--gray-50);}
table.QuickSearch tr.QuickSearchAllResults td{padding:10px 12px;text-align:center;font-size:12.5px;font-weight:700;color:var(--orange-600);}
table.QuickSearch tr.QuickSearchAllResults:hover td{color:var(--orange-500);}
.hp-header-actions{display:flex;align-items:center;gap:26px;margin-left:auto;}
.hp-header-actions .hp-action{display:flex;align-items:center;gap:10px;}
.hp-header-actions .hp-action i{font-size:22px;color:var(--navy-800);}
.hp-header-actions .hp-action .lbl{font-size:11px;color:var(--gray-600);}
.hp-header-actions .hp-action .val{font-weight:700;font-size:14px;color:var(--navy-900);}

/* ---------- Pages nav bar (Trang chủ / Giới thiệu / ... - managed in admin > Website Content > Pages) ----------
   This is now the site's single primary nav row (the old horizontal category
   bar was removed - all category browsing lives in the sidebar instead). */
.hp-pagesnav-bar{background:var(--navy-800);}
.hp-pagesnav{display:flex;flex-wrap:wrap;}
.hp-pagesnav>li{position:relative;}
.hp-pagesnav>li>a{display:block;padding:13px 18px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.hp-pagesnav>li:hover>a,.hp-pagesnav>li.ActivePage>a{background:var(--navy-700);color:var(--orange-500);}
.hp-pagesnav-sub{display:none;position:absolute;left:0;top:100%;min-width:220px;background:#fff;box-shadow:var(--shadow-md);border-top:3px solid var(--orange-600);padding:6px 0;z-index:70;list-style:none;margin:0;}
.hp-pagesnav>li:hover .hp-pagesnav-sub{display:block;}
.hp-pagesnav-sub li a{display:block;padding:9px 16px;font-size:13px;color:var(--gray-800);white-space:nowrap;}
.hp-pagesnav-sub li a:hover{color:var(--orange-600);background:var(--gray-50);}

/* ---------- Mega nav ---------- */
.hp-nav{background:var(--navy-800);position:relative;z-index:60;}
.hp-nav .wrap{display:flex;align-items:stretch;}
.hp-nav-toggle{background:var(--orange-600);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;gap:10px;padding:0 18px;cursor:pointer;white-space:nowrap;}
.hp-nav-list{display:flex;flex:1;overflow-x:auto;scrollbar-width:none;}
.hp-nav-list::-webkit-scrollbar{display:none;}
.hp-nav-list>li{position:relative;flex:0 0 auto;}
.hp-nav-list>li>a{display:block;padding:13px 14px;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
.hp-nav-list>li:hover>a,.hp-nav-list>li.active>a{background:var(--navy-700);color:var(--orange-500);}
.hp-nav-promo{flex:0 0 auto;margin-left:auto;background:var(--red-600);}
.hp-nav-promo a{color:#fff !important;white-space:nowrap;}

/* mega dropdown (category tree, up to 2 levels) */
.hp-mega{display:none;position:absolute;left:0;top:100%;min-width:960px;max-width:calc(100vw - 32px);background:#fff;box-shadow:var(--shadow-md);border-top:3px solid var(--orange-600);padding:22px;z-index:70;}
.hp-nav-list>li:hover .hp-mega{display:flex;flex-wrap:wrap;gap:6px 28px;}
.hp-mega .hp-mega-col{min-width:200px;}
.hp-mega .hp-mega-col>a{display:block;font-weight:700;color:var(--navy-900);font-size:13px;margin-bottom:8px;}
.hp-mega .hp-mega-col ul li a{display:block;padding:4px 0;color:var(--gray-800);font-size:13px;}
.hp-mega .hp-mega-col ul li a:hover{color:var(--orange-600);}

/* sidebar category box: capped height by default (matches hero banner),
   toggles into a full floating flyout on click so the tall real category
   tree (19+ root categories) doesn't blow out the hero row's height. */
.hp-sidecats-box{width:270px;flex:0 0 270px;position:relative;}
.hp-sidecats-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--orange-600);color:#fff;border:0;padding:13px 14px;font-weight:700;font-size:13px;cursor:pointer;border-radius:var(--radius) var(--radius) 0 0;font-family:inherit;}
.hp-sidecats-toggle span{display:flex;align-items:center;gap:8px;}
.hp-sidecats-arrow{transition:transform .15s;font-size:11px;}
.hp-sidecats-box.open .hp-sidecats-arrow{transform:rotate(180deg);}

.hp-sidecats-panel{position:relative;background:#fff;border:1px solid var(--gray-200);border-top:0;border-radius:0 0 var(--radius) var(--radius);max-height:298px;overflow:hidden;}
.hp-sidecats-box.open .hp-sidecats-panel{position:absolute;top:100%;left:0;width:100%;max-height:none;overflow:visible;z-index:85;box-shadow:var(--shadow-md);border-radius:0 0 var(--radius) var(--radius);}

/* fade + "see more" hint pinned to the bottom of the collapsed panel */
.hp-sidecats-more{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-bottom:10px;background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 60%);font-size:12px;font-weight:700;color:var(--orange-600);cursor:pointer;}
.hp-sidecats-more:hover{color:var(--orange-500);}
.hp-sidecats-box.open .hp-sidecats-more{display:none;}

.hp-sidecats>li{border-bottom:1px solid var(--gray-100);}
.hp-sidecats>li:last-child{border-bottom:0;}
.hp-sidecats>li>a{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-size:13px;color:var(--text);}
.hp-sidecats>li:hover{background:var(--gray-50);}
.hp-sidecats>li:hover>a{color:var(--orange-600);}
/* nested <ul> is plain markup generated by ISC's category-tree PHP class -
   drops down in-flow (accordion) instead of flying out sideways, so a deep
   tree never gets clipped or pushed off-screen on narrow columns. Click the
   chevron toggles the .subopen class at any nesting depth (see the click
   delegation in SideCategoryList.html), which this styles generically. */
.hp-sidecats li ul{display:none;list-style:none;margin:0;padding:0;background:var(--gray-50);}
.hp-sidecats li.subopen>ul{display:block;}
.hp-sidecats li ul li{border-bottom:1px solid var(--gray-100);}
.hp-sidecats li ul li:last-child{border-bottom:0;}
.hp-sidecats li ul a{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 9px 28px;font-size:12.5px;}
.hp-sidecats li ul li ul a{padding-left:42px;}
.hp-sidecats li ul a:hover{color:var(--orange-600);background:var(--gray-100);}
/* the chevron is the click target that toggles a row's sub-menu open -
   give it a real hit area and visual feedback instead of a bare 10px icon */
.hp-sidecats li>a>.fa-chevron-down{padding:10px;margin:-10px;border-radius:4px;transition:transform .15s;}
.hp-sidecats li>a>.fa-chevron-down:hover{background:var(--gray-100);color:var(--orange-600) !important;}
.hp-sidecats li.subopen>a>.fa-chevron-down{transform:rotate(180deg);color:var(--orange-600) !important;}
.hp-sidecats-viewall{color:var(--orange-600) !important;font-weight:600;}

/* ---------- Hero ---------- */
.hp-hero{background:var(--navy-900);padding:26px 0;}
.hp-hero .wrap{display:flex;gap:22px;align-items:stretch;}
.hp-hero-left{width:270px;flex:0 0 270px;}
.hp-hero-banner{flex:1;position:relative;border-radius:var(--radius);overflow:hidden;min-height:340px;background:linear-gradient(120deg,var(--navy-800),var(--navy-700));display:flex;align-items:center;}
.hp-hero-banner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.hp-hero-copy{position:relative;padding:36px 44px;color:#fff;max-width:520px;}
.hp-hero-copy h1{font-size:30px;line-height:1.25;margin:0 0 6px;font-weight:800;}
.hp-hero-copy h1 span{color:var(--orange-500);}
.hp-hero-copy .sub{font-size:15px;color:#c9d4ea;margin:0 0 16px;}
.hp-hero-features{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:20px;font-size:13px;color:#dbe4f5;}
.hp-hero-features span{display:flex;align-items:center;gap:6px;}
.hp-hero-features i{color:var(--orange-500);}
.hp-hero-cta{display:flex;gap:12px;}
.hp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;border:2px solid transparent;}
.hp-btn-primary{background:var(--orange-600);color:#fff;}
.hp-btn-primary:hover{background:var(--orange-500);}
.hp-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.hp-btn-outline:hover{border-color:#fff;}

/* promo tiles row (Ưu đãi / Catalogue / Dự án) */
.hp-promorow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:-30px;position:relative;z-index:5;}
.hp-promotile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);}
.hp-promotile:hover{border-color:var(--orange-600);box-shadow:var(--shadow-md);}
.hp-promotile .ic{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--gray-50);display:flex;align-items:center;justify-content:center;color:var(--orange-600);font-size:18px;}
.hp-promotile b{display:block;font-size:13px;color:var(--navy-900);}
.hp-promotile span{display:block;font-size:11px;color:var(--gray-600);margin-top:2px;}

/* quick perks row */
.hp-perks{background:#fff;border-bottom:1px solid var(--gray-200);}
.hp-perks .wrap{display:flex;justify-content:space-between;padding:14px 0;flex-wrap:wrap;gap:14px;}
.hp-perks-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gray-800);flex:1 1 180px;}
.hp-perks-item i{color:var(--orange-600);font-size:18px;}

/* quick category icon strip */
.hp-quickcats{padding:26px 0 6px;}
.hp-section-label{font-size:13px;font-weight:700;color:var(--gray-600);letter-spacing:.06em;margin:0 0 14px;text-transform:uppercase;}
.hp-quickcats-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;}
.hp-quickcat{flex:0 0 108px;text-align:center;padding:14px 8px;border:1px solid var(--gray-200);border-radius:var(--radius);}
.hp-quickcat:hover{border-color:var(--orange-600);box-shadow:var(--shadow);}
.hp-quickcat i{font-size:26px;color:var(--navy-800);margin-bottom:8px;display:block;}
.hp-quickcat span{font-size:12px;color:var(--gray-800);}

/* ---------- Section title ---------- */
.hp-section{padding:30px 0;}
.hp-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.hp-section-head h2{font-size:19px;margin:0;color:var(--navy-900);font-weight:800;letter-spacing:.01em;}
.hp-section-head a.hp-viewall{font-size:13px;font-weight:600;color:var(--orange-600);}

/* featured category tiles */
.hp-catgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;}
.hp-cattile{display:block;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;text-align:center;padding-bottom:10px;background:#fff;}
.hp-cattile:hover{box-shadow:var(--shadow);border-color:var(--orange-600);}
.hp-cattile-img{height:100px;background:var(--gray-50);display:flex;align-items:center;justify-content:center;padding:8px;}
.hp-cattile-img img{height:100%;width:100%;object-fit:contain;}
.hp-cattile .name{font-size:13px;font-weight:600;margin-top:8px;color:var(--text);}
.hp-cattile .count{font-size:11px;color:var(--gray-400);}

/* ---------- Product grid / card (no cart / no buy button) ---------- */
.hp-prodgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.hp-prodcard{border:1px solid var(--gray-200);border-radius:var(--radius);background:#fff;position:relative;transition:box-shadow .15s,border-color .15s;}
.hp-prodcard:hover{box-shadow:var(--shadow-md);border-color:var(--gray-200);}
.hp-prodcard .badge{position:absolute;top:8px;left:8px;background:var(--red-600);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;z-index:2;}
.hp-prodcard .badge.new{background:var(--navy-800);}
/* ImageThumb() (ISC core) already wraps the <img> in its own <a href>, so
   .thumb is a plain div here - not a link - to avoid nesting <a> inside <a>,
   which is invalid HTML and was making browsers render the image at its
   raw intrinsic size instead of filling the card (that was the real bug,
   not the source photos themselves). */
.hp-prodcard .thumb{display:flex;align-items:center;justify-content:center;padding:16px;height:160px;background:var(--gray-50);border-radius:var(--radius) var(--radius) 0 0;}
.hp-prodcard .thumb a{display:block;width:100%;height:100%;}
.hp-prodcard .thumb img{display:block;width:100%;height:100%;object-fit:contain;margin:0 auto;}
.hp-prodcard .body{padding:0 14px 14px;}
.hp-prodcard .sku{font-size:11px;color:var(--gray-400);margin-bottom:2px;}
.hp-prodcard .name{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:6px;min-height:36px;}
.hp-prodcard .name:hover{color:var(--orange-600);}
.hp-prodcard .rating{font-size:11px;color:var(--gray-600);margin-bottom:6px;}
.hp-prodcard .rating i{color:var(--gold-500);}
.hp-prodcard .price{font-size:15px;font-weight:800;color:var(--red-600);}
.hp-prodcard .price .old{font-size:12px;font-weight:500;color:var(--gray-400);text-decoration:line-through;margin-left:6px;}
.hp-prodcard .cta{margin-top:10px;display:flex;gap:6px;}
.hp-prodcard .cta a{flex:1;text-align:center;font-size:12px;font-weight:700;padding:8px 4px;border-radius:5px;}
.hp-prodcard .cta .quote{background:var(--orange-600);color:#fff;}
.hp-prodcard .cta .quote:hover{background:var(--orange-500);}
.hp-prodcard .cta .wish{width:36px;flex:0 0 36px;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--gray-600);}
.hp-prodcard .cta .wish:hover{color:var(--red-600);border-color:var(--red-600);}

.hp-tabs{display:flex;gap:22px;margin-bottom:16px;border-bottom:1px solid var(--gray-200);}
.hp-tabs a{padding:8px 2px 12px;font-size:13px;font-weight:600;color:var(--gray-600);border-bottom:2px solid transparent;}
.hp-tabs a.active,.hp-tabs a:hover{color:var(--navy-900);border-color:var(--orange-600);}

/* needs-based (mua theo nhu cầu) */
.hp-needsgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.hp-needcard{position:relative;border-radius:var(--radius);overflow:hidden;height:130px;}
.hp-needcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hp-needcard .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,68,0) 30%,rgba(10,31,68,.85));display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px;}
.hp-needcard .ov b{color:#fff;font-size:13px;}
.hp-needcard .ov span{color:#cfd9ec;font-size:11px;}

/* stats bar */
.hp-stats{background:var(--navy-900);color:#fff;padding:20px 0;}
.hp-stats .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.hp-stat{display:flex;align-items:center;gap:12px;flex:1 1 160px;}
.hp-stat i{font-size:26px;color:var(--orange-500);}
.hp-stat b{font-size:20px;display:block;}
.hp-stat span{font-size:12px;color:#aebbd6;}

/* projects + clients */
.hp-twocol{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;}
.hp-projgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hp-projcard{position:relative;border-radius:var(--radius);overflow:hidden;height:120px;}
.hp-projcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hp-projcard span{position:absolute;left:0;right:0;bottom:0;background:rgba(10,31,68,.8);color:#fff;font-size:11px;padding:6px 8px;}
.hp-clientgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.hp-clientgrid div{border:1px solid var(--gray-200);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;height:56px;font-weight:700;color:var(--navy-800);font-size:13px;}

/* news */
.hp-newsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.hp-newscard img{border-radius:var(--radius) var(--radius) 0 0;height:130px;width:100%;object-fit:cover;}
.hp-newscard .body{border:1px solid var(--gray-200);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:12px;}
.hp-newscard .date{font-size:11px;color:var(--gray-400);margin-bottom:4px;}
.hp-newscard h3{font-size:13px;margin:0 0 8px;font-weight:700;line-height:1.4;}
.hp-newscard a.more{font-size:12px;color:var(--orange-600);font-weight:700;}

/* ---------- Footer ---------- */
.hp-footer{background:var(--navy-900);color:#c3cee5;padding:38px 0 16px;}
.hp-footer .wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;}
.hp-footer h4{color:#fff;font-size:14px;margin:0 0 14px;}
.hp-footer ul li{margin-bottom:8px;font-size:13px;}
.hp-footer ul li a:hover{color:var(--orange-500);}
.hp-footer .contact li{display:flex;gap:8px;}
.hp-footer .contact i{color:var(--orange-500);margin-top:2px;}
.hp-footer .subscribe input{width:100%;height:38px;border:0;border-radius:5px;padding:0 12px;margin-bottom:8px;}
.hp-footer .subscribe button{width:100%;height:38px;background:var(--orange-600);color:#fff;border:0;border-radius:5px;font-weight:700;cursor:pointer;}
.hp-footer-bottom{text-align:center;font-size:12px;color:#8fa0c2;}

/* regional contact block (Miền Bắc / Miền Nam / Văn phòng Tập Đoàn) */
.hp-footer-regions{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12);}
.hp-footer-region-title{position:relative;display:inline-block;padding-bottom:8px;margin-bottom:16px !important;}
.hp-footer-region-title::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;background:var(--red-600);}
.hp-footer-region-list li{color:#c3cee5;line-height:1.6;}
.hp-footer-region-list a{color:#c3cee5;}
.hp-footer-region-list a:hover{color:var(--orange-500);}

/* floating contact widget - collapsed trigger, expands on click */
.hp-float{position:fixed;right:18px;bottom:170px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;}
.hp-float-trigger{width:58px;height:58px;border-radius:50%;background:var(--orange-600);color:#fff;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:var(--shadow-md);cursor:pointer;font-family:inherit;}
.hp-float-trigger i{font-size:20px;}
.hp-float-trigger span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.hp-float.open .hp-float-trigger{background:var(--navy-800);}
.hp-float-panel{display:none;width:280px;background:#fff;border-radius:var(--radius);box-shadow:0 12px 40px rgba(10,31,68,.28);overflow:hidden;margin-bottom:12px;border:1px solid var(--gray-200);}
.hp-float.open .hp-float-panel{display:block;}
.hp-float-panel-head{background:linear-gradient(180deg,var(--navy-800),var(--navy-700));color:#fff;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;}
.hp-float-panel-head h4{margin:0;font-size:13px;font-weight:800;color:var(--orange-500);letter-spacing:.01em;}
.hp-float-close{background:none;border:none;color:#fff;font-size:15px;cursor:pointer;opacity:.75;padding:2px;line-height:1;}
.hp-float-close:hover{opacity:1;}
.hp-float-panel-body{padding:14px;display:flex;flex-direction:column;gap:10px;}
.hp-float-region b{display:block;font-size:11px;color:var(--navy-800);margin-bottom:5px;text-transform:uppercase;letter-spacing:.02em;}
.hp-float-phones{display:flex;gap:6px;flex-wrap:nowrap;}
.hp-float-phones a{flex:1 1 0;min-width:0;text-align:center;background:var(--gray-50);border-radius:6px;padding:8px 4px;font-size:12.5px;font-weight:700;color:var(--navy-800);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-float-phones a:hover{background:var(--orange-600);color:#fff;}
.hp-float-panel-body .hp-btn{width:100%;justify-content:center;padding:10px;font-size:12.5px;}
.hp-float-quote{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:6px;background:var(--gray-50);color:var(--navy-800);font-size:12.5px;font-weight:700;text-decoration:none;}
.hp-float-quote:hover{background:var(--gray-100);}
@media (max-width:480px){
	.hp-float{right:12px;bottom:150px;}
	.hp-float-trigger{width:52px;height:52px;}
	.hp-float-panel{width:calc(100vw - 24px);max-width:280px;}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
	.hp-prodgrid{grid-template-columns:repeat(4,1fr);}
	.hp-catgrid{grid-template-columns:repeat(4,1fr);}
	.hp-needsgrid{grid-template-columns:repeat(3,1fr);}
	.hp-hero-left{display:none;}
	.hp-twocol{grid-template-columns:1fr;}
	.hp-footer .wrap{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
	/* Top marketing strip is the first thing that breaks on narrow screens
	   (long Vietnamese sentences with no wrap room) - it's non-essential,
	   drop it and let the real header take that space. */
	.hp-topbar{display:none;}

	.hp-mobile-menu-toggle{display:block;}
	.hp-header .wrap{flex-wrap:wrap;gap:12px 14px;}
	.hp-logo img{height:38px;}
	.hp-search{order:3;max-width:100%;flex:0 0 100%;}

	/* Keep the phone action, drop the two secondary ones (Báo giá nhanh /
	   Catalogue text blocks) to stop the header wrapping into a wall of
	   text - both are still reachable from the topbar-equivalent links
	   further down the page and from the product/contact CTAs. */
	.hp-header-actions{margin-left:auto;gap:14px;}
	.hp-action-quote .lbl,.hp-action-catalogue .lbl,.hp-action-quote .val,.hp-action-catalogue .val{display:none;}
	.hp-action-quote,.hp-action-catalogue{gap:0;}
	.hp-header-actions .hp-action i{font-size:20px;}
	.hp-action .lbl{display:none;}
	.hp-header-actions .hp-action .val{font-size:13px;}

	/* Pages nav (Giới thiệu/Công trình.../Liên hệ): collapsed by default,
	   opens as a stacked dropdown under the header via the hamburger. */
	.hp-pagesnav-bar{display:none;}
	.hp-pagesnav-bar.mobile-open{display:block;position:absolute;left:0;right:0;z-index:95;box-shadow:var(--shadow-md);}
	.hp-pagesnav-bar .wrap{padding:0;max-width:100%;}
	.hp-pagesnav{flex-direction:column;}
	.hp-pagesnav>li>a{padding:13px 20px;white-space:normal;}
	.hp-pagesnav-sub{position:static;box-shadow:none;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:var(--navy-700);padding:0;}
	.hp-pagesnav-sub li a{padding:11px 32px;color:#dbe4f5;}
	.hp-pagesnav-sub li a:hover{background:var(--navy-800);color:var(--orange-500);}
	.hp-pagesnav>li:hover .hp-pagesnav-sub{display:none;}
	.hp-pagesnav>li.subopen .hp-pagesnav-sub,
	.hp-pagesnav>li:hover.subopen .hp-pagesnav-sub{display:block;}

	/* the sidebar "DANH MỤC SẢN PHẨM" dropdown lives inside .hp-hero-left,
	   which is hidden at the 1180px tier below for layout reasons - bring
	   it back as a full-width block above the hero banner so category
	   browsing is still reachable on phones/tablets. */
	.hp-hero .wrap{flex-direction:column;}
	.hp-hero-left{display:block !important;width:100%;flex:0 0 auto;margin-bottom:14px;}
}
@media (max-width:720px){
	.hp-nav-list{display:none;}
	.hp-prodgrid{grid-template-columns:repeat(2,1fr);}
	.hp-catgrid{grid-template-columns:repeat(3,1fr);}
	.hp-needsgrid{grid-template-columns:repeat(2,1fr);}
	.hp-newsgrid{grid-template-columns:1fr 1fr;}
	.hp-footer .wrap{grid-template-columns:1fr;}
	.hp-promorow{grid-template-columns:1fr;margin-top:10px;}
	.hp-product-cta{flex-direction:column;}
	.hp-product-cta .hp-btn{width:100%;}
}

/* ==========================================================================
   Category / listing page
   ========================================================================== */

.hp-breadcrumb{padding:12px 0;font-size:12px;color:var(--gray-600);}
.hp-breadcrumb ul{display:flex;flex-wrap:wrap;gap:6px;}
.hp-breadcrumb li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--gray-400);}
.hp-breadcrumb a:hover{color:var(--orange-600);}

.hp-catpage-top{padding-bottom:18px;}
.hp-catpage-top .wrap{display:flex;gap:22px;align-items:stretch;}
.hp-catpage-headcol{flex:1;min-width:0;}
.hp-catpage-headcol h1{font-size:24px;margin:0 0 8px;color:var(--navy-900);font-weight:800;}
.hp-catpage-desc{font-size:13px;color:var(--gray-600);max-width:760px;line-height:1.8;}
.hp-catpage-desc p{margin:0 0 10px;}

/* collapsed-by-default category description, expands as an overlay on
   click (same fade + flyout pattern as the sidebar category box) */
.hp-catdesc-box{position:relative;margin:0 0 16px;max-width:760px;}
.hp-catdesc-panel{position:relative;max-height:140px;overflow:hidden;}
.hp-catdesc-box.open .hp-catdesc-panel{max-height:none;overflow:visible;position:absolute;left:0;top:0;width:100%;background:#fff;z-index:40;padding:14px;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-md);}
.hp-catdesc-more{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:flex-end;gap:6px;background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 60%);font-size:12px;font-weight:700;color:var(--orange-600);cursor:pointer;}
.hp-catdesc-more:hover{color:var(--orange-500);}
.hp-catdesc-box.open .hp-catdesc-more{display:none;}

.hp-catpage-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hp-catpage-perk{display:flex;align-items:center;gap:10px;border:1px solid var(--gray-200);border-radius:var(--radius);padding:10px 12px;}
.hp-catpage-perk i{font-size:18px;color:var(--orange-600);}
.hp-catpage-perk span{font-size:12px;font-weight:600;color:var(--gray-800);}

.hp-catpage-banner{flex:0 0 340px;border-radius:var(--radius);overflow:hidden;position:relative;background:linear-gradient(135deg,var(--navy-800),var(--navy-700));display:flex;align-items:center;min-height:170px;}
.hp-catpage-banner .cp{position:relative;padding:22px;color:#fff;}
.hp-catpage-banner .cp b{display:block;font-size:16px;margin-bottom:4px;}
.hp-catpage-banner .cp span{font-size:12px;color:#c9d4ea;display:block;margin-bottom:14px;}

.hp-catpage-layout{display:flex;gap:24px;align-items:flex-start;padding:24px 0 40px;}
.hp-catpage-sidebar{flex:0 0 270px;}
.hp-catpage-main{flex:1;min-width:0;}

.hp-filterbox{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;}
.hp-filterbox h2{font-size:13px;font-weight:800;color:var(--navy-900);letter-spacing:.03em;background:var(--gray-50);padding:12px 14px;margin:0;border-bottom:1px solid var(--gray-200);}
.hp-filterbox .body{padding:6px 14px 14px;}
.hp-filterbox ul li{border-bottom:1px solid var(--gray-100);}
.hp-filterbox ul li:last-child{border-bottom:0;}
.hp-filterbox ul li a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;font-size:13px;color:var(--text);}
.hp-filterbox ul li a:hover{color:var(--orange-600);}
.hp-filterbox ul li a em{font-style:normal;color:var(--gray-400);font-size:12px;}

.hp-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;}
.hp-toolbar .result-count{font-size:13px;color:var(--gray-600);}
.hp-toolbar .result-count b{color:var(--navy-900);}
.hp-toolbar-right{display:flex;align-items:center;gap:14px;}
.hp-toolbar select{border:1px solid var(--gray-200);border-radius:6px;padding:7px 10px;font-size:13px;font-family:inherit;color:var(--text);}
.hp-toolbar .SortBox form{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-600);}

.hp-pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:26px 0;}
.hp-pagination a,.hp-pagination li{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:6px;font-size:13px;color:var(--text);}
.hp-pagination li{border:1px solid var(--gray-200);padding:0;}
.hp-pagination li a{border:0;height:auto;width:100%;}
.hp-pagination a:hover{border-color:var(--orange-600);color:var(--orange-600);}
.hp-pagination li.ActivePage{background:var(--orange-600);border-color:var(--orange-600);color:#fff;font-weight:700;}
.hp-pagination .FloatLeft a,.hp-pagination .FloatRight a{border:1px solid var(--gray-200);}
.hp-pagination .CategoryPagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;width:100%;}
.hp-pagination .PagingList{display:flex;gap:6px;list-style:none;padding:0;margin:0;}
.hp-pagination .FloatLeft,.hp-pagination .FloatRight{display:contents;}

@media (max-width:900px){
	.hp-catpage-top .wrap{flex-direction:column;}
	.hp-catpage-banner{flex:0 0 auto;width:100%;}
	.hp-catpage-perks{grid-template-columns:1fr 1fr;}
	.hp-catpage-layout{flex-direction:column;}
	.hp-catpage-sidebar{flex:0 0 auto;width:100%;}
}

/* ==========================================================================
   Product detail page
   ========================================================================== */

.hp-breadcrumb-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px;}
.hp-breadcrumb-row li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--gray-400);}
.hp-breadcrumb-row a:hover{color:var(--orange-600);}
.hp-breadcrumb-row li:last-child{color:var(--text);font-weight:600;}

.hp-product-top{padding:18px 0 40px;}
.hp-product-top .wrap{display:grid;grid-template-columns:400px 1fr 300px;gap:26px;align-items:start;}

/* gallery */
.hp-gallery{position:relative;}
.hp-gallery-main{position:relative;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;background:var(--gray-50);height:380px;display:flex;align-items:center;justify-content:center;}
.hp-gallery-main img{max-height:100%;max-width:100%;object-fit:contain;}
.hp-gallery-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2;}
.hp-gallery-badges span{background:var(--red-600);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:4px;}
.hp-gallery-badges .genuine{background:var(--navy-800);display:flex;align-items:center;gap:4px;}
.hp-gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.hp-gallery-thumbs img{width:64px;height:64px;object-fit:contain;border:2px solid var(--gray-200);border-radius:6px;background:var(--gray-50);cursor:pointer;padding:4px;}
.hp-gallery-thumbs img:hover,.hp-gallery-thumbs img.active{border-color:var(--orange-600);}

/* info column */
.hp-product-info h1{font-size:21px;margin:0 0 8px;color:var(--navy-900);font-weight:800;}
.hp-product-meta{font-size:12px;color:var(--gray-600);margin-bottom:10px;}
.hp-product-meta b{color:var(--text);}
.hp-product-rating{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray-600);margin-bottom:14px;}
.hp-product-price{background:var(--gray-50);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.hp-product-price .cur{font-size:26px;font-weight:800;color:var(--red-600);}
.hp-product-price .old{font-size:14px;color:var(--gray-400);text-decoration:line-through;margin-left:8px;}
.hp-product-price .save{display:inline-block;background:#ffe3e3;color:var(--red-600);font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;margin-left:8px;}
.hp-variations{margin-bottom:14px;}
.hp-variation-group{margin-bottom:10px;}
.hp-variation-label{font-size:12px;font-weight:700;color:var(--gray-800);margin-bottom:6px;}
.hp-variation-pills{display:flex;flex-wrap:wrap;gap:8px;}
.hp-variation-pill{display:inline-block;padding:7px 14px;border:1px solid var(--gray-200);border-radius:20px;font-size:12px;color:var(--text);cursor:pointer;background:#fff;}
.hp-variation-pill:hover{border-color:var(--orange-600);}
.hp-variation-pill.active{background:var(--navy-800);border-color:var(--navy-800);color:#fff;font-weight:700;}
.hp-variation-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gray-400);margin-top:4px;}

.hp-product-stock{display:flex;align-items:center;gap:8px;font-size:13px;color:#1a9c4d;margin-bottom:12px;}
.hp-product-stock i{color:#1a9c4d;}
.hp-product-bullets{list-style:none;margin:0 0 18px;padding:0;}
.hp-product-bullets li{display:flex;gap:8px;font-size:13px;color:var(--gray-800);margin-bottom:8px;}
.hp-product-bullets i{color:var(--orange-600);margin-top:2px;}
.hp-product-cta{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.hp-product-cta .hp-btn{flex:1;min-width:180px;justify-content:center;padding:14px 18px;font-size:14px;}
.hp-btn-zalo{background:#0068ff;color:#fff;}
.hp-btn-zalo:hover{background:#0057d6;}

/* individual sales-rep contact strip - real staff, full page width so 8
   people fit across two rows (one per region) instead of being squeezed
   into the narrow middle info column. */
.hp-salesteam-full{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);padding:18px 0;}
.hp-salesteam-head{font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--navy-900);display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.hp-salesteam-head i{color:var(--orange-600);}
.hp-salesteam-row{display:flex;align-items:stretch;gap:10px;margin-bottom:10px;}
.hp-salesteam-row:last-child{margin-bottom:0;}
.hp-salesteam-row .region-tag{flex:0 0 84px;display:flex;align-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--navy-800);border-radius:var(--radius);padding:0 12px;text-transform:uppercase;letter-spacing:.02em;}
.hp-salesteam-item{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:8px 12px;min-width:0;}
.hp-salesteam-item .who{min-width:0;}
.hp-salesteam-item .name{display:block;font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-salesteam-item .phone{display:block;font-size:12.5px;font-weight:700;color:var(--red-600);white-space:nowrap;}
.hp-salesteam-item .phone:hover{color:var(--orange-600);}
.hp-salesteam-item .zalo{flex:0 0 auto;}
.hp-salesteam-item .zalo img{width:26px;height:26px;border-radius:50%;}

@media (max-width:900px){
	.hp-salesteam-row{flex-wrap:wrap;}
	.hp-salesteam-row .region-tag{flex:0 0 100%;justify-content:center;padding:6px;margin-bottom:4px;}
	.hp-salesteam-item{flex:1 1 calc(50% - 5px);}
}
@media (max-width:520px){
	.hp-salesteam-item{flex:1 1 100%;}
}

/* category browse menu reused on the product page's right column - same
   collapsible component as home/category pages, just stretched to fill
   this narrower column instead of its fixed 270px. */
.hp-product-catmenu{margin-bottom:16px;}
.hp-product-catmenu .hp-sidecats-box{width:100%;}

/* right column - real regional sales contact card */
.hp-salescard{background:linear-gradient(180deg,var(--navy-800),var(--navy-700));border-radius:var(--radius);overflow:hidden;color:#fff;margin-bottom:16px;}
.hp-salescard-head{padding:14px 16px;text-align:center;background:rgba(255,255,255,.08);}
.hp-salescard-head h3{margin:0 0 4px;font-size:14px;color:var(--orange-500);}
.hp-salescard-head p{margin:0;font-size:11px;color:#c9d4ea;}
.hp-salescard-body{padding:14px 16px;}
.hp-salescard-region{margin-bottom:12px;font-size:12px;}
.hp-salescard-region b{display:block;color:var(--orange-500);margin-bottom:5px;font-size:12px;text-transform:uppercase;letter-spacing:.02em;}
.hp-salescard-phones{display:flex;gap:6px;flex-wrap:nowrap;}
.hp-salescard-phones a{color:#fff;font-size:13px;font-weight:700;letter-spacing:0;background:rgba(255,255,255,.1);padding:8px 4px;border-radius:6px;flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-salescard-phones a:hover{background:var(--orange-600);}
@media (max-width:360px){
	.hp-salescard-phones a{font-size:11.5px;padding:8px 2px;}
}
.hp-salescard-body .hp-btn{width:100%;justify-content:center;margin-bottom:8px;padding:10px;font-size:12px;}
.hp-salescard-services{display:flex;justify-content:space-between;text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);}
.hp-salescard-services div{flex:1;font-size:10px;color:#c9d4ea;}
.hp-salescard-services i{display:block;font-size:16px;color:var(--orange-500);margin-bottom:4px;}

.hp-trustbox{border:1px solid var(--gray-200);border-radius:var(--radius);padding:14px 16px;}
.hp-trustbox h3{font-size:13px;margin:0 0 12px;color:var(--navy-900);}
.hp-trustbox ul{list-style:none;margin:0;padding:0;}
.hp-trustbox li{display:flex;gap:10px;font-size:12px;color:var(--gray-800);margin-bottom:10px;}
.hp-trustbox i{color:var(--orange-600);margin-top:2px;}

/* tabs */
.hp-product-tabs{padding:0 0 40px;}
.hp-tabnav{display:flex;gap:4px;border-bottom:2px solid var(--gray-200);margin-bottom:20px;}
.hp-tabnav button{background:none;border:0;padding:12px 20px;font-size:13px;font-weight:700;color:var(--gray-600);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit;}
.hp-tabnav button.active{color:var(--orange-600);border-color:var(--orange-600);}
.hp-tabpanel{display:none;}
.hp-tabpanel.active{display:block;}
.hp-tabpanel .hp-prodgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.hp-desc-content{font-size:13px;color:var(--gray-800);line-height:1.9;max-width:900px;margin:0 auto;border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px 28px;background:#fff;}
.hp-desc-content p{margin:0 0 12px;}
.hp-desc-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:10px auto;display:block;}
/* embedded YouTube videos / PDF viewers / any iframe or object in rich-text
   content (description, reviews...) - admin-authored HTML often hardcodes
   a fixed pixel width (or 100% width with a fixed pixel height), which
   overflows or looks squashed on narrow screens without this. */
.hp-tabpanel iframe,
.hp-desc-content iframe{max-width:100%;aspect-ratio:16/9;height:auto;border:0;}
.hp-tabpanel embed,
.hp-tabpanel object,
.hp-desc-content embed,
.hp-desc-content object{max-width:100%;}
.hp-tabpanel table,
.hp-desc-content table{max-width:100%;display:block;overflow-x:auto;}

/* Standalone CMS "page" (Chính Sách, Giới thiệu...) and news article
   layout - a content column + the shared sidebar (category nav + trust
   badges), reusing .hp-desc-content for the same rounded-card treatment
   and embed responsiveness as the product description tab. */
.hp-simplepage{padding:24px 0 50px;}
.hp-simplepage-layout{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start;}
.hp-simplepage-side .hp-sidecats-box{width:100%;flex:none;margin-bottom:16px;}
/* page/news content columns run long - keep the category list fully
   expanded inline instead of the collapsed-with-"see more" state used
   where it sits next to a shorter hero/product column. */
.hp-simplepage-side .hp-sidecats-panel{max-height:none;overflow:visible;}
.hp-simplepage-side .hp-sidecats-more{display:none;}
.hp-simplepage-main h1{font-size:24px;margin:0 0 12px;color:var(--navy-900);font-weight:800;}
.hp-newsmeta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-600);margin-bottom:16px;}
.hp-newsmeta i{color:var(--orange-600);}
@media (max-width:900px){
	.hp-simplepage-layout{grid-template-columns:1fr;}
}

/* ---------- Search results page ---------- */
.hp-search-header{margin-bottom:8px;}
.hp-search-header h1{font-size:22px;margin:0 0 10px;color:var(--navy-900);font-weight:800;}
.hp-search-suggest{font-size:13px;color:var(--gray-600);margin:0 0 10px;}
.hp-search-suggest a{color:var(--orange-600);font-weight:600;}

#SearchTabsList{display:flex;gap:4px;border-bottom:2px solid var(--gray-200);margin:0 0 20px;list-style:none;padding:0;}
#SearchTabsList span{margin-bottom:-2px;}
#SearchTabsList span a{display:inline-block;padding:12px 20px;font-size:13px;font-weight:700;color:var(--gray-600);border-bottom:2px solid transparent;text-decoration:none;}
#SearchTabsList span.Active a{color:var(--orange-600);border-color:var(--orange-600);}

.hp-search-meta{font-size:13px;color:var(--gray-600);margin-bottom:14px;display:flex;gap:16px;flex-wrap:wrap;}

#SearchResultsProduct ul.ProductList{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:0;}
#SearchResultsProduct .ProductCompareButton,
#SearchResultsProduct .ProductActionAdd{display:none !important;}

.SearchSorting{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:13px;color:var(--gray-600);margin-bottom:14px;}
.SearchSorting select{border:1px solid var(--gray-200);border-radius:6px;padding:7px 10px;font-size:13px;font-family:inherit;color:var(--text);}

.SearchPaging{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:26px 0;}
.SearchPaging a,
.SearchPaging span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border:1px solid var(--gray-200);border-radius:6px;font-size:13px;color:var(--text);text-decoration:none;}
.SearchPaging a:hover{border-color:var(--orange-600);color:var(--orange-600);}
.SearchPaging .ActivePage{background:var(--orange-600);border-color:var(--orange-600);color:#fff;font-weight:700;}

.hp-search-noresult{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;}
.hp-search-noresult p{margin:0 0 10px;font-size:14px;}
.hp-search-suggestions ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--gray-600);}

.hp-search-content{margin-top:6px;}

@media (max-width:1180px){
	#SearchResultsProduct ul.ProductList{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:720px){
	#SearchResultsProduct ul.ProductList{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:1100px){
	.hp-product-top .wrap{grid-template-columns:1fr 1fr;}
	.hp-product-top .wrap>:nth-child(3){grid-column:1/3;}
}
@media (max-width:720px){
	.hp-product-top .wrap{grid-template-columns:1fr;}
	.hp-product-top .wrap>:nth-child(3){grid-column:auto;}
	.hp-tabpanel .hp-prodgrid{grid-template-columns:repeat(2,1fr);}
	.hp-desc-content{padding:16px 18px;}
}