/* Hợp Thành Thịnh 2026 — clean storefront system.
   No legacy stylesheet dependency and no specificity overrides. */
:root {
  --brand: #3157d5;
  --brand-dark: #162c78;
  --brand-soft: #eef2ff;
  --accent: #ff7a1a;
  --danger: #e31b23;
  --ink: #101828;
  --text: #344054;
  --muted: #667085;
  --line: #e4e9f2;
  --surface: #fff;
  --canvas: #f1f4f9;
  --radius: 10px;
  --container: 1260px;
  --shadow: 0 2px 10px rgba(16, 24, 40, .05);
  --shadow-hover: 0 14px 34px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin-top: 0; }
button, input, select, textarea { font: inherit; }
.pagewrap { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.clr { clear: both; height: 0; }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.mobile, .cart_mb, .header_mobile { display: none; }
.desktop { display: block; }
.autohide { display: none; }
.conten { min-height: 360px; background: var(--canvas); }

/* Utility bar */
.header_top { height: 34px; background: #111a34; color: #d7def7; font-size: 13px; }
.header_top .pagewrap, .company_time { height: 100%; display: flex; align-items: center; }
.company_time { width: 100%; min-width: 0; }
#info_header { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
#info_header marquee { height: 34px; line-height: 34px; }
#info_header a { color: #fff; }
.pulse-icon { position: relative; flex: 0 0 8px; width: 8px; height: 8px; }
.pulse-icon .icon-wrap, .pulse-icon .pulse { position: absolute; inset: 0; border-radius: 50%; background: #31c978; }
.pulse-icon .pulse { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { transform: scale(2.6); opacity: 0; } }
.right_header { margin-left: auto; height: 34px; display: flex; align-items: center; }
.right_header > li { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-left: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
.right_header > li:last-child { padding-right: 0; }
.right_header a { color: #eef2ff; }
.right_header i { color: var(--accent); }
.dropdown-content { position: absolute; z-index: 90; top: 34px; right: 0; min-width: 230px; padding: 7px; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-hover); }
.dropdown-content a { display: flex; gap: 8px; padding: 8px 10px; color: var(--text); border-radius: 6px; }
.dropdown-content a:hover { background: var(--brand-soft); color: var(--brand); }

/* Main header */
.header-main-container { background: #fff; }
.header-item { height: 86px; display: flex; align-items: center; gap: 26px; }
.logo_top { flex: 0 0 165px; }
.logo_top img { width: auto; height: 82px; max-width: 150px; object-fit: contain; }
.timkiem_top { position: relative; flex: 1; min-width: 0; }
.timkiem_top form { margin: 0; }
.search { height: 48px; display: flex; overflow: hidden; background: #fff; border: 2px solid var(--brand); border-radius: 9px; box-shadow: 0 3px 12px rgba(49, 87, 213, .08); }
.search select { flex: 0 0 158px; width: 158px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: #f8f9fc; color: #475467; font-size: 13px; outline: 0; }
.search input { min-width: 0; flex: 1; padding: 0 16px; border: 0; color: var(--ink); outline: 0; }
.search > a { flex: 0 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 6px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; }
.search > a:hover { background: #2444b3; }
.autocomplete-suggestions { position: absolute; z-index: 100; top: 54px; left: 0; right: 0; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-hover); }
.autocomplete-suggestions .list > a { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.right_top_id ul { display: flex; align-items: center; gap: 18px; }
.right_top_id .hotline { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 16px; font-weight: 800; white-space: nowrap; }
.right_top_id .hotline i { width: 38px; height: 38px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); border-radius: 50%; }
.right_top_id .buildpc { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.right_top_id li.desktop > a { position: relative; width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand); border: 1px solid var(--line); border-radius: 9px; }
.right_top_id li.desktop span { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--danger); color: #fff; border-radius: 10px; font-size: 11px; }
.m_gianhang { display: none; }

/* 2026-09-18: Cloud Zoom (js/cloud-zoom.1.0.2.min.js, used on 2a.php/5a.php
   product detail pages) injects its own #wrap/.mousetrap overlay around the
   main product image with a hardcoded inline z-index:999 -- far above this
   theme's header/mega-menu stack (50-80 below), so opening the category
   menu on any product page rendered the product image ON TOP of it. Scoped
   to #bridal_images (the plugin's own image container) so this only touches
   the zoom widget, not any other #wrap id elsewhere in the codebase. */
#bridal_images #wrap, #bridal_images .mousetrap, #bridal_images #cloud-zoom-big { z-index: 5 !important; }

/* Navigation and mega menu */
.box_header_id { position: relative; z-index: 50; height: 46px; background: var(--brand); box-shadow: 0 4px 10px rgba(26, 52, 132, .16); }
.box_header_id > .pagewrap { height: 46px; display: flex; }
.nav-main-box { position: relative; flex: 0 0 252px; }
.cate-title { height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 10px; background: var(--brand-dark); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
.cate-title::before { content: "☰"; font-size: 17px; }
.cate-title span::after { content: "▾"; margin-left: 8px; }
.nav-main { position: absolute; z-index: 55; top: 46px; left: 0; width: 252px; max-height: 0; overflow: hidden; opacity: 0; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: var(--shadow); transition: opacity .16s ease; }
.nav-main-box:hover .nav-main, .nav-main-box.hp-open .nav-main { max-height: 700px; overflow: visible; opacity: 1; }
.nav-main > li { position: relative; height: 36px; border-bottom: 1px solid #f0f2f6; }
.nav-main > li:last-child { border-bottom: 0; }
.nav-main > li > a { height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.nav-main > li > a span { min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-menu-icon { flex: 0 0 18px; width: 18px; height: 18px; object-fit: contain; }
.nav-main > li:hover { background: var(--brand-soft); color: var(--brand); }
.hp-mega-panel { position: absolute; z-index: 60; top: 0; left: 251px; width: 690px; min-height: 436px; max-height: 520px; padding: 18px 22px; display: none; overflow-y: auto; columns: 3; column-gap: 20px; background: #fff; color: var(--text); border-radius: 0 10px 10px 0; box-shadow: var(--shadow-hover); }
.nav-main > li:hover .hp-mega-panel { display: block; }
/* 2026-09-22: menu cấp 3 - mỗi nhãn hàng (cấp 2) là 1 nhóm, kèm danh sách con
   (cấp 3) thụt lề bên dưới; columns:3 tự cân đối chiều cao khác nhau giữa các
   nhóm (brand nào nhiều sub thì nhóm đó dài hơn), break-inside tránh nhóm bị
   cắt đôi giữa 2 cột. */
.hp-mega-group { break-inside: avoid; margin-bottom: 4px; }
.hp-mega-brand { display: block; padding: 7px 0; color: var(--ink); font-size: 13px; font-weight: 800; border-bottom: 1px dashed var(--line); }
.hp-mega-brand:hover { color: var(--brand); }
.hp-mega-sub { padding: 2px 0 6px 10px; }
.hp-mega-sub a { display: block; padding: 5px 0; color: var(--muted); font-size: 12.5px; }
.hp-mega-sub a:hover { color: var(--brand); }

.hp-mega-panel {
  padding: 16px 20px;
  border: 1px solid #dce5f4;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
}
.hp-mega-group { margin-bottom: 8px; }
.hp-mega-brand { padding: 7px 0 6px; border-bottom-color: #dbe4f2; }
.hp-mega-sub { padding: 4px 0 6px 12px; }
.hp-mega-sub a { position: relative; padding: 4px 0 4px 10px; }
.hp-mega-sub a::before { position: absolute; top: 12px; left: 0; width: 4px; height: 4px; content: ''; background: #a9b8d1; border-radius: 50%; }
.hp-mega-sub a:hover::before { background: var(--accent); }
.menu_id_load { flex: 1; min-width: 0; overflow: hidden; }
.menu_id_load > ul { height: 46px; display: flex; align-items: center; justify-content: space-between; }
.menu_id_load li { position: relative; }
.menu_top_right { height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 6px; color: #fff; border-left: 1px solid rgba(255, 255, 255, .09); font-size: 13px; white-space: nowrap; }
.menu_top_right:hover { background: rgba(0, 0, 0, .1); }
.menu_top_right i { color: #ffd4b5; }
.suport-hover { position: absolute; z-index: 80; top: 46px; right: 0; width: 320px; padding: 14px; display: none; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 0 0 9px 9px; box-shadow: var(--shadow-hover); }
.menu_id_load li:hover .suport-hover { display: block; }
.suport-hover h3 { margin: 5px 0; color: var(--muted); font-size: 12px; }
.box_zalo { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.box_zalo img { width: 25px; height: 25px; border-radius: 5px; }

/* Homepage composition */
.hp-home .nav-main { max-height: 436px; opacity: 1; overflow: hidden; }
.hp-hero-stage { min-height: 436px; padding-top: 12px; display: grid; grid-template-columns: 252px minmax(0, 1fr) 270px; gap: 12px; }
.hp-hero-categories { grid-column: 1; }
.hp-hero-main { grid-column: 2; min-width: 0; height: 424px; }
.hp-hero-promos { grid-column: 3; height: 424px; display: flex; flex-direction: column; gap: 12px; }
.hp-hero-main .box_banner_top, .hp-hero-main .banner_top, .hp-hero-main .bannerMain, .hp-hero-main .banner, .hp-hero-main .owl-carousel, .hp-hero-main .owl-stage-outer, .hp-hero-main .owl-stage, .hp-hero-main .owl-item, .hp-hero-main .owl-item li, .hp-hero-main .owl-item a { height: 100%; }
.hp-hero-main .banner { overflow: hidden; background: #e9edf5; border-radius: 10px; box-shadow: var(--shadow); }
.hp-hero-main .owl-carousel img { width: 100%; height: 424px; object-fit: cover; }
.hp-hero-promo { flex: 1; min-height: 0; overflow: hidden; background: #e9edf5; border-radius: 10px; box-shadow: var(--shadow); }
.hp-hero-promo img { width: 100%; height: 206px; object-fit: cover; }
.hp-hero-main .owl-nav { display: none; }
.hp-hero-main .owl-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.hp-hero-main .owl-dot span { width: 7px; height: 7px; margin: 0; display: block; background: rgba(255, 255, 255, .8); border-radius: 10px; }
.hp-hero-main .owl-dot.active span { width: 22px; background: var(--accent); }

.hp-service-strip { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.hp-service-strip > a { min-height: 72px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--line); }
.hp-service-strip > a:last-child { border-right: 0; }
.hp-service-strip i { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); border-radius: 9px; }
.hp-service-strip strong { display: block; color: var(--ink); font-size: 14px; }
.hp-service-strip small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }

.banner_home_bottom { margin-top: 12px; }
.banner_home_bottom > .pagewrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.banner_home_qc { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.banner_home_qc:hover { box-shadow: 0 10px 24px rgba(20, 30, 60, .12); transform: translateY(-2px); }
.banner_home_qc img { width: 100%; height: 220px; object-fit: cover; display: block; }

.home_flashsale, .box_pro_home { margin-top: 12px; }
.hp-home-category-more { display: none; text-align: center; margin: 14px 0; }
.hp-home-category-more button { min-height: 42px; padding: 0 18px; color: var(--brand); background: #fff; border: 1px solid #b9c8f9; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.hp-home-category-more button:hover { color: #fff; background: var(--brand); border-color: var(--brand); }

/* 2026-09-22: "Xem thêm sản phẩm" under the "sản phẩm cùng loại" grid (product detail pages) */
.hp-related-more { margin: 16px 0 4px; text-align: center; }
.hp-related-more a { min-height: 42px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: #fff; border: 1px solid #b9c8f9; border-radius: 8px; font-size: 13px; font-weight: 800; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.hp-related-more a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.home_flashsale > .pagewrap, .box_pro_home > .pagewrap { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.box_flashsale { padding: 14px; display: flex; gap: 14px; background: linear-gradient(135deg, #fff8f2, #fff); }
#banner-flash-sale { flex: 0 0 220px; }
#banner-flash-sale img { width: 100%; border-radius: 9px; }
.sanpham_flashsale { flex: 1; min-width: 0; }
.col-flash-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.sanpham_flashsale .item { padding: 12px; display: grid; grid-template-columns: 145px 1fr; gap: 12px; background: #fff; }
.sanpham_flashsale .img { height: 145px; }
.sanpham_flashsale .img img { width: 100%; height: 100%; object-fit: contain; }
.sanpham_flashsale .title { height: 38px; overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.45; }
.container-price { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.black-price { display: none; }
.reduce-percent { padding: 2px 6px; background: var(--danger); color: #fff; border-radius: 4px; font-size: 11px; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 12px; }
.title-shock-price { margin: 8px 0 2px; color: var(--danger); font-size: 11px; font-weight: 700; }
.price-new { color: var(--danger); font-size: 18px; font-weight: 800; }
.review_product { margin-top: 5px; display: flex; gap: 3px; color: #d0d5dd; font-size: 11px; }
.nki-Star-full-new, .checked { color: #ffad0a; }
.container-timeline, .countdown-flash-sale { display: none; }

.tieude_page { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.tieude_page > h3 { position: relative; margin: 0; padding-left: 13px; color: var(--ink); font-size: 19px; line-height: 1.25; text-transform: uppercase; }
.tieude_page > h3::before { content: ""; position: absolute; top: 1px; bottom: 1px; left: 0; width: 4px; background: var(--brand); border-radius: 4px; }
.titles_home { position: relative; }
.m_title_home_a { display: none; }
.box_title_home { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.box_title_home a { padding: 5px 11px; display: block; background: #f8f9fc; color: #475467; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; }
.box_title_home a:hover { background: var(--brand-soft); color: var(--brand); border-color: #c8d2ff; }
.box_pro_home .pro_id_page { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }

/* 2026-09-16: homepage category rows now slide (kiểu anphatpc.com.vn) instead
   of a static grid — .hp-owl-products replaces .pro_id_page only on home.php;
   .pro_id_page itself is left alone since category/related-product pages
   still render it as a plain grid via the shared LIST_products() helper. */
.hp-owl-products { position: relative; padding: 14px 46px; }
.hp-owl-products .owl-stage-outer { overflow: hidden; }
.hp-owl-products .owl-nav button { position: absolute; top: 50%; width: 34px; height: 34px; display: grid; place-items: center; background: #fff; color: var(--brand); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-hover); transform: translateY(-50%); transition: background .16s ease, color .16s ease; }
.hp-owl-products .owl-nav button:hover { background: var(--brand); color: #fff; }
.hp-owl-products .owl-nav .owl-prev { left: -46px; }
.hp-owl-products .owl-nav .owl-next { right: -46px; }
.hp-owl-products .owl-nav .disabled { opacity: .35; pointer-events: none; }
.hp-product-card, .pro_id_page > ul { min-width: 0; min-height: 370px; padding: 12px 13px 14px; display: flex; flex-direction: column; background: #fff; }
.hp-owl-products .hp-product-card { height: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.hp-product-card { position: relative; }
.hp-product-card:hover, .pro_id_page > ul:hover { position: relative; z-index: 2; box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-hover); }
.hp-product-media, .pro_id_page > ul > li:first-child { position: relative; height: 210px; margin-bottom: 8px; overflow: hidden; background: #fff; border-radius: 7px; }
.hp-product-media img, .pro_id_page > ul > li:first-child img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.hp-product-card:hover .hp-product-media img { transform: scale(1.035); }
.discount, .hp-discount-badge { position: absolute; z-index: 3; top: 6px; left: 6px; padding: 4px 7px; background: var(--danger); color: #fff; border-radius: 5px; font-size: 11px; font-weight: 800; }
.hp-product-code, .pro_id_page > ul > p { height: 17px; margin: 0 0 4px; overflow: hidden; color: #98a2b3; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.hp-product-name, .pro_id_page > ul > h3 { height: 39px; margin: 0 0 5px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.48; }
.hp-product-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hp-product-rating { height: 16px; margin-bottom: 4px; display: flex; gap: 2px; color: #d0d5dd; font-size: 11px; }
.hp-product-price, .pro_id_page > ul > h4 { min-height: 42px; margin-top: auto; display: flex; flex-direction: column; }
.hp-old-price, .pro_id_page > ul > h4 span { height: 17px; color: var(--muted); text-decoration: line-through; font-size: 12px; font-weight: 400; }
.hp-product-price strong, .pro_id_page > ul > h4 { color: var(--danger); font-size: 17px; font-weight: 800; }

/* 2026-09-22: fade+slide-up reveal as product cards scroll into view (armed by js/script218.js) */
.hp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; }
.hp-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hp-reveal { opacity: 1; transform: none; transition: none; }
}
.hp-product-cta { display: none; }
.viewmore_home { padding: 11px; text-align: center; background: #fff; border-top: 1px solid var(--line); }
.viewmore_home a { min-width: 118px; height: 34px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); border: 1px solid var(--brand); border-radius: 7px; font-size: 13px; font-weight: 700; }
.viewmore_home a:hover { background: var(--brand); color: #fff; }

/* Homepage editorial and partners */
.tintuc_home_box { margin-top: 14px; }
.tintuc_home_box > .pagewrap, .box_pro_home:has(#owl-carousel9) > .pagewrap, .box_doitac_home > .pagewrap { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tintuc_home_box .titBox, .box_pro_home:has(#owl-carousel9) .titBox { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.tintuc_home_box .tit_2, .box_pro_home:has(#owl-carousel9) .tit_2 { color: var(--ink); font-size: 22px; font-weight: 800; }
.tintuc_home_box .sub_2 { margin-top: 4px; color: var(--muted); font-size: 13px; }
.tintuc_home_id { padding: 14px; }
#owl-carousel3 .owl-item > ul { height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
#owl-carousel3 .owl-item > ul > li { overflow: hidden; list-style: none; }
#owl-carousel3 .owl-item img { width: 100%; height: 220px; object-fit: cover; transition: transform .25s ease; }
#owl-carousel3 .owl-item > ul:hover img { transform: scale(1.025); }
#owl-carousel3 .owl-item h4 { padding: 11px 13px 0; color: var(--muted); font-size: 12px; font-weight: 500; }
#owl-carousel3 .owl-item h4 i { margin-right: 5px; color: var(--brand); }
#owl-carousel3 .owl-item h3 { min-height: 52px; padding: 7px 13px 4px; color: var(--ink); font-size: 16px; line-height: 1.45; }
#owl-carousel3 .owl-item p { padding: 0 13px 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.box_pro_home:has(#owl-carousel9 .owl-stage:empty) { display: none; }
.box_doitac_home { margin-top: 14px; }
.box_doitac_home .title_id { padding: 14px 18px; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 800; }
.logo_doitac { padding: 14px 16px; }
.logo_doitac .owl-item ul, .logo_doitac .owl-item li { list-style: none; }
.logo_doitac .owl-item li { height: 78px; padding: 9px; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; }
.logo_doitac .owl-item img { width: 100%; height: 58px; object-fit: contain; mix-blend-mode: multiply; }

/* Footer */
.footer_top { margin-top: 16px; padding: 34px 0 26px; background: #111a34; color: #cbd3ea; }
.footer_top > .pagewrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.col_footer { min-width: 0; }
.col_footer h3, .newsletter_home > p, .footer_thanhtoan h3 { margin: 0 0 12px; color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.col_footer li { margin-bottom: 8px; }
.col_footer a { color: #b9c3df; font-size: 12.5px; }
.col_footer a:hover { color: #fff; }
.newsletter_home form { display: grid; gap: 8px; }
.newsletter_row input { width: 100%; height: 38px; padding: 0 11px; background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .15); border-radius: 7px; outline: 0; }
.newsletter_home h2 { margin: 0; }
.newsletter_home h2 a { height: 38px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 7px; font-size: 13px; }
.footer_payments { grid-column: 1 / -1; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer_bct img { width: 145px; }
.footer_thanhtoan { display: flex; align-items: center; gap: 15px; }
.footer_thanhtoan h3 { margin: 0; }
.footer_thanhtoan img { width: auto; max-height: 28px; }
.bottom_id_copyright { padding: 15px 0; background: #0b1124; color: #8f9ab9; text-align: center; font-size: 12px; }

/* Product/category/search layouts */
.hp-inner .pageconten_load, .page_conten_page, .padding_pagewrap { margin-top: 14px; margin-bottom: 18px; }
.linn_page, .title_link { padding: 12px 0; color: var(--muted); font-size: 13px; }
.page_conten { display: block; }
.left_content, .leftBox, .right_content, .showText, #proView, .right_giohang, .left_giohang, .tt_giohang { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.page_conten .pro_id_page, .pageconten_load > .pro_id_page { overflow: hidden; }
.proCat-2-group, .product-filter-container, .sortby { margin-bottom: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.tab-sub-category { display: flex; flex-wrap: wrap; gap: 10px; }
.tab-sub-category a {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 17px; color: var(--brand-dark);
  background: var(--brand-soft); border: 1px solid #dbe3ff; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04); transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.tab-sub-category a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f02b"; font-size: 11px; opacity: .75; }
.tab-sub-category a:hover, .tab-sub-category a.active {
  color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-hover);
}
.tab-sub-category a:hover::before, .tab-sub-category a.active::before { opacity: 1; }
.row-filter { min-height: 38px; display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line); }
.row-filter:last-child { border-bottom: 0; }
.title-filter { color: var(--ink); font-size: 13px; font-weight: 800; }
.filter-list { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-list a { padding: 5px 9px; color: var(--text); background: var(--canvas); border-radius: 6px; font-size: 13px; }
.sortby { display: flex; align-items: center; gap: 15px; }
.sortby > p { flex: 0 0 auto; margin: 0; color: var(--ink); font-size: 13px; font-weight: 800; }
.box_sort, .sort-list, .choose-price-holder { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.box_sort { flex: 1; justify-content: space-between; }
.sort-list a { padding: 7px 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.sort-list a:hover, .sort-list a.active { color: #fff; background: var(--brand); border-color: var(--brand); }
.choose-price-holder input { width: 110px; height: 34px; padding: 0 9px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.submit-filter { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; color: #fff; background: var(--brand); border-radius: 6px; font-weight: 700; }
.products_list #load_search { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.products_list #load_search > ul { min-width: 0; min-height: 370px; padding: 12px 13px 14px; display: flex; flex-direction: column; background: #fff; }
.products_list #load_search > ul:hover { position: relative; z-index: 2; box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-hover); }
.products_list ul > li:first-child { height: 210px; margin-bottom: 8px; overflow: hidden; list-style: none; background: #fff; border-radius: 7px; }
.products_list ul > li:first-child img { width: 100%; height: 100%; object-fit: contain; }
.products_list ul > h3 { height: 39px; margin: 0 0 6px; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.48; }
.products_list ul > h4 { min-height: 23px; margin: auto 0 4px; color: var(--danger); font-size: 17px; font-weight: 800; }
.products_list ul > h4 span { color: var(--muted); text-decoration: line-through; font-size: 12px; font-weight: 400; }
.products_list ul > p { margin: 2px 0; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.products_list ul > p:last-child { color: #f3a619; letter-spacing: 1px; }
.more_page { margin-top: 14px; display: flex; justify-content: center; gap: 6px; }
.pageconten_load { padding-top: 14px; }
.pageconten_load #proView { padding: 18px; display: grid; grid-template-columns: minmax(330px, 1fr) minmax(380px, 1.08fr) 240px; gap: 22px; align-items: start; }
.leftBox { padding: 16px; }
.viewLeft, .viewRight, .sanpham_right { min-width: 0; }
#pro_img_main { min-width: 0; }
#bridal_images img, .bk-product-image { width: 100%; max-height: 480px; object-fit: contain; }
.viewLeft #bridal_images { min-height: 410px; display: grid; place-items: center; }
#bridal_images_list { margin-top: 10px; }
#bridal_images_list li { padding: 4px; border: 1px solid var(--line); border-radius: 6px; }
#bridal_images_list img { width: 100%; height: 62px; object-fit: contain; }
.box_xemcauhinh { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.box_xemcauhinh .cauhinhmay { max-height: 280px; overflow: hidden; font-size: 13px; }
.box_xemcauhinh table { width: 100%; border-collapse: collapse; }
.box_xemcauhinh td { padding: 5px 4px; vertical-align: top; }
.box_xemcauhinh tr:nth-child(even) { background: #f8f9fc; }
.box_xemcauhinh .item-button { margin-top: 10px; display: inline-flex; color: var(--brand); font-size: 13px; font-weight: 700; }
.box_xemcauhinh .blue.item-button { min-height: 38px; padding: 0 14px; align-items: center; justify-content: center; gap: 7px; color: #fff; background: linear-gradient(135deg, var(--brand), #2445a8); border: 1px solid var(--brand); border-radius: 7px; box-shadow: 0 6px 14px rgba(36, 69, 168, .18); font-size: 12px; font-weight: 800; letter-spacing: .1px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.box_xemcauhinh .blue.item-button:hover { color: #fff; background: linear-gradient(135deg, var(--accent), #e66700); border-color: #e66700; box-shadow: 0 8px 18px rgba(230, 103, 0, .22); transform: translateY(-1px); }
.box_xemcauhinh .blue.item-button i { font-size: 13px; }
.titleView { position: relative; min-height: 72px; padding-right: 76px; border-bottom: 1px solid var(--line); }
.product_info h1, .bk-product-name { color: var(--ink); font-size: 23px; line-height: 1.35; }
.titleView .a_watchlist { display: inline-flex; margin-top: 3px; color: var(--brand); font-size: 19px; }
.box_qr { position: absolute; top: 0; right: 0; width: 64px; height: 64px; }
.box_qr img { width: 64px; height: 64px; object-fit: contain; }
.viewRight > .desc { margin: 14px 0 8px; padding: 12px; background: #f8f9fc; border-radius: 8px; }
.viewRight > .desc .item { margin: 0 0 7px; color: var(--text); font-size: 13.5px; }
.viewRight > .desc .item i { color: var(--brand); }
.viewRight > .desc .hide { display: none; }
.viewRight > .desc > p:last-child { margin: 4px 0 0; }
.viewRight > .desc > p:last-child a { color: var(--brand); font-size: 13px; font-weight: 700; }
.viewRight > p { margin: 8px 0; color: var(--muted); font-size: 13px; }
.giaban { position: relative; margin: 14px 0; padding: 14px; color: var(--muted); background: var(--brand-soft); border-radius: 8px; }
.bk-product-price { display: inline; color: var(--danger); font-size: 27px; font-weight: 800; }
.giagoc { color: var(--muted); text-decoration: line-through; }
.giaban .hp-discount-badge { top: -8px; left: auto; right: 10px; }
.a_inbaogia { position: absolute; right: 12px; bottom: 10px; color: var(--brand); }
.pro-special-offer-container { margin: 12px 0; overflow: hidden; border: 1px solid #ffd9ba; border-radius: 8px; }
.spec-title { padding: 8px 11px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }
.offer-container { padding: 11px 13px; font-size: 13px; line-height: 1.6; }
.offer-container ul { list-style: disc; padding-left: 17px; }
.buyBtn { min-height: 46px; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; border-radius: 8px; font-size: 16px; font-weight: 800; text-transform: uppercase; }
.buyBtn:hover { background: #c8151c; }
.sanpham_right > div { margin-bottom: 12px; padding: 13px; background: #f8f9fc; border: 1px solid var(--line); border-radius: 8px; }
.sanpham_right h3 { margin: 0 0 9px; color: var(--ink); font-size: 15px; }
.sanpham_right li { margin-bottom: 7px; font-size: 13px; }
.sanpham_right li i { color: var(--brand); }
.row_spkhac { margin-bottom: 7px; font-size: 12.5px; }
.row_spkhac label { display: flex; gap: 6px; align-items: flex-start; }
.btn_common, .button, .buy_other1, .buy_other2 { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; background: var(--brand); color: #fff; border: 0; border-radius: 7px; font-weight: 700; }
.showText { margin-top: 14px; padding: 20px; overflow: hidden; line-height: 1.7; }
.showText img, .showText iframe, .showText table { max-width: 100%; }

/* Product reviews */
.boder_right_2 { margin-top: 14px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.boder_right_2 > .title_page, #product-description.title_page { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.boder_right_2 > .title_page h2, #product-description.title_page h2 { margin: 0; color: var(--ink); font-size: 21px; }
.danhgia_tringbinh { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.danhgia_tringbinh .heading { color: var(--ink); font-size: 16px; font-weight: 800; }
.danhgia_tringbinh p { margin: 0; color: var(--muted); font-size: 13px; }
.boder_right_2 > .row { max-width: 620px; display: grid; grid-template-columns: 70px minmax(0, 1fr) 36px; align-items: center; gap: 8px 12px; }
.boder_right_2 .side { color: var(--muted); font-size: 13px; }
.boder_right_2 .side.right { text-align: right; }
.boder_right_2 .bar-container { height: 9px; overflow: hidden; background: #eaecf0; border-radius: 8px; }
.boder_right_2 .bar-1, .boder_right_2 .bar-2, .boder_right_2 .bar-3, .boder_right_2 .bar-4, .boder_right_2 .bar-5 { height: 100%; min-width: 0; background: #f5a623; border-radius: 8px; }
#frm-binhchon { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.boxComment_danhgia h3 { margin: 0 0 14px; color: var(--ink); font-size: 17px; }
.boxComment_danhgia > li { margin: 10px 0 7px; color: var(--text); list-style: none; }
#stars { display: flex; align-items: center; gap: 4px; }
#stars .star { color: #d0d5dd; list-style: none; cursor: pointer; font-size: 29px; transition: color .18s ease, transform .18s ease; }
/* 2026-09-18: css/rateit.css (vendor star-rating plugin) sets
   ".rating-stars ul > li.star > i.fa { font-size: 2.5em }" -- relative to
   the *icon's* own inherited font-size, which is this rule's font-size:29px
   (26px on mobile below). The two stylesheets each assumed they alone
   controlled the icon size, so they compound: 29px * 2.5 = 72.5px real
   icon size (26px * 2.5 = 65px on mobile), making each of the 5 stars ~81px
   wide (#stars is a flex row with no explicit li width, so it sizes to the
   icon). 5 * 81px + gaps > every mobile viewport width, forcing the whole
   page to horizontally overflow/scroll on any product page with a review
   form. Fix at the icon itself with an absolute size so it can not compound
   further no matter what font-size a future edit puts on #stars .star. */
#stars .star > i.fa { font-size: 24px !important; }

#stars .star:hover, #stars .star.selected { color: #f5a623; transform: translateY(-1px); }
.boxComment_danhgia .row-frm { margin-top: 10px; }
.boxComment_danhgia textarea.form-control { width: 100%; resize: vertical; background: #fff; }
.boxComment_danhgia .row-frm h4 { margin: 10px 0 0; }
.boxComment_danhgia .row-frm h4 a { min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; color: #fff; background: var(--brand); border-radius: 7px; font-size: 13px; font-weight: 800; }
.mod-reviews { margin-top: 16px; }
.hp-product-jump {
  margin: 22px 0 0; display: flex; gap: 4px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
.hp-product-jump a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 800;
  transition: background .18s ease, color .18s ease;
}
.hp-product-jump a i { font-size: 12px; }
.hp-product-jump a:hover, .hp-product-jump a:focus { color: var(--brand); background: var(--brand-soft); }
.hp-product-jump a.is-active { color: #fff; background: var(--brand); box-shadow: 0 4px 14px rgba(49, 87, 213, .3); }
#product-description, #product-specifications, #product-reviews { scroll-margin-top: 84px; }
.hp-mobile-buy-bar { display: none; }
#popup_bannerhome_id { background: rgba(11, 17, 36, .48); backdrop-filter: blur(2px); }
#popup_bannerhome_id .indeeep_auto { width: min(560px, calc(100vw - 48px)); max-height: min(70vh, 520px); overflow: hidden; border-radius: 12px; box-shadow: 0 20px 56px rgba(0,0,0,.32); }
#popup_bannerhome_id .indeeep_auto img { width: 100%; height: auto; }
#popup_bannerhome_id .closewindows { top: max(14px, calc(50% - 280px)); right: max(14px, calc(50% - 300px)); }
.mod-reviews > .item {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease;
}
.mod-reviews > .item:hover { box-shadow: var(--shadow-hover); }
.mod-reviews > .item:last-child { margin-bottom: 0; }
.mod-reviews .left-reviews { min-width: 0; }
.mod-reviews .middle-text { display: flex; align-items: center; gap: 10px; }
.mod-reviews .avartar_info {
  width: 52px; height: 52px; flex: 0 0 52px; overflow: hidden;
  border: 2px solid var(--brand-soft); border-radius: 50%; background: var(--brand-soft);
}
.mod-reviews .avartar_info img { width: 100%; height: 100%; object-fit: cover; }
.mod-reviews .me_info { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.mod-reviews .me_info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-reviews .me_info p, .mod-reviews .left-reviews > p {
  margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 400;
}
.mod-reviews .left-reviews > p { margin-left: 62px; }
.mod-reviews .right-reviews { min-width: 0; }
.mod-reviews .right-reviews > .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mod-reviews .container-star ul { display: inline-flex; align-items: center; gap: 2px; }
.mod-reviews .container-star .star { list-style: none; color: #d0d5dd; font-size: 16px; }
.mod-reviews .container-star .star.selected { color: #f5a623; }
.mod-reviews .upreply {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 5px 12px;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; font-size: 12px; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.mod-reviews .upreply:hover { color: #fff; background: var(--brand); text-decoration: none; }
.mod-reviews .right-reviews .title { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mod-reviews .item-content { margin-top: 10px; padding: 12px 14px; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; }
.mod-reviews .item-content .content { color: var(--text); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.mod-reviews .nums { margin-top: 6px; }
.mod-reviews .nums ul { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-reviews .nums a, .mod-reviews .nums span {
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 12px; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mod-reviews .nums a:hover, .mod-reviews .nums .active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Reply thread (nested replies rendered by view_Reply(), previously unstyled) */
.mod-reviews [id^="list-reply-comment-"]:not(:empty) {
  margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--line);
}
.mod-reviews .block_reply { margin-top: 12px; }
.mod-reviews .block_reply:first-child { margin-top: 0; }
.mod-reviews .cm_box_in1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px; color: var(--muted); font-size: 12px;
}
.mod-reviews .name_friends { color: var(--ink); font-size: 13px; font-weight: 700; font-style: normal; }
.mod-reviews .cm_box_in2 { display: flex; align-items: flex-start; gap: 10px; }
.mod-reviews .cm_box_in_left { flex: 0 0 32px; }
.mod-reviews .cm_box_in_left img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.mod-reviews .cm_box_in3 {
  min-width: 0; flex: 1; padding: 9px 12px; background: var(--canvas);
  border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; line-height: 1.55;
}
.mod-reviews .tienich_binhluan { display: inline-flex; gap: 10px; }
.mod-reviews .tienich_binhluan a {
  display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700;
}
.mod-reviews .tienich_binhluan a:hover { color: var(--brand); }
.mod-reviews .control_reply { position: relative; margin-left: auto; }
.mod-reviews .btn_setup_comment { color: var(--muted); padding: 2px 6px; }
.mod-reviews .btn_setup_comment:hover { color: var(--brand); }
.mod-reviews .open_control_reply {
  display: none; position: absolute; right: 0; top: 100%; z-index: 5; min-width: 140px; margin-top: 4px;
  padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-hover);
}
.mod-reviews .open_control_reply.setup_reply_opened { display: block; }
.mod-reviews .open_control_reply .itemcmt a {
  display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 12px; font-weight: 700;
}
.mod-reviews .open_control_reply .itemcmt a:hover { background: var(--brand-soft); color: var(--brand); }
.mod-reviews .option_edit_reply { margin-top: 6px; font-size: 12px; }
.mod-reviews .option_edit_reply a { color: var(--brand); font-weight: 700; }
.mod-reviews .show_more_reply {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 12px;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.mod-reviews .show_more_reply:hover { background: var(--brand); color: #fff; }

/* Reply-to-review input box: hidden until "Trả lời" toggles it (JS slideToggle expects display:none by default) */
.box_reply_comment { display: none; margin-top: 12px; }
.box_input_reply_comment {
  display: flex; align-items: center; gap: 10px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.box_input_reply_comment:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.avatar_comment_reply { flex: 0 0 32px; display: block; }
.avatar_comment_reply img.img_comment_reply { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.input_reply_comment {
  flex: 1; min-width: 0; height: 36px; padding: 0 6px; border: 0; outline: 0;
  background: transparent; color: var(--text); font-size: 13px; font-family: inherit;
}
.input_reply_comment::placeholder { color: var(--muted); }
.btn_send_reply {
  flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.btn_send_reply:hover { background: var(--brand-dark); }
.btn_send_reply:active { transform: scale(.92); }
@media (max-width: 767px) {
  .hp-home-category-hidden { display: none; }
  #popup_bannerhome_id .indeeep_auto { width: calc(100vw - 32px); max-height: 56vh; }
  #popup_bannerhome_id .closewindows { top: 18vh; right: 10px; }
  .hp-product-jump { position: sticky; z-index: 20; top: 8px; margin-top: 12px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .hp-product-jump::-webkit-scrollbar { display: none; }
  .hp-product-jump a { flex: 0 0 auto; padding: 9px 14px; }
  .hp-mobile-buy-bar { position: fixed; z-index: 101; right: 0; bottom: 58px; left: 0; min-height: 58px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -5px 18px rgba(16,24,40,.12); }
  .hp-mobile-buy-price { min-width: 0; flex: 1; overflow: hidden; color: var(--danger); font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .hp-mobile-buy-bar a { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--danger); border-radius: 7px; font-size: 13px; font-weight: 800; white-space: nowrap; }
  .mod-reviews > .item { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .mod-reviews .left-reviews > p { margin-left: 0; }
  .mod-reviews .right-reviews > .top { align-items: flex-start; }
  .mod-reviews .upreply { display: inline-flex; margin: 7px 0 0; }
  .mod-reviews .container-star ul { display: flex; }
  .mod-reviews .right-reviews .title { padding-top: 2px; }
  .mod-reviews .control_reply { margin-left: 0; }
  .mod-reviews [id^="list-reply-comment-"]:not(:empty) { padding-left: 12px; }
}

/* PC builder */
.build-pc { margin-top: 0; }
.build-pc_content { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.build-pc_intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.build-pc_intro p { margin: 0; color: var(--text); }
.build-pc_content hr { margin: 15px 0; height: 1px; background: var(--line); border: 0; }
.build-pc_total { margin: 0 0 12px; color: var(--muted); text-align: right; }
.build-pc_total .js-config-summary { margin-left: 5px; color: var(--danger); font-size: 21px; font-weight: 800; }
.list-drive { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.item-drive { min-height: 64px; display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); }
.item-drive:last-child { border-bottom: 0; }
.item-drive > .d-name { padding: 15px 16px; display: flex; align-items: center; color: var(--ink); background: var(--canvas); border-right: 1px solid var(--line); font-size: 14px; font-weight: 800; }
.drive-checked { min-width: 0; padding: 10px 12px; display: flex; align-items: center; }
.open-selection { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 7px; color: var(--brand); background: var(--brand-soft); border: 1px dashed #9eb4ff; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 800; }
.open-selection:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.buildpc-selected-item { flex: 1; min-width: 0; }
.contain-item-drive { display: grid; grid-template-columns: 68px minmax(0, 1fr) 105px 20px 60px 20px 105px 34px 34px; align-items: center; gap: 8px; }
.contain-item-drive .d-img { width: 62px; height: 62px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.contain-item-drive .d-img img { width: 100%; height: 100%; object-fit: contain; }
.contain-item-drive .d-name { color: var(--muted); font-size: 12px; line-height: 1.5; }
.contain-item-drive .d-name a { color: var(--ink); font-size: 13px; font-weight: 800; }
.contain-item-drive .d-price, .contain-item-drive .sum_price { color: var(--danger); text-align: right; font-weight: 800; }
.contain-item-drive .count-p { width: 58px; height: 34px; text-align: center; border: 1px solid var(--line); border-radius: 6px; }
.btn-action_seclect { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); background: var(--canvas); border-radius: 6px; cursor: pointer; }
.delete_select { color: var(--danger); }
.list-btn-action { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.list-btn-action li { list-style: none; }
.list-btn-action span { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; color: #fff; background: var(--brand); border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 800; text-transform: none; }
.build-pc_reset span { color: var(--danger); background: #fff4f4; border: 1px solid #ffd0d0; }
.build-pc_total-bottom { margin-top: 14px; }

/* Cart and forms */
.pagewrap768 { width: min(calc(100% - 32px), 1000px); margin-inline: auto; }
.page_conten_page { padding-top: 20px; }
.right_giohang, .left_giohang, .tt_giohang { margin-bottom: 14px; padding: 18px; }
.right_giohang h2, .left_giohang h2, .tt_giohang h2 { color: var(--ink); font-size: 18px; }
.danhsachdoonhang > ul { padding: 12px 0; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.danhsachdoonhang .img { flex: 0 0 72px; width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 7px; }
.danhsachdoonhang .img img { width: 100%; height: 100%; object-fit: contain; }
.danhsachdoonhang h3 { flex: 1; margin: 0; color: var(--ink); font-size: 14px; }
.danhsachdoonhang h4 { margin: 0; color: var(--danger); font-size: 16px; }
.quanity_giohang { width: 66px; }
.quanity_giohang input { border: 1px solid var(--line); border-radius: 6px; }
.makm { padding: 12px 0; display: flex; gap: 8px; }
.makm h3 { display: none; }
.makm input, .form-control, .contact input, .contact textarea, .contact select { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; outline: 0; }
.makm a { padding: 0 18px; display: flex; align-items: center; background: var(--brand); color: #fff; border-radius: 7px; }
.total-cart ul { padding: 7px 0; display: flex; justify-content: space-between; }
.total-cart h3, .total-cart h4 { margin: 0; }
.total-cart ul:last-child h4 { color: var(--danger); font-size: 21px; }
.payment_method_input { margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.payment_method_input label { display: flex; align-items: center; gap: 10px; }
.payIds { margin-top: 8px; padding: 10px; background: var(--canvas); border-radius: 7px; }
.btn-cart { display: flex; justify-content: flex-end; gap: 10px; }
.btn-cart li a { min-height: 42px; padding: 0 22px; display: flex; align-items: center; background: var(--brand); color: #fff; border-radius: 7px; }
.hp-empty-cart { padding: 60px 20px; text-align: center; color: var(--muted); }
.hp-empty-cart i { display: block; margin-bottom: 15px; color: #cdd5e4; font-size: 49px; }
.hp-empty-cart-btn { padding: 10px 20px; display: inline-flex; background: var(--brand); color: #fff; border-radius: 7px; }

/* News and generic content */
.title_page_news { padding: 22px 0 12px; }
.title_page_news h1 { position: relative; padding-left: 16px; color: var(--ink); font-size: 29px; letter-spacing: -.3px; }
.title_page_news h1::before { position: absolute; top: 3px; bottom: 3px; left: 0; width: 5px; content: ''; background: linear-gradient(180deg, var(--brand), var(--accent)); border-radius: 4px; }
.menu_news { margin-bottom: 14px; padding: 8px; display: flex; flex-wrap: wrap; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.menu_news a { padding: 8px 13px; background: var(--canvas); border: 1px solid transparent; border-radius: 7px; font-weight: 700; }
.menu_news a:hover, .menu_news a.active { color: #fff; background: var(--brand); }
.tintuc_page_top { margin-bottom: 18px; padding: 12px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.one_new_home > li, .one_new_home_right li { list-style: none; }
.one_new_home > li img { width: 100%; height: 350px; object-fit: cover; border-radius: 8px; }
.one_new_home > ul { padding: 12px 4px 4px; }
.one_new_home h3 { margin-bottom: 7px; color: var(--ink); font-size: 20px; line-height: 1.35; }
.one_new_home p { color: var(--muted); line-height: 1.6; }
.one_new_home_right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.one_new_home_right > ul { min-width: 0; overflow: hidden; background: var(--canvas); border-radius: 8px; }
.one_new_home_right > ul:nth-child(n + 5) { display: none; }
.one_new_home_right li img { width: 100%; height: 145px; object-fit: cover; }
.one_new_home_right h3 { padding: 9px 10px 11px; color: var(--ink); font-size: 14px; line-height: 1.42; }
.tin_page_left { width: calc(68% - 8px); float: left; }
.tin_page_right { width: calc(32% - 8px); float: right; }
.row_news { margin-bottom: 12px; padding: 12px; display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; }
.row_news:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.row_news .img { flex: 0 0 180px; }
.row_news .img img { width: 180px; height: 120px; object-fit: cover; border-radius: 7px; }
.row_news .info_news { flex: 1; }
.row_news h3 { margin-bottom: 7px; color: var(--ink); font-size: 17px; line-height: 1.4; }
.row_news p { color: var(--muted); line-height: 1.55; }
.date_news { margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.title_news { margin-bottom: 12px; }
.title_news h2 { margin: 0 0 9px; color: var(--ink); font-size: 23px; line-height: 1.4; }
.title_news > li { margin-bottom: 8px; color: var(--muted); list-style: none; font-size: 13px; }
.title_news > p { color: var(--text); line-height: 1.6; }
.showText h2, .showText h3 { margin: 20px 0 10px; color: var(--ink); line-height: 1.4; }
.showText p { margin: 0 0 12px; }
.showText figure { max-width: 100%; margin: 14px auto; }
.showText figcaption { padding-top: 5px; color: var(--muted); font-size: 13px; }
.tin_page_right { position: sticky; top: 12px; }
.box_title_right { margin-bottom: 12px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.widget-title { margin-bottom: 10px; color: var(--ink); font-size: 15px; }
.tintuc_right_id li { padding: 8px 0; display: flex; gap: 9px; border-bottom: 1px solid var(--line); line-height: 1.4; list-style: none; }
.tintuc_right_id li:last-child { border-bottom: 0; }
.tintuc_right_id .stt { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-size: 12px; font-weight: 800; }
.sanpham_right_id .row_sp { padding: 10px 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--line); }
.sanpham_right_id { max-height: 900px; overflow-y: auto; }
.sanpham_right_id .row_sp:last-child { border-bottom: 0; }
.row_sp_img img { width: 92px; height: 92px; object-fit: contain; }
.row_sp_info h3 { margin: 0 0 6px; font-size: 13px; line-height: 1.4; }
.row_sp_info h4 { color: var(--danger); font-size: 14px; }
.row_sp_info h4 span { color: var(--muted); text-decoration: line-through; font-size: 11px; }

/* Pagination shared by news and legacy listing templates */
.nums { clear: both; padding: 18px 0 6px; }
.nums > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.nums .page { margin: 0; list-style: none; }
.nums .pagination { min-width: 38px; height: 38px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 7px rgba(16, 24, 40, .05); font-size: 14px; font-weight: 700; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.nums .pagination:hover { color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.nums .pagination.active { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 5px 14px rgba(44, 82, 190, .24); }
.nums .pagination[href="javascript:void(0)"] { color: #a8b0bf; background: #f2f4f7; border-color: #e5e9f0; pointer-events: none; box-shadow: none; }

/* One consistent order shortcut for every product-list card */
.hp-product-cta, .hp-quick-order { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #fff; background: linear-gradient(135deg, var(--brand), #2445a8); border: 1px solid var(--brand); border-radius: 7px; font-size: 13px; font-weight: 800; line-height: 1; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.hp-product-cta:hover, .hp-quick-order:hover { color: #fff; background: linear-gradient(135deg, #f58220, #e66700); border-color: #e66700; box-shadow: 0 6px 15px rgba(230, 103, 0, .23); transform: translateY(-1px); }
.hp-product-cta i, .hp-quick-order i { font-size: 14px; }

/* 2026-09-22: "Giỏ hàng" sits beside "Đặt hàng" in a shared row (js/script218.js
   wraps both in .hp-product-actions) instead of the CTA alone filling the card. */
.hp-product-actions { margin-top: 9px; display: flex; gap: 6px; }
.hp-product-actions > .hp-product-cta, .hp-product-actions > .hp-quick-order, .hp-product-actions > .hp-cart-add { flex: 1; min-width: 0; }
.hp-cart-add { min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--brand); background: #fff; border: 1px solid var(--brand); border-radius: 7px; font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.hp-cart-add:hover { color: #fff; background: var(--brand); box-shadow: 0 6px 15px rgba(36, 69, 168, .22); }
.hp-cart-add i { font-size: 14px; }
.products_list #load_search > ul > .hp-product-actions, .box_pro_home .pro_id_page > ul > .hp-product-actions { order: 10; width: 100%; }
.sanpham_flashsale .item > .hp-product-actions { width: 100%; }
.sanpham_right_id .row_sp > .hp-product-actions { margin-top: 2px; grid-column: 2; flex-direction: column; gap: 3px; }
.sanpham_right_id .hp-quick-order, .sanpham_right_id .hp-cart-add { min-height: 26px; font-size: 11px; }

/* Floating helpers */
.hp-side-rail { position: fixed; z-index: 30; top: 50%; width: 150px; height: 500px; overflow: hidden; background: #0b1733; border: 1px solid rgba(255, 255, 255, .7); border-radius: 12px; box-shadow: 0 18px 45px rgba(14, 29, 66, .28); transform: translateY(-50%); }
.hp-side-rail-left { left: max(8px, calc(50% - 800px)); }
.hp-side-rail-right { right: max(8px, calc(50% - 800px)); }
.hp-side-rail > a { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; color: #fff; }
.hp-side-rail img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hp-side-rail > a::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, rgba(5, 13, 33, .06) 25%, rgba(5, 13, 33, .86) 100%); }
.hp-side-rail:hover img { transform: scale(1.035); }
.hp-side-rail-copy { position: absolute; z-index: 2; right: 11px; bottom: 13px; left: 11px; display: flex; flex-direction: column; align-items: flex-start; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.hp-side-rail-copy small { margin-bottom: 3px; color: #dbe7ff; font-size: 11px; font-weight: 600; }
.hp-side-rail-copy strong { font-size: 17px; line-height: 1.25; }
.hp-side-rail-copy b { margin-top: 9px; padding: 7px 9px; color: #fff; background: var(--accent); border-radius: 6px; font-size: 10px; text-shadow: none; }
.hp-side-rail-copy b i { margin-left: 3px; }
.hp-mobile-nav { display: none; }
/* 2026-09-17: the off-canvas category nav (jQuery mmenu, tren.php) only gets
   hidden once jquery.mmenu.min.all.js runs $(document).ready() and tags it
   with .mm-menu - jquery.mmenu.all.css has no rule for the plain, untagged
   nav. On a real page load that's a real gap (confirmed via throttled test:
   ~0.6-0.8s, longer on a slow connection), during which the raw <nav><ul> of
   every category renders inline, full width, unstyled - a ~4000px wall of
   plain links dumped at the top of the page. :not(.mm-menu) makes this rule
   stop matching the instant mmenu.js tags the element, so it never fights
   mmenu's own .mm-menu.mm-offcanvas/.mm-current show/hide rules afterwards. */
#menu_mobile:not(.mm-menu) { display: none; }

/* 2026-09-18: the jquery.mmenu off-canvas drawer (#menu_mobile, opened via the
   bottom nav's "Danh muc" link) keeps its own z-index in the 0-2 range --
   fine among its own parts, but this theme's floating chrome (bottom nav
   z-index:100, product buy-bar z-index:101, Zalo/Facebook chat FABs
   z-index:9999) sits in a completely separate, much higher layer, so all
   three kept rendering on top of the open drawer, overlapping its bottom
   menu items. mmenu adds "mm-opened" to <html> while the drawer is open --
   use that to hide our own floating chrome for that moment instead of
   trying to out-rank #mm-blocker's intentionally huge z-index:999999. */
html.mm-opened .hp-mobile-nav, html.mm-opened .hp-mobile-buy-bar, html.mm-opened .hp-chat-fab { display: none !important; }

.fix_tel { display: none; }
.icon-fixed-right-group { position: fixed; z-index: 40; right: 12px; bottom: 70px; display: flex; flex-direction: column; gap: 6px; }
.icon-fixed-right-group > a { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; color: var(--brand); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow); }
.icon-fixed-right-group > a:hover { color: #fff; background: var(--brand); }
.icon-fixed-right-group i { font-size: 16px; }
.icon-fixed-right-group img { width: 22px; height: 22px; object-fit: contain; }
#backtop { opacity: 0; pointer-events: none; }
#backtop.hp-show { opacity: 1; pointer-events: auto; }

@media (min-width: 1521px) {
  .icon-fixed-right-group { display: none; }
}

@media (min-width: 1521px) and (max-width: 1900px) {
  .hp-side-rail { width: 115px; height: 400px; }
  .hp-side-rail-left { left: 8px; }
  .hp-side-rail-right { right: 8px; }
  .hp-side-rail-copy { right: 8px; bottom: 10px; left: 8px; }
  .hp-side-rail-copy small { font-size: 9px; }
  .hp-side-rail-copy strong { font-size: 13px; }
  .hp-side-rail-copy b { padding: 6px 7px; font-size: 9px; }
}

/* Legacy popup hooks, restyled as modern dialogs */
.taoweb_class, .taoweb_class1100, .taoweb_class_auto { position: fixed; z-index: 1000; inset: 0; padding: 24px; align-items: center; justify-content: center; background: rgba(11, 17, 36, .68); backdrop-filter: blur(4px); }
.taoweb_class.hp-modal-open, .taoweb_class1100.hp-modal-open, .taoweb_class_auto.hp-modal-open { display: flex; }
.indeeep, .indeeep_auto { position: relative; width: min(100%, 620px); max-height: calc(100vh - 48px); padding: 22px; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, .25); }
.indeeep_auto { width: min(100%, 760px); padding: 0; overflow: hidden; }
.indeeep_auto img { width: 100%; height: auto; }
.closewindows { position: absolute; z-index: 1010; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; background: #fff; color: var(--ink); border-radius: 50%; box-shadow: var(--shadow-hover); cursor: pointer; }
.login_id_popup .tit { margin-bottom: 16px; color: var(--ink); font-size: 20px; }
.login_id_popup .row-frm { margin-bottom: 10px; }
.login_id_popup .row-frm h4 { margin-bottom: 5px; color: var(--text); font-size: 13px; }
.login_id_popup .form-control { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; }
.login_id_popup .checkbox { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; }
.box_dangnhap_popup h2 { margin: 14px 0 0; }
.box_dangnhap_popup h2 a { height: 42px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; border-radius: 7px; font-size: 14px; }
.bt-login { margin-top: 8px; display: flex; justify-content: space-between; color: var(--brand); font-size: 13px; }
.login_other { margin-top: 18px; text-align: center; }
.login-with-social-plp { display: flex; justify-content: center; gap: 8px; }
.login-with-social-plp img { width: 42px; height: 42px; object-fit: contain; }

@media (max-width: 1520px) {
  .hp-side-rail { display: none; }
}

@media (max-width: 1180px) {
  .pagewrap { width: calc(100% - 24px); }
  .right_top_id .buildpc, .menu_id_load li:nth-child(2), .menu_id_load li:nth-child(5) { display: none; }
  .nav-main-box { flex-basis: 230px; }
  .nav-main { width: 230px; }
  .hp-hero-stage { grid-template-columns: 230px minmax(0, 1fr) 240px; }
  .hp-mega-panel { left: 229px; }
  .footer_top > .pagewrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body { padding-bottom: 58px; }
  .pagewrap, .pagewrap768 { width: 100%; }
  .mobile, .header_mobile { display: block; }
  .cart_mb { display: none; }
  .header_top #info_header { display: none; }
  .header_top .pagewrap { padding: 0 12px; }
  .right_header { width: 100%; justify-content: flex-end; }
  .right_header > li { padding-inline: 9px; font-size: 12px; }
  .right_header .d_gianhang { margin-right: auto; padding-left: 0; border-left: 0; }
  .header-item { height: 112px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 46px 46px; gap: 5px 10px; }
  .logo_top { grid-column: 1; width: 118px; }
  .logo_top img { height: 42px; max-width: 112px; }
  .right_top_id { grid-column: 2; grid-row: 1; }
  .right_top_id .hotline, .right_top_id .buildpc { display: none; }
  .right_top_id li.desktop { display: block; }
  .timkiem_top { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .search { height: 42px; border-width: 1px; }
  .search select { display: none; }
  .search input { padding-inline: 12px; }
  .search > a { width: 45px; padding: 0; justify-content: center; font-size: 0; }
  .search > a i { font-size: 15px; }
  .box_header_id { display: none; }
  .hp-hero-stage { min-height: 0; padding-top: 8px; display: block; }
  .hp-hero-categories { display: none; }
  .hp-hero-main { height: auto; padding: 0 10px; }
  .hp-hero-main .box_banner_top, .hp-hero-main .banner_top, .hp-hero-main .bannerMain, .hp-hero-main .banner, .hp-hero-main .owl-carousel, .hp-hero-main .owl-stage-outer, .hp-hero-main .owl-stage, .hp-hero-main .owl-item, .hp-hero-main .owl-item li, .hp-hero-main .owl-item a { height: auto; }
  .hp-hero-main .owl-carousel img { height: auto; aspect-ratio: 16 / 8.4; object-fit: cover; }
  .hp-hero-promos { height: auto; margin-top: 8px; padding: 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hp-hero-promo img { height: auto; aspect-ratio: 16 / 9; }
  .hp-service-strip { margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 0; border-inline: 0; }
  .hp-service-strip > a { min-height: 66px; padding: 10px; gap: 8px; border-bottom: 1px solid var(--line); }
  .hp-service-strip > a:nth-child(2n) { border-right: 0; }
  .hp-service-strip > a:nth-last-child(-n + 2) { border-bottom: 0; }
  .hp-service-strip i { flex-basis: 32px; width: 32px; height: 32px; }
  .hp-service-strip strong { font-size: 12.5px; }
  .hp-service-strip small { display: none; }
  .banner_home_bottom { margin-top: 8px; overflow: hidden; }
  .banner_home_bottom > .pagewrap { padding: 0 10px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .banner_home_qc { flex: 0 0 78%; scroll-snap-align: start; }
  .home_flashsale, .box_pro_home { margin-top: 8px; }
  .home_flashsale > .pagewrap, .box_pro_home > .pagewrap { border-inline: 0; border-radius: 0; }
  #banner-flash-sale { display: none; }
  .box_flashsale { padding: 10px; }
  .col-flash-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box_pro_home .pro_id_page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-owl-products { padding: 10px 8px; }
  .hp-owl-products .owl-nav button { width: 28px; height: 28px; }
  .hp-owl-products .owl-nav .owl-prev { left: 2px; }
  .hp-owl-products .owl-nav .owl-next { right: 2px; }
  .sanpham_flashsale .item { display: block; padding: 9px; }
  .sanpham_flashsale .img { height: auto; aspect-ratio: 1; }
  .tieude_page { min-height: 50px; padding: 9px 10px; }
  .tieude_page > h3 { font-size: 15px; }
  .m_title_home_a { padding: 5px 9px; display: flex; gap: 5px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
  .box_title_home { position: absolute; z-index: 25; top: 100%; right: 0; min-width: 210px; padding: 8px; display: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-hover); }
  .box_title_home[style*="block"] { display: flex; }
  .products_list #load_search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proCat-2-group, .product-filter-container, .sortby { margin-inline: 10px; padding: 10px; }
  .tab-sub-category { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tab-sub-category a { flex: 0 0 auto; }
  .row-filter { grid-template-columns: 78px minmax(0, 1fr); }
  .sortby { display: block; }
  .sortby > p { margin-bottom: 7px; }
  .box_sort { display: block; }
  .sort-list { flex-wrap: nowrap; overflow-x: auto; }
  .sort-list a { flex: 0 0 auto; }
  .choose-price-holder { margin-top: 9px; display: grid; grid-template-columns: 1fr auto 1fr auto; }
  .choose-price-holder input { width: 100%; min-width: 0; }
  .products_list #load_search { border-inline: 0; border-radius: 0; }
  .products_list #load_search > ul { min-height: 292px; padding: 9px; }
  .products_list ul > li:first-child { height: auto; aspect-ratio: 1; }
  .products_list ul > h3 { height: 35px; font-size: 12.5px; }
  .products_list ul > h4 { min-height: 20px; font-size: 15px; }
  .products_list ul > p { font-size: 10.5px; }
  .hp-product-card, .pro_id_page > ul { min-height: 292px; padding: 9px; }
  .hp-product-media, .pro_id_page > ul > li:first-child { height: auto; aspect-ratio: 1; }
  .hp-product-code, .pro_id_page > ul > p { height: 14px; font-size: 10px; }
  .hp-product-name, .pro_id_page > ul > h3 { height: 35px; font-size: 12.5px; }
  .hp-product-rating { height: 14px; font-size: 10px; }
  .hp-product-price, .pro_id_page > ul > h4 { min-height: 35px; font-size: 15px; }
  .hp-old-price, .pro_id_page > ul > h4 span { height: 14px; font-size: 10.5px; }
  .page_conten { display: block; }
  .left_content, .right_content { margin-bottom: 10px; }
  .pageconten_load #proView { padding: 12px; display: block; }
  .leftBox { margin-bottom: 10px; }
  .viewLeft #bridal_images { min-height: 300px; }
  .viewRight, .sanpham_right { margin-top: 14px; }
  .titleView { padding-right: 60px; }
  .box_qr, .box_qr img { width: 50px; height: 50px; }
  .danhsachdoonhang > ul { flex-wrap: wrap; }
  .btn-cart { flex-direction: column; }
  .btn-cart li a { justify-content: center; }
  .tin_page_left, .tin_page_right { width: 100%; float: none; }
  .title_page_news, .menu_news, .title_news { padding-inline: 10px; }
  .menu_news { flex-wrap: nowrap; overflow-x: auto; }
  .menu_news a { flex: 0 0 auto; }
  .tintuc_page_top { margin-inline: 10px; padding: 9px; display: block; }
  .one_new_home > li img { height: auto; aspect-ratio: 16 / 10; }
  .one_new_home_right { margin-top: 10px; gap: 8px; }
  .one_new_home_right li img { height: auto; aspect-ratio: 16 / 10; }
  .one_new_home_right h3 { padding: 7px; font-size: 12px; }
  .row_news { display: block; }
  .row_news { margin-inline: 10px; }
  .row_news .img { margin-bottom: 10px; }
  .row_news .img img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .nums { padding: 14px 10px 4px; }
  .nums .pagination { min-width: 34px; height: 34px; padding: 0 9px; font-size: 12px; }
  .showText { margin-inline: 10px; padding: 14px; }
  .tin_page_right { padding: 0 10px; }
  .boder_right_2 { margin: 10px; padding: 14px; }
  .danhgia_tringbinh { display: block; }
  .danhgia_tringbinh p { margin-top: 4px; }
  .boder_right_2 > .row { grid-template-columns: 54px minmax(0, 1fr) 24px; gap: 7px; }
  #stars .star { font-size: 26px; }
  .build-pc { margin-inline: 10px; }
  .build-pc_content { padding: 12px; }
  .build-pc_intro { align-items: flex-start; }
  .build-pc_intro p { font-size: 13px; line-height: 1.5; }
  .build-pc_reset { flex: 0 0 auto; }
  .build-pc_reset span { min-height: 36px; padding: 0 10px; }
  .build-pc_total { text-align: left; }
  .item-drive { display: block; }
  .item-drive > .d-name { min-height: 42px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .drive-checked { padding: 9px; }
  .open-selection { width: 100%; justify-content: center; }
  .contain-item-drive { grid-template-columns: 58px minmax(0, 1fr) 34px 34px; }
  .contain-item-drive .d-img { width: 54px; height: 54px; }
  .contain-item-drive .d-price, .contain-item-drive > i, .contain-item-drive .count-p, .contain-item-drive .sum_price { grid-column: 2; text-align: left; }
  .contain-item-drive .btn-action_seclect { grid-row: 1; grid-column: 3; }
  .contain-item-drive .delete_select { grid-column: 4; }
  #js-buildpc-action { justify-content: stretch; }
  #js-buildpc-action li { flex: 1 1 calc(50% - 8px); }
  #js-buildpc-action span { width: 100%; justify-content: center; }
  .footer_top { margin-top: 8px; padding: 24px 14px 18px; }
  .footer_top > .pagewrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .newsletter_home { grid-column: 1 / -1; }
  .footer_payments { grid-column: 1 / -1; flex-wrap: wrap; }
  /* Fixed bottom nav needs the page to reserve its own height, otherwise it
     sits on top of whatever content ends up at the bottom of the viewport -
     most visibly the cart page's "Địa chỉ email" field, which the nav bar
     covered directly. */
  body { padding-bottom: 58px; }
  .hp-mobile-nav { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; height: 58px; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -5px 20px rgba(16, 24, 40, .13); }
  .hp-mobile-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; color: var(--muted); border: 0; font-size: 11px; }
  .hp-mobile-nav-item i { color: var(--brand); font-size: 17px; }
  .hp-mobile-cart b { position: absolute; top: 4px; left: 58%; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; background: var(--danger); color: #fff; border-radius: 9px; font-size: 10px; }
  .fix_tel, .icon-fixed-right-group, .hp-side-rail { display: none; }
}

/* 2026-09-15: prominent Zalo/Facebook chat buttons (kiểu anphatpc.com.vn).
   .icon-fixed-right-group hiện chiếm khoảng bottom:70px-300px cạnh phải
   (5 icon x 46px) — đặt 2 nút mới ở dải bottom:16px-76px, CÙNG cạnh phải,
   để không chồng lên nhau (đã đo bằng puppeteer sau khi deploy, không đoán). */
.hp-chat-fab { position: fixed; right: 20px; bottom: 8px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.hp-chat-fab-zalo { background: #0068ff; }
.hp-chat-fab-zalo img { width: 32px; height: 32px; object-fit: contain; }
@media (max-width: 767px) {
  .hp-chat-fab { width: 48px; height: 48px; right: 14px; bottom: 74px; }
  .hp-chat-fab-zalo img { width: 26px; height: 26px; }
}

/* Demo B2B, navigation, support and search refinements - 2026-09-15 */
.menu_id_load { overflow: visible; }
.hp-header-b2b { background: rgba(255, 255, 255, .09); font-weight: 700; }
.hp-b2b-menu-link { background: linear-gradient(90deg, #fff5ec, #fff); }
.hp-b2b-menu-link > a { color: var(--brand); font-weight: 800; }
.hp-b2b-menu-link .fa-building { color: var(--accent); }
.hp-mega-panel { width: min(720px, calc(100vw - 270px)); min-height: 0; max-height: 520px; padding: 16px 20px; column-gap: 16px; border: 1px solid var(--line); border-left: 0; }
.hp-mega-panel a { min-height: 34px; padding: 8px; display: flex; align-items: center; border-bottom: 0; border-radius: 6px; }
.hp-mega-panel a:hover { background: var(--brand-soft); }
.hp-b2b-hero { padding: 32px 0; background: linear-gradient(115deg, #10245f, #1c5cad); color: #fff; }
.hp-b2b-hero ul { padding: 0; }
.hp-b2b-hero h2 { margin: 0 0 8px; color: #fff; font-size: 28px; font-weight: 800; }
.hp-b2b-hero h2 i { margin-right: 8px; color: #ffd06a; }
.hp-b2b-hero p { margin: 0; color: #dbe9ff; font-size: 15px; }
.hp-b2b-card { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.hp-b2b-intro { margin-bottom: 23px; display: flex; align-items: center; gap: 14px; }
.hp-b2b-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; background: #edf4ff; color: var(--brand); border-radius: 12px; font-size: 21px; }
.hp-b2b-intro strong { color: var(--ink); font-size: 18px; }
.hp-b2b-intro p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.hp-b2b-card label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.hp-b2b-card .form-control { height: 42px; border: 1px solid #d7dfed; border-radius: 8px; box-shadow: none; }
.hp-b2b-card textarea.form-control { height: auto; min-height: 104px; padding-top: 10px; }
.hp-b2b-card .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 83, 172, .12); }
.hp-b2b-card #bg_submit_btn { width: 100%; min-height: 44px; background: var(--accent); border: 0; border-radius: 8px; font-weight: 800; }
.timkiem_top { position: relative; }
.autocomplete-suggestions { top: calc(100% + 6px); max-height: 390px; border: 1px solid #d7dfed; border-radius: 10px; box-shadow: 0 14px 34px rgba(20, 42, 94, .18); }
.autocomplete-suggestions .list { padding: 6px; }
.autocomplete-suggestions .list > a, .autocomplete-suggestions .list > div > a { min-height: 62px; padding: 8px; display: flex; align-items: center; gap: 11px; color: var(--ink); border: 0; border-radius: 7px; }
.autocomplete-suggestions .list > a:hover, .autocomplete-suggestions .list > div > a:hover { background: var(--brand-soft); color: var(--brand); }
.autocomplete-suggestions img { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; border: 1px solid #edf0f5; border-radius: 6px; }
.autocomplete-suggestions h3, .autocomplete-suggestions h4, .autocomplete-suggestions strong { margin: 0; color: inherit; font-size: 13px; line-height: 1.42; }
.autocomplete-suggestions p, .autocomplete-suggestions span { margin: 2px 0 0; color: var(--danger); font-size: 12px; }
@media (max-width: 767px) { .hp-header-b2b { display: none; } .hp-mega-panel { display: none; } .hp-b2b-hero { padding: 24px 14px; } .hp-b2b-hero h2 { font-size: 22px; } .hp-b2b-card { padding: 20px 16px; } .autocomplete-suggestions { top: calc(100% + 4px); max-height: 55vh; border-radius: 8px; } }
.hp-chat-fab { right: 20px; bottom: 24px; width: auto; min-width: 56px; padding: 0 17px; gap: 9px; color: #fff; border-radius: 30px; font-size: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.hp-chat-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.hp-chat-fab-zalo img { width: 27px; height: 27px; }
.hp-chat-fab-facebook { bottom: 92px; background: #1677f2; }
.hp-chat-fab-facebook i { font-size: 24px; }
@media (max-width: 767px) { .hp-chat-fab { right: 12px; bottom: 70px; min-width: 48px; width: 48px; height: 48px; padding: 0; justify-content: center; } .hp-chat-fab span { display: none; } .hp-chat-fab-zalo img { width: 25px; height: 25px; } .hp-chat-fab-facebook { bottom: 126px; } }
.hp-b2b-nav .menu_top_right { background: rgba(255, 208, 106, .13); color: #fff; font-weight: 800; }
.hp-b2b-nav .menu_top_right i { color: #ffd06a; }
.hp-b2b-card { max-width: 720px !important; margin: 0 auto 24px !important; }
.hp-b2b-card::before { content: 'Dành cho doanh nghiệp, trường học và dự án'; display: block; margin: -4px 0 18px; color: var(--muted); font-size: 14px; }
.hp-b2b-intro { padding: 14px; background: #f5f8fe; border: 1px solid #e3eaf7; border-radius: 10px; }
.hp-b2b-hero { padding: 0; background: transparent; color: inherit; }
@media (max-width: 767px) { .hp-b2b-nav { display: none; } .hp-b2b-card { max-width: none !important; } }

/* 2026-09-17: "added to cart" feedback - replaces the blocking alert() with a
   toast + a short bounce on the cart icon so people get useful confirmation
   without a native popup interrupting them mid-browse. */
.hp-cart-toast {
  position: fixed;
  z-index: 1200;
  /* left, not right: the Zalo/Facebook chat FABs already own the bottom-right
     corner (see project_demohtt_social_chat_buttons) and would sit on top of
     this. */
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
  border: 1px solid var(--line);
  transform: translateY(16px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.hp-cart-toast.hp-toast-show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.hp-cart-toast-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #e9f9ee; color: #1a9c4a; display: grid; place-items: center; font-size: 16px; }
.hp-cart-toast-body { min-width: 0; }
.hp-cart-toast-title { font-weight: 600; color: var(--ink); font-size: 14px; line-height: 1.3; }
.hp-cart-toast-name { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cart-toast-view { flex: none; font-size: 12.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
@media (max-width: 767px) {
  .hp-cart-toast { left: 12px; right: 12px; bottom: 70px; max-width: none; }
}
@keyframes hpCartBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.28); }
  55% { transform: scale(.92); }
  75% { transform: scale(1.08); }
}
#hp-cart-icon-desktop.hp-cart-bounce i,
#hp-cart-icon-mobile.hp-cart-bounce i { animation: hpCartBounce .5s ease; display: inline-block; }
@keyframes hpCartBadgePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
#hp-cart-badge-desktop.hp-cart-bounce,
#hp-cart-badge-mobile.hp-cart-bounce { animation: hpCartBadgePop .4s ease; }

/* Wide screens (>=1700px): container 1620px like anphatpc, 5 products per row, side rails moved outside the wider container */
@media (min-width: 1700px) {
  :root { --container: 1620px; }
  .box_pro_home .pro_id_page, .products_list #load_search { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hp-side-rail { display: none; }
}
@media (min-width: 1960px) {
  .hp-side-rail { display: block; width: 150px; height: 500px; }
  .hp-side-rail-left { left: calc(50% - 968px); }
  .hp-side-rail-right { right: calc(50% - 968px); }
}

/* Top utility links bar (Giới thiệu/Tin tức/Dịch vụ/Liên hệ), desktop only */
.hp-topbar { background: var(--ink); }
.hp-topbar .pagewrap { display: flex; align-items: center; justify-content: center; height: 30px; }
.hp-topbar ul { display: flex; align-items: center; gap: 18px; }
.hp-topbar li { position: relative; }
.hp-topbar li + li { padding-left: 18px; }
.hp-topbar li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255, 255, 255, .15); }
.hp-topbar a { color: #b9c0d6; font-size: 12px; }
.hp-topbar a:hover { color: var(--accent); }
@media (max-width: 767px) {
  .hp-topbar { display: none; }
}

/* 2026-09-22: "Chọn linh kiện" build-PC modal (/cau-hinh-may-tinh, popup_buildpc
   AJAX response) — never migrated off the pre-redesign style.css, which is no
   longer loaded on this page, so it rendered fully unstyled. Outer box
   (.indeeep.build-pc) already has the shared modal chrome above; this styles
   the content inside it only. */
/* 2026-09-22 (tiếp): riêng modal build-PC to gần full trang (nhiều bộ lọc +
   lưới sản phẩm nên cần rộng hơn hẳn modal login/đăng ký dùng chung .indeeep) —
   chỉ override cho .indeeep.build-pc, không đụng .indeeep của các modal khác. */
.indeeep.build-pc { width: min(96vw, 1440px); max-height: calc(100vh - 24px); }
.popup-select .header { position: relative; padding-bottom: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.popup-select .header h4 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 800; white-space: nowrap; }
.popup-select .header form { flex: 1; position: relative; display: flex; }
.input-search { flex: 1; height: 38px; padding: 0 40px 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--text); }
.input-search:focus { outline: none; border-color: var(--brand); }
.btn-search { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); cursor: pointer; }
.icon-menu-filter-mobile, .icon_mb, .icon_sort_mb { display: none; }
.close-popup { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.close-popup:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

.popup-main { display: flex; align-items: flex-start; gap: 22px; }
.popup-main_filter { flex: 0 0 220px; min-width: 0; }
.popup-main_content { flex: 1; min-width: 0; }
.popup-main_filter > h4 { margin: 0 0 10px; color: var(--ink); font-size: 13px; font-weight: 800; }
.gr-filter { margin-bottom: 16px; }
.title-filter { margin: 0 0 8px; color: var(--ink); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.gr-filter ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.filter-item a { display: inline-flex; padding: 6px 10px; color: var(--text); background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.filter-item a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.filter-item.active a { color: #fff; background: var(--brand); border-color: var(--brand); }
.filter-item .value-filter { margin: 0; }
.filter-item .icon_remove { margin-left: 6px; cursor: pointer; }

.sort-paging { margin-bottom: 14px; }
.sort-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.list-sort { display: flex; flex-wrap: wrap; gap: 6px; }
.classsort { padding: 6px 10px; color: var(--text); background: var(--canvas); border-radius: 7px; font-size: 12.5px; text-decoration: none; }
.classsort.active, .classsort:hover { color: #fff; background: var(--brand); }

#load_search { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.p-item { display: flex; flex-direction: column; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .15s ease, transform .15s ease; }
.p-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.p-img { display: block; height: 140px; margin-bottom: 8px; }
.p-img img { width: 100%; height: 100%; object-fit: contain; }
.p-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.4; }
.p-item table { width: 100%; margin-bottom: 6px; border-collapse: collapse; font-size: 11.5px; color: var(--muted); }
.p-item table td { padding: 1px 0; }
.p-price { display: block; margin-top: auto; color: var(--danger); font-size: 15px; font-weight: 800; }
.btn-buy { margin-top: 8px; min-height: 36px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; background: linear-gradient(135deg, var(--brand), #2445a8); border-radius: 7px; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .18s ease; }
.btn-buy:hover { background: linear-gradient(135deg, #f58220, #e66700); }
#loadmore_page { min-height: 38px; padding: 0 18px; display: inline-flex; align-items: center; color: var(--brand); background: #fff; border: 1px solid #b9c8f9; border-radius: 8px; font-size: 13px; font-weight: 800; text-decoration: none; }
#loadmore_page:hover { color: #fff; background: var(--brand); }

@media (max-width: 767px) {
  .popup-main { flex-direction: column; gap: 14px; }
  .popup-main_filter { flex: 1 1 auto; width: 100%; }
  #load_search { grid-template-columns: 1fr; }
}

/* 2026-09-23: "Bai viet lien quan" (.news_other .tintuc_page_id, dung chung
   9 template tin tuc/noi dung phu: 3/8/10/13/14/17/20.php+*a.php) chua co CSS
   trong hp-clean.css - trang chi load DUY NHAT file nay (khong con style.css/
   hp-theme.css), nen list render moc, khong grid/anh/khoang cach. */
.news_other { background: none; padding: 0 15px 30px; margin-top: 6px; }
.news_other .pagewrap { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.news_other .titBox { padding: 0 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tintuc_page_id { display: flex; flex-wrap: wrap; gap: 16px; }
.tintuc_page_id ul { width: calc(33.333% - 11px); margin: 0; }
.tintuc_page_id ul li { height: auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); }
.tintuc_page_id ul li img { width: 100%; height: 100%; object-fit: cover; }
.tintuc_page_id ul h4 { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; text-transform: none; }
.tintuc_page_id ul h3 { margin: 4px 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.tintuc_page_id ul h3 a { color: var(--ink); }
.tintuc_page_id ul h3 a:hover { color: var(--brand); }
.tintuc_page_id ul p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 767px) {
  .tintuc_page_id ul { width: 100%; }
}

/* 2026-09-23: shared page refinements — B2B, contact, account centre and support. */
.title_page_news { margin: 18px 0; padding: 18px 0; }
.title_page_news h1 { margin: 0; }

/* A shared section heading for modules which formerly inherited no current CSS. */
.tit_2 { position: relative; margin: 0; padding: 0 0 11px 15px; color: var(--ink); font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.2px; }
.tit_2::before { position: absolute; top: 2px; bottom: 12px; left: 0; width: 5px; content: ''; background: linear-gradient(180deg, var(--brand), var(--accent)); border-radius: 6px; }
.tit_2::after { position: absolute; right: 0; bottom: 0; left: 15px; height: 1px; content: ''; background: var(--line); }

/* Support popover in the blue navigation. */
.suport-hover { top: 42px; right: -4px; width: 380px; max-height: min(390px, calc(100vh - 110px)); padding: 12px; overflow-y: auto; color: var(--text); border: 1px solid #dce4f2; border-radius: 12px; box-shadow: 0 18px 42px rgba(16, 24, 40, .2); scrollbar-width: thin; }
.suport-hover::before { position: absolute; top: -7px; right: 42px; width: 12px; height: 12px; content: ''; background: #fff; border-top: 1px solid #dce4f2; border-left: 1px solid #dce4f2; transform: rotate(45deg); }
.suport-hover > ul { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.suport-hover > ul > li:last-child { grid-column: 1 / -1; }
.suport-hover > ul > li { padding: 10px; background: #f8faff; border: 1px solid #edf1f7; border-radius: 9px; }
.suport-hover h3 { margin: 0 0 7px; padding: 0 0 6px; color: var(--brand-dark); border-bottom: 1px solid #dde6f4; font-size: 11px; font-weight: 800; letter-spacing: .45px; }
.suport-hover .box_zalo { min-height: 36px; gap: 10px; padding: 4px 0; }
.suport-hover .box_zalo + .box_zalo { border-top: 1px dashed #dce4f2; }
.suport-hover .icon_zalo a { width: 28px; height: 28px; display: grid; place-items: center; background: #fff; border: 1px solid #dce4f2; border-radius: 8px; }
.suport-hover .box_zalo img { width: 20px; height: 20px; border-radius: 0; }
.suport-hover .name { min-width: 0; flex: 1; }
.suport-hover .name a { display: block; overflow: hidden; color: var(--text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.suport-hover .name a:hover { color: var(--brand); }

/* Uniform Facebook and Zalo controls at every viewport. */
.hp-chat-fab { right: 20px; bottom: 24px; width: 160px; min-width: 160px; height: 54px; padding: 0 16px; justify-content: flex-start; gap: 10px; border: 1px solid rgba(255, 255, 255, .28); }
.hp-chat-fab-facebook { bottom: 88px; }
.hp-chat-fab > span { display: block; }
.hp-chat-fab-zalo { background: #0068ff; }
.hp-chat-fab-zalo img { width: 27px; height: 27px; flex: 0 0 27px; }

/* Requested layer: rails stay above the page but below the chat controls. */
.hp-side-rail { z-index: 51; }

/* Business quotation: content and AJAX field names/endpoint remain unchanged. */
.hp-b2b-page { margin-bottom: 28px; }
.hp-b2b-page .page_conten_page { padding-top: 0; }
.hp-b2b-hero { padding: 44px 0 96px; background: radial-gradient(circle at 85% 0, #3e77d5 0, rgba(62, 119, 213, 0) 34%), linear-gradient(125deg, #10255f, #244fac); color: #fff; }
.hp-b2b-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; color: #ffd36b; font-size: 12px; font-weight: 800; letter-spacing: .8px; }
.hp-b2b-hero h1 { max-width: 720px; margin: 0 0 12px; color: #fff; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.14; letter-spacing: -.8px; }
.hp-b2b-hero p { max-width: 690px; margin: 0; color: #e1ebff; font-size: 16px; line-height: 1.65; }
.hp-b2b-benefits { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.hp-b2b-benefits li { padding: 8px 11px; color: #f2f6ff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; font-size: 12px; font-weight: 700; }
.hp-b2b-benefits i { margin-right: 4px; color: #ffd36b; }
.hp-b2b-layout { position: relative; z-index: 1; margin-top: -58px; display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.hp-b2b-aside, .hp-b2b-card { background: #fff; border: 1px solid #e1e8f5; border-radius: 16px; box-shadow: 0 18px 42px rgba(16, 37, 95, .13); }
.hp-b2b-aside { padding: 26px; }
.hp-b2b-aside-icon { width: 44px; height: 44px; margin-bottom: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 12px; font-size: 19px; }
.hp-b2b-aside h2 { margin: 0 0 9px; color: var(--ink); font-size: 18px; line-height: 1.35; }
.hp-b2b-aside p { margin: 0 0 17px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hp-b2b-aside li { padding: 7px 0; color: var(--text); border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.hp-b2b-aside i { width: 17px; color: #1fa463; }
.hp-b2b-card { max-width: none !important; margin: 0 !important; padding: 28px; }
.hp-b2b-card::before { display: none; }
.hp-b2b-card .hp-b2b-intro { margin-bottom: 20px; padding: 0 0 18px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.hp-b2b-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.hp-b2b-form .form-group { margin-bottom: 14px !important; }
.hp-b2b-form .form-group:nth-child(3), .hp-b2b-form .form-group:nth-child(7), .hp-b2b-form #bg_alert, .hp-b2b-form #bg_submit_btn { grid-column: 1 / -1; }
.hp-b2b-card #bg_submit_btn { width: auto; min-width: 210px; justify-self: start; padding: 0 22px; color: #fff; background: linear-gradient(135deg, var(--accent), #e55d0a); box-shadow: 0 8px 18px rgba(229, 93, 10, .22); }

/* Contact: preserve the legacy form validation while supplying the missing layout. */
.pageconten_load > .company_contact { margin-top: 16px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pageconten_load > .company_contact > *:last-child { margin-bottom: 0; }
.pageconten_load > .company_contact p, .pageconten_load > .company_contact li { color: var(--text); line-height: 1.7; }
.pageconten_load > .company_contact h2, .pageconten_load > .company_contact h3 { color: var(--ink); line-height: 1.35; }
.pageconten_load > .company_contact + .padding_pagewrap { margin-top: 16px; padding: 0; background: transparent; }
.pageconten_load .contact { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pageconten_load .contact form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pageconten_load .contact .left, .pageconten_load .contact .right { min-width: 0; float: none; width: auto; }
.pageconten_load .contact li { margin: 0 0 12px; list-style: none; }
.pageconten_load .contact input, .pageconten_load .contact textarea { color: var(--text); background: #fff; border-color: #d7dfed; }
.pageconten_load .contact textarea { min-height: 154px; resize: vertical; }
.pageconten_load .contact input:focus, .pageconten_load .contact textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(49, 87, 213, .12); }
.pageconten_load .contact .code { display: flex; align-items: center; gap: 8px; }
.pageconten_load .contact .code input { flex: 1; }
.pageconten_load .contact .code span { min-width: 92px; padding: 8px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 7px; font-weight: 800; letter-spacing: 2px; text-align: center; }
.pageconten_load .contact .button { min-height: 42px; margin: 0 8px 0 0; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: #fff; border: 1px solid #b9c8f9; border-radius: 7px; font-size: 13px; font-weight: 800; }
.pageconten_load .contact .button:last-of-type { color: #fff; background: var(--brand); border-color: var(--brand); }
.map_contact { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.map_contact iframe { width: 100%; min-height: 380px; border: 0; }

/* Member centre: the old templates share this one shell, so all six pages stay consistent. */
.hp-member-page { margin-top: 24px; margin-bottom: 28px; }
.hp-member-page > .title_page { margin-bottom: 16px; padding: 19px 22px; background: linear-gradient(125deg, #173578, #3157d5); border-radius: 13px; box-shadow: 0 10px 24px rgba(35, 65, 150, .18); }
.hp-member-page > .title_page h3 { margin: 0; color: #fff; font-size: 21px; font-weight: 800; }
.hp-member-page > .padding_pagewrap { padding: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 18px; background: transparent; }
.hp-member-page .left_member, .hp-member-page .right_member { float: none; width: auto; }
.hp-member-page .left_member { padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.hp-member-page .left_member li { margin: 0; }
.hp-member-page .left_member a { min-height: 42px; padding: 0 12px; display: flex; align-items: center; color: var(--text); border-radius: 7px; font-size: 13px; font-weight: 700; }
.hp-member-page .left_member li.active a { color: var(--brand); background: var(--brand-soft); }
.hp-member-page .left_member a:hover { color: var(--brand); background: #f5f7ff; }
.hp-member-page .left_member .btn_logout { margin-top: 7px; color: var(--danger); background: #fff6f6; }
.hp-member-page .right_member { min-width: 0; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.hp-member-page .form_personal { max-width: 760px; }
.hp-member-page .form_personal .form-group { margin: 0 0 15px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 12px; }
.hp-member-page .form_personal .control-label, .hp-member-page .form_personal [class*="col-xs-"] { width: auto; min-height: 0; padding: 0; float: none; }
.hp-member-page .form_personal .control-label { padding-top: 11px; color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; }
.hp-member-page .form_personal .form-control { min-height: 42px; border-color: #d7dfed; box-shadow: none; }
.hp-member-page .form_personal .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(49, 87, 213, .12); }
.hp-member-page .form_personal .list-inline { display: flex; gap: 16px; padding-top: 9px; }
.hp-member-page .form_personal .option-reg { margin: 0; }
.hp-member-page .form_personal .error { padding-top: 4px; color: var(--danger); font-size: 12px; line-height: 1.4; }
.hp-member-page .btn-register { width: auto; margin: 0 0 0 162px; padding: 0; float: none; }
.hp-member-page .btn-register .btn { min-width: 134px; min-height: 42px; padding: 0 18px; color: #fff; background: var(--brand); border: 0; border-radius: 7px; font-size: 13px; font-weight: 800; }
.hp-member-page .overflow_auto { overflow-x: auto; }
.hp-member-page .table { width: 100%; min-width: 660px; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.hp-member-page .table #head, .hp-member-page .table #tbody .tr { display: grid; grid-template-columns: 58px 1.15fr 1.35fr 1.15fr 125px; align-items: center; }
.hp-member-page .table #head { color: #475467; background: #f5f7fb; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.hp-member-page .table .th, .hp-member-page .table .td { min-width: 0; padding: 13px 12px; border-bottom: 1px solid var(--line); line-height: 1.4; }
.hp-member-page .table #tbody .tr:last-child .td { border-bottom: 0; }
.hp-member-page .table #tbody .tr:hover { background: #fafbff; }
.hp-member-page .table h4 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.hp-member-page .table b { color: var(--brand); font-size: 12px; }
.hp-member-page .table .btn_view { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: var(--brand-soft); border-radius: 6px; font-size: 12px; font-weight: 800; }
.hp-member-page .table_ds_donhang_aff #head, .hp-member-page .table_ds_donhang_aff #tbody .tr, .hp-member-page .table_ds_buildpc #head, .hp-member-page .table_ds_buildpc #tbody .tr, .hp-member-page .table_ds_doiqua #head, .hp-member-page .table_ds_doiqua #tbody .tr { grid-template-columns: 1.15fr 1.15fr 1fr 1.15fr; }

/* Order detail shares the member shell, with an information ledger and a four-column product table. */
.hp-order-detail-page .xemdonhang { max-width: 980px; }
.hp-order-detail-page .xemdonhang > h3 { margin: 0 0 12px; padding: 0 0 10px; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 800; }
.hp-order-detail-page .xemdonhang > h3::before { width: 4px; height: 18px; margin-right: 8px; display: inline-block; vertical-align: -3px; content: ''; background: linear-gradient(180deg, var(--brand), var(--accent)); border-radius: 5px; }
.hp-order-detail-page .xemdonhang > .form-group { min-height: 45px; margin: 0; padding: 10px 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; border-bottom: 1px solid #edf0f5; }
.hp-order-detail-page .xemdonhang .first_col { padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.hp-order-detail-page .xemdonhang .col-md { min-width: 0; color: var(--ink); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.hp-order-detail-page .xemdonhang .ln_solid { margin: 22px 0; height: 1px; background: var(--line); }
.hp-order-detail-page .table_ds_spbuild #head, .hp-order-detail-page .table_ds_spbuild #tbody .tr { grid-template-columns: .85fr minmax(220px, 2.15fr) .75fr 1fr; }
.hp-order-detail-page .table_ds_spbuild .a_link { color: var(--ink); font-weight: 700; line-height: 1.45; }
.hp-order-detail-page .table_ds_spbuild .a_link:hover { color: var(--brand); }
.hp-order-detail-page .xemdonhang > .form-group.giatong { grid-template-columns: 1fr auto; padding: 13px 14px; background: #f8faff; border: 0; }
.hp-order-detail-page .xemdonhang > .form-group.giatong + .giatong { margin-top: 2px; }
.hp-order-detail-page .xemdonhang .col-giatong { color: var(--ink); font-size: 14px; font-weight: 800; }
.hp-order-detail-page .xemdonhang > .form-group.giatong:last-child { margin-top: 8px; color: #fff; background: linear-gradient(135deg, #173578, #3157d5); border-radius: 8px; }
.hp-order-detail-page .xemdonhang > .form-group.giatong:last-child .first_col, .hp-order-detail-page .xemdonhang > .form-group.giatong:last-child .col-giatong { color: #fff; }

/* Gift redemption landing page: its legacy blocks now share the storefront visual system. */
.hp-gift-page { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 18px; align-items: start; }
.hp-gift-page > .linn_page, .hp-gift-page > .padding_pagewrap { grid-column: 1 / -1; }
.hp-gift-page > .padding_pagewrap { margin: 0; padding: 0; background: transparent; }
.hp-gift-page > .padding_pagewrap .title_page { padding: 0; }
.hp-gift-page > .padding_pagewrap .title_page h2 { margin: 0; color: var(--ink); font-size: 25px; font-weight: 800; }
.hp-gift-page .left_conten, .hp-gift-page .right_conten { width: auto; float: none; }
.hp-gift-page #box_icon_quatang { min-height: 232px; margin: 0 0 16px; padding: 26px 30px; display: flex; align-items: center; gap: 28px; overflow: hidden; background: radial-gradient(circle at 94% 8%, rgba(255, 204, 79, .45), rgba(255, 204, 79, 0) 34%), linear-gradient(125deg, #15357d, #3157d5); border: 0; border-radius: 15px; box-shadow: 0 16px 36px rgba(28, 61, 145, .2); }
.hp-gift-page #icon_quatang { flex: 0 0 260px; width: 260px; align-self: flex-end; }
.hp-gift-page #icon_quatang img { width: 100%; max-height: 190px; object-fit: contain; }
.hp-gift-page #title_quatang { min-width: 0; }
.hp-gift-page #title_quatang .title_quatang_bg { display: block; color: #fff; }
.hp-gift-page #title_quatang h3 { max-width: 470px; margin: 0; color: #fff; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.45px; }
.hp-gift-page #title_quatang h3::before { margin-bottom: 12px; display: block; color: #ffd66d; content: 'HTT+ REWARDS'; font-size: 12px; letter-spacing: 1px; }
.hp-gift-page #box_text_quatang { margin: 0 0 16px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.hp-gift-page .title_box_text_quatang { margin: 0 0 10px; padding: 0 0 9px; border-bottom: 1px solid var(--line); }
.hp-gift-page .title_box_text_quatang h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 800; }
.hp-gift-page .title_box_text_quatang h3::before { width: 4px; height: 18px; margin-right: 8px; display: inline-block; vertical-align: -3px; content: ''; background: linear-gradient(180deg, var(--brand), var(--accent)); border-radius: 5px; }
.hp-gift-page #box_text_quatang .showText { margin: 0 0 20px; padding: 15px 17px; background: #f8faff; border: 1px solid #e5ecf8; border-radius: 9px; box-shadow: none; }
.hp-gift-page #box_text_quatang .showText:last-child { margin-bottom: 0; }
.hp-gift-page #box_text_quatang .showText p, .hp-gift-page #box_text_quatang .showText li { color: var(--text); font-size: 14px; line-height: 1.65; }
.hp-gift-page #page_gift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.hp-gift-page #page_gift > ul { min-width: 0; margin: 0; padding: 12px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.hp-gift-page #page_gift > ul:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.hp-gift-page #page_gift > ul > li { height: 150px; margin-bottom: 9px; display: block; overflow: hidden; }
.hp-gift-page #page_gift > ul > li img { width: 100%; height: 100%; object-fit: contain; }
.hp-gift-page #page_gift > ul h3 { min-height: 39px; margin: 0 0 5px; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.45; }
.hp-gift-page #page_gift > ul h3 a:hover { color: var(--brand); }
.hp-gift-page #page_gift > ul h4 { margin: auto 0 4px; color: var(--accent); font-size: 14px; font-weight: 800; }
.hp-gift-page #page_gift > ul p { margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hp-gift-page .right_conten { position: sticky; top: 12px; }
.hp-gift-page .box_right_conten { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.hp-gift-page .box_right_conten > h2 { margin: 0 0 10px; padding-bottom: 10px; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 800; text-transform: none; }
.hp-gift-page .sp_right { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hp-gift-page .sp_right:last-child { border-bottom: 0; }
.hp-gift-page .sp_right > a { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; }
.hp-gift-page .sp_right > a > li { width: 58px; height: 58px; overflow: hidden; list-style: none; }
.hp-gift-page .sp_right > a > li img { width: 100%; height: 100%; object-fit: contain; }
.hp-gift-page .sp_right > a > ul { min-width: 0; }
.hp-gift-page .sp_right h3 { margin: 0 0 3px; overflow: hidden; color: var(--ink); font-size: 12px; line-height: 1.4; }
.hp-gift-page .sp_right h4 { margin: 0; color: var(--danger); font-size: 12px; }

@media (max-width: 767px) {
  .title_page_news { margin: 15px 0; padding: 15px 0; }
  .title_page_news h1 { font-size: 23px; }
  .tit_2 { font-size: 19px; }
  .suport-hover { display: none !important; }
  .hp-chat-fab { right: 12px; bottom: 70px; width: 48px; min-width: 48px; height: 48px; padding: 0; justify-content: center; gap: 0; }
  .hp-chat-fab-facebook { bottom: 126px; }
  .hp-chat-fab > span { display: none; }
  .hp-b2b-hero { padding: 30px 0 76px; }
  .hp-b2b-hero h1 { font-size: 28px; }
  .hp-b2b-hero p { font-size: 14px; }
  .hp-b2b-benefits { display: grid; gap: 7px; }
  .hp-b2b-benefits li { padding: 7px 9px; font-size: 11px; }
  .hp-b2b-layout { margin-top: -42px; grid-template-columns: 1fr; gap: 14px; }
  .hp-b2b-aside { padding: 20px; }
  .hp-b2b-card { padding: 20px 16px; }
  .hp-b2b-form { grid-template-columns: 1fr; }
  .hp-b2b-form .form-group:nth-child(3), .hp-b2b-form .form-group:nth-child(7), .hp-b2b-form #bg_alert, .hp-b2b-form #bg_submit_btn { grid-column: auto; }
  .hp-b2b-card #bg_submit_btn { width: 100%; }
  .pageconten_load > .company_contact, .pageconten_load .contact { padding: 18px 14px; }
  .pageconten_load .contact form { grid-template-columns: 1fr; }
  .pageconten_load .contact .right { margin-top: 0; }
  .pageconten_load .contact textarea { min-height: 120px; }
  .pageconten_load .contact .button { width: calc(50% - 6px); margin-right: 7px; padding: 0 8px; }
  .pageconten_load .contact .button:last-of-type { margin-right: 0; }
  .map_contact iframe { min-height: 290px; }
  .hp-member-page { margin-top: 16px; }
  .hp-member-page > .title_page { margin-bottom: 12px; padding: 16px; border-radius: 10px; }
  .hp-member-page > .title_page h3 { font-size: 18px; }
  .hp-member-page > .padding_pagewrap { grid-template-columns: 1fr; gap: 12px; }
  .hp-member-page .left_member ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .hp-member-page .left_member a { min-height: 38px; padding: 7px 9px; font-size: 11px; line-height: 1.3; }
  .hp-member-page .left_member .btn_logout { margin-top: 0; }
  .hp-member-page .right_member { padding: 18px 14px; }
  .hp-member-page .form_personal .form-group { grid-template-columns: 1fr; gap: 5px; }
  .hp-member-page .form_personal .control-label { padding-top: 0; }
  .hp-member-page .btn-register { margin-left: 0; }
  .hp-member-page .table { min-width: 590px; }
  .hp-order-detail-page .xemdonhang > .form-group { grid-template-columns: 1fr; gap: 4px; }
  .hp-order-detail-page .xemdonhang > .form-group.giatong { grid-template-columns: 1fr auto; }
  .hp-b2b-hero .pagewrap { padding-inline: 16px; }
  .hp-b2b-hero h1, .hp-b2b-hero p { overflow-wrap: anywhere; }
  .hp-gift-page { display: block; }
  .hp-gift-page > .padding_pagewrap .title_page { padding: 0 12px; }
  .hp-gift-page > .padding_pagewrap .title_page h2 { font-size: 21px; }
  .hp-gift-page #box_icon_quatang { min-height: 0; margin: 0 0 12px; padding: 21px 16px; display: block; border-radius: 0; }
  .hp-gift-page #icon_quatang { width: 150px; margin: 0 auto 13px; }
  .hp-gift-page #icon_quatang img { max-height: 112px; }
  .hp-gift-page #title_quatang { text-align: center; }
  .hp-gift-page #title_quatang h3 { font-size: 23px; }
  .hp-gift-page #title_quatang h3::before { margin-bottom: 8px; }
  .hp-gift-page #box_text_quatang { margin: 0 10px 12px; padding: 16px 12px; }
  .hp-gift-page #box_text_quatang .showText { padding: 12px; }
  .hp-gift-page #page_gift { padding: 0 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hp-gift-page #page_gift > ul { padding: 9px; }
  .hp-gift-page #page_gift > ul > li { height: 120px; }
  .hp-gift-page .right_conten { margin: 12px 10px 0; position: static; }
}

/* Cart: keep the existing checkout submit/validation logic, but make the three
   stages readable as a product list, delivery form and payment summary. */
.hp-cart-page > .padding_pagewrap { padding: 0; background: transparent; }
.hp-cart-page #OrderForm { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: 18px; align-items: start; }
.hp-cart-page .right_giohang { grid-column: 1 / -1; margin: 0; padding: 22px; }
.hp-cart-page .left_giohang, .hp-cart-page .tt_giohang { margin: 0; padding: 22px; }
.hp-cart-page .right_giohang h2, .hp-cart-page .left_giohang h2, .hp-cart-page .tt_giohang h2 { margin: 0 0 16px; padding-bottom: 12px; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 800; }
.hp-cart-page .right_giohang h2::before, .hp-cart-page .left_giohang h2::before, .hp-cart-page .tt_giohang h2::before { width: 5px; height: 20px; margin: 0 9px 0 0; display: inline-block; vertical-align: -4px; content: ''; background: linear-gradient(180deg, var(--brand), var(--accent)); border-radius: 5px; }
.hp-cart-page .danhsachdoonhang > ul, .hp-cart-page .danhsachdoonhang > ul > li, .hp-cart-page .btn-cart, .hp-cart-page .btn-cart > li, .hp-cart-page .tt_giohang > ul, .hp-cart-page .tt_giohang > ul > li { margin: 0; padding: 0; list-style: none; }
.hp-cart-page .danhsachdoonhang > ul { min-height: 98px; padding: 12px 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) 78px 130px 34px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.hp-cart-page .danhsachdoonhang > ul:first-child { padding-top: 0; }
.hp-cart-page .danhsachdoonhang .img { width: 76px; height: 76px; margin: 0; }
.hp-cart-page .danhsachdoonhang h3 { min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; }
.hp-cart-page .danhsachdoonhang h3 a { display: -webkit-box; overflow: hidden; color: var(--ink); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hp-cart-page .danhsachdoonhang h3 a:hover { color: var(--brand); }
.hp-cart-page .danhsachdoonhang h3 p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.hp-cart-page .danhsachdoonhang h3 p b { color: var(--danger); font-size: 13px; }
.hp-cart-page .quanity_giohang { width: 78px; }
.hp-cart-page .quanity_giohang input { width: 100% !important; height: 38px !important; padding: 0 6px; color: var(--ink); background: #fff; border-color: #cfd9ed; text-align: center; }
.hp-cart-page .danhsachdoonhang h4 { min-width: 0; color: var(--danger); font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; }
.hp-cart-page .danhsachdoonhang > ul > li { width: 34px; height: 34px; display: grid; place-items: center; }
.hp-cart-page .danhsachdoonhang > ul > li a { width: 34px; height: 34px; display: grid; place-items: center; color: var(--danger); background: #fff4f4; border-radius: 7px; }
.hp-cart-page .danhsachdoonhang > ul > li a:hover { color: #fff; background: var(--danger); }
.hp-cart-page .makm { margin-top: 16px; padding: 12px; background: #f7f9fd; border: 1px dashed #c8d5ee; border-radius: 9px; }
.hp-cart-page .makm h3 { min-width: max-content; display: flex; align-items: center; color: var(--ink); font-size: 13px; }
.hp-cart-page .makm h3::before { margin-right: 7px; color: var(--accent); content: '\\f02b'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.hp-cart-page .makm input { min-width: 0; background: #fff; }
.hp-cart-page .makm a { min-height: 40px; justify-content: center; font-size: 13px; font-weight: 800; }
.hp-cart-page .total-cart { margin-top: 14px; padding: 6px 14px; background: #fbfcff; border: 1px solid var(--line); border-radius: 9px; }
.hp-cart-page .total-cart ul { padding: 11px 0; align-items: center; border-bottom: 1px solid var(--line); }
.hp-cart-page .total-cart ul:last-child { border-bottom: 0; }
.hp-cart-page .total-cart h3 { color: var(--text); font-size: 13px; font-weight: 600; }
.hp-cart-page .total-cart h4 { color: var(--ink); font-size: 14px; font-weight: 800; }
.hp-cart-page .total-cart ul:last-child { margin: 0 -14px -6px; padding: 13px 14px; background: #edf2ff; border-radius: 0 0 9px 9px; }
.hp-cart-page .total-cart ul:last-child h3 { color: var(--brand-dark); font-size: 14px; font-weight: 800; }
.hp-cart-page .total-cart ul:last-child h4 { font-size: 20px; }
.hp-cart-page .left_giohang .contact { padding: 0; background: transparent; border: 0; box-shadow: none; }
.hp-cart-page .left_giohang .row-frm { width: 100%; margin: 0 0 12px; padding: 0; float: none; }
.hp-cart-page .left_giohang .form-control { min-height: 44px; border-color: #d7dfed; box-shadow: none; }
.hp-cart-page .left_giohang textarea.form-control { min-height: 116px; resize: vertical; }
.hp-cart-page .left_giohang .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(49, 87, 213, .12); }
.hp-cart-page .tt_giohang > ul { display: grid; gap: 9px; }
.hp-cart-page .payment_method_input { margin: 0; padding: 13px; background: #fff; border-color: #dce4f2; transition: border-color .18s ease, box-shadow .18s ease; }
.hp-cart-page .payment_method_input:has(input:checked) { border-color: #97afea; box-shadow: 0 0 0 3px rgba(49, 87, 213, .09); }
.hp-cart-page .payment_method_input label { color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.hp-cart-page .payment_method_input input { accent-color: var(--brand); }
.hp-cart-page .txt_payment { flex: 1; }
.hp-cart-page .payIds { color: var(--muted); font-size: 12px; line-height: 1.55; }
.hp-cart-page .btn-cart { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.hp-cart-page .btn-cart > li { display: block; }
.hp-cart-page .btn-cart li a { min-height: 44px; padding: 0 20px; justify-content: center; font-size: 13px; font-weight: 800; }
.hp-cart-page .btn-cart li:first-child a { background: linear-gradient(135deg, var(--accent), #e55d0a); box-shadow: 0 8px 18px rgba(229, 93, 10, .2); }
.hp-cart-page .btn-cart li:last-child a { color: var(--brand); background: #fff; border: 1px solid #b9c8f9; }
.hp-cart-page .hp-empty-cart { max-width: 520px; margin: 38px auto 54px; padding: 52px 28px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.hp-cart-page .hp-empty-cart i { width: 76px; height: 76px; margin: 0 auto 18px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 50%; font-size: 31px; }
.hp-cart-page .hp-empty-cart p { margin: 0 0 18px; color: var(--ink); font-size: 16px; font-weight: 700; }
.hp-cart-page .hp-empty-cart-btn { min-height: 42px; align-items: center; border-radius: 7px; font-size: 13px; font-weight: 800; }

/* Product listing filters: preserve the existing Search_products() controls,
   while presenting their many options as a compact, scannable filter card. */
.page_conten > .product-filter-container {
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce4f2;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(27, 53, 117, .07);
}
.page_conten > .product-filter-container::before {
  min-height: 48px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  content: '\f0b0  Bộ lọc sản phẩm';
  background: linear-gradient(115deg, #173578, #3157d5);
  font-family: 'Font Awesome 5 Free', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1px;
}
.page_conten > .product-filter-container .row-filter {
  min-height: 0;
  padding: 13px 16px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  border-bottom-color: #edf1f7;
}
.page_conten > .product-filter-container .row-filter:hover { background: #fbfcff; }
.page_conten > .product-filter-container .row-filter .title-filter {
  min-height: 32px;
  margin: 0;
  display: flex;
  align-items: center;
  color: #273653;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.page_conten > .product-filter-container .row-filter .title-filter::before {
  width: 4px;
  height: 16px;
  margin-right: 7px;
  display: inline-block;
  content: '';
  background: var(--accent);
  border-radius: 4px;
}
.page_conten > .product-filter-container .row-filter .filter-list {
  min-height: 32px;
  padding: 0 32px 0 0;
  position: relative;
  gap: 7px;
  overflow: hidden;
}
.page_conten > .product-filter-container .row-filter .filter-list.show-filter { height: auto !important; }
.page_conten > .product-filter-container .row-filter .filter-item { margin: 0; }
.page_conten > .product-filter-container .row-filter .filter-item a {
  min-height: 32px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  color: #40506d;
  background: #f6f8fc;
  border: 1px solid #e0e7f2;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.page_conten > .product-filter-container .row-filter .filter-item:hover a {
  color: var(--brand);
  background: #edf3ff;
  border-color: #bcd0fc;
  transform: translateY(-1px);
}
.page_conten > .product-filter-container .row-filter .filter-item.active a {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 10px rgba(49, 87, 213, .18);
}
.page_conten > .product-filter-container .row-filter .filter-item .icon_remove {
  width: 17px;
  height: 17px;
  margin: 0 0 0 5px;
  display: inline-grid;
  place-items: center;
  color: inherit;
  background: rgba(255, 255, 255, .2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
}
.page_conten > .product-filter-container .row-filter .toggle-filter {
  width: 28px;
  height: 28px;
  padding: 0;
  position: absolute;
  right: 0;
  bottom: 2px;
  place-items: center;
  color: var(--brand);
  background: #edf3ff;
  border: 1px solid #d7e3fc;
  border-radius: 7px;
  font-size: 13px;
  transition: transform .16s ease, background-color .16s ease;
}
.page_conten > .product-filter-container .row-filter .toggle-filter:hover { background: #dce8ff; }
.page_conten > .product-filter-container .row-filter .toggle-filter.active { transform: rotate(180deg); }

/* Mega menu must remain a continuous hover target: the home-page category
   rail previously clipped its child panel and the fixed left offset could
   leave a hairline gap at some widths. */
.nav-main > li > .hp-mega-panel {
  z-index: 70;
  top: 0;
  left: 100%;
  width: min(960px, calc(100vw - 252px));
  min-height: 436px;
  max-height: min(720px, calc(100vh - 58px));
  margin-left: 0;
  padding: 20px 24px;
  overflow-y: auto;
  columns: 3;
  columns: 4;
  column-gap: 20px;
  background: linear-gradient(135deg, #fff 0%, #f8faff 100%);
  border: 1px solid #d5e1f4;
  border-left: 3px solid var(--brand);
  border-radius: 0 14px 14px 0;
  box-shadow: 14px 16px 35px rgba(21, 48, 112, .2);
}
.nav-main > li > .hp-mega-panel::before {
  width: 12px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 100%;
  content: '';
}
.nav-main > li:hover > .hp-mega-panel, .nav-main > li:focus-within > .hp-mega-panel { display: block; }
.nav-main > li > .hp-mega-panel .hp-mega-group { margin-bottom: 10px; }
.nav-main > li > .hp-mega-panel .hp-mega-brand {
  min-height: 0;
  padding: 7px 8px;
  color: #233455;
  background: rgba(255, 255, 255, .7);
  border-bottom: 1px solid #d9e4f3;
  border-radius: 6px 6px 0 0;
}
.nav-main > li > .hp-mega-panel .hp-mega-brand:hover { color: var(--brand); background: #eaf1ff; }
.nav-main > li > .hp-mega-panel .hp-mega-sub { padding: 3px 5px 7px 16px; background: rgba(255, 255, 255, .55); }
.nav-main > li > .hp-mega-panel .hp-mega-sub a { min-height: 0; padding: 5px 3px 5px 11px; }

@media (max-width: 1180px) and (min-width: 768px) {
  .nav-main > li > .hp-mega-panel { width: min(800px, calc(100vw - 230px)); columns: 3; }
}

@media (max-width: 767px) {
  .hp-cart-page #OrderForm { grid-template-columns: 1fr; gap: 12px; }
  .hp-cart-page .right_giohang, .hp-cart-page .left_giohang, .hp-cart-page .tt_giohang { padding: 17px 14px; }
  .hp-cart-page .right_giohang h2, .hp-cart-page .left_giohang h2, .hp-cart-page .tt_giohang h2 { font-size: 16px; }
  .hp-cart-page .danhsachdoonhang > ul { grid-template-columns: 64px minmax(0, 1fr) 34px; gap: 10px; }
  .hp-cart-page .danhsachdoonhang .img { width: 64px; height: 64px; }
  .hp-cart-page .quanity_giohang { grid-column: 2; grid-row: 2; width: 72px; }
  .hp-cart-page .danhsachdoonhang h4 { grid-column: 3; grid-row: 2; align-self: center; font-size: 13px; }
  .hp-cart-page .danhsachdoonhang > ul > li { grid-column: 3; grid-row: 1; }
  .hp-cart-page .makm { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .hp-cart-page .makm h3 { grid-column: 1 / -1; }
  .hp-cart-page .makm a { padding: 0 13px; }
  .hp-cart-page .btn-cart { grid-column: auto; flex-direction: column; }
  .hp-cart-page .btn-cart > li, .hp-cart-page .btn-cart li a { width: 100%; }
  .hp-cart-page .hp-empty-cart { margin: 20px 0 30px; padding: 38px 18px; }
  .page_conten > .product-filter-container { margin-inline: 10px; }
  .page_conten > .product-filter-container::before { min-height: 44px; padding-inline: 13px; }
  .page_conten > .product-filter-container .row-filter { padding: 12px 13px; grid-template-columns: 1fr; gap: 7px; }
  .page_conten > .product-filter-container .row-filter .title-filter { min-height: 0; }
  .page_conten > .product-filter-container .row-filter .filter-list { padding-right: 33px; }
}

/* 2026-09-24: tiêu đề khối "TOP SẢN PHẨM BÁN CHẠY" nổi bật hơn tiêu đề danh mục thường */
.hp-top-selling .tieude_page { min-height: 62px; background: linear-gradient(90deg, #c10707 0%, #ff7e00 100%); border-bottom: 0; border-radius: 8px 8px 0 0; }
.hp-top-selling .tieude_page > h3 { padding-left: 0; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 22px; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.hp-top-selling .tieude_page > h3::before { display: none; }
.hp-top-selling .tieude_page > h3 i { color: #ffe066; font-size: 24px; animation: hp-fire-pulse 1.6s ease-in-out infinite; }
@keyframes hp-fire-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .hp-top-selling .tieude_page > h3 i { animation: none; } }
@media (max-width: 767px) {
  .hp-top-selling .tieude_page { min-height: 52px; }
  .hp-top-selling .tieude_page > h3 { font-size: 16px; gap: 7px; }
  .hp-top-selling .tieude_page > h3 i { font-size: 18px; }
}

/* 2026-10-04: carousel san pham trang chu khoi tao luoi -> giu cho, khong render noi dung truoc khi Owl chay */
.hp-owl-products:not(.owl-loaded){display:block;height:380px;overflow:hidden;visibility:hidden;content-visibility:hidden;contain-intrinsic-size:auto 380px}