/*==========================================================================
    HongHa UI 2026 — hh-theme-2026.css
    Lớp tinh chỉnh giao diện, NẠP SAU CÙNG.

    NGUYÊN TẮC:
    - KHÔNG đổi bố cục: giữ nguyên thứ tự khối, số cột, vị trí từng mục.
      Chỉ chỉnh khoảng cách, màu, chữ, bo góc, đổ bóng, trạng thái di chuột.
    - KHÔNG sửa các file CSS gốc (trừ lỗi thật sự). Mọi tinh chỉnh nằm ở đây
      để lần sau muốn quay lại bản cũ chỉ cần gỡ 1 dòng <link>.
    - Dùng biến trong variables.css, không viết mã màu rời rạc.

    MỤC LỤC
      01. Nền trang & khung nội dung
      02. Chữ
      03. Thanh tiện ích trên cùng
      04. Header đỏ
      05. MENU từ khoá  (làm lại)
      06. Hero + dải tiêu đề banner
      07. Khối "Xả kho" (Flash sale)
      08. Dải cam kết dịch vụ
      09. Lưới danh mục
      10. Tiêu đề khối & nút trượt
      11. Thẻ sản phẩm
      12. Khối khuyến mãi nền màu
      13. Bản tin công nghệ
      14. Chân trang
      15. Nút liên hệ nổi
      16. Khả năng tiếp cận (bàn phím)
==========================================================================*/


/*==========================================================================
  01. NỀN TRANG & KHUNG NỘI DUNG
  --------------------------------------------------------------------------
  LỖI ĐÃ SỬA: trang có HAI bề rộng nội dung khác nhau — phần header/hero
  dùng .hh-ui-container (1440px) còn toàn bộ khối sản phẩm phía dưới nằm
  trong #divallmaincontentv1 (1200px, cứng trong desktopv090419.css).
  Hai mép trái lệch nhau ~85px nên trang trông "so le".
  → Thống nhất tất cả về CÙNG một cột 1200px (đúng chuẩn các trang thương
    mại điện tử VN, cùng cỡ với nguyenkim.com).
==========================================================================*/
body{
    background:var(--hh-bg);
}

.hh-ui-container,
.hh-container{
    max-width:1230px;          /* 1200 nội dung + 2×15 lề */
    margin-left:auto;
    margin-right:auto;
    padding-left:15px;
    padding-right:15px;
}

/* .hh-ui-container trong navigation.css bị đặt position:sticky mà không có
   'top' → vô nghĩa nhưng tạo tầng xếp chồng thừa, chặn đổ bóng của khối khác */
.hh-ui-container{
    position:static;
}

/* Khối hero / cam kết dịch vụ / danh mục nằm SẴN trong #divallmaincontentv1
   (đã là cột 1200px) rồi lại được bọc thêm một .hh-ui-container nữa → cộng
   dồn 15px lề mỗi bên, hụt so với các khối sản phẩm bên dưới đúng 15px.
   Đây chính là lý do mép trái của trang trông "so le".
   → Container lồng bên trong không cộng lề lần hai. */
#divallmaincontentv1 .hh-ui-container{
    max-width:none;
    padding-left:0;
    padding-right:0;
}

/* Khối bọc hero là flex có gap:20px, hai phần tử anh em còn lại rỗng
   (rộng 0) nhưng khoảng gap vẫn ăn mất 20px → mép PHẢI của hero, dải dịch
   vụ và danh mục ngắn hơn các khối sản phẩm đúng 20px. */
#divallbanneradvnewversion{
    gap:0;
}

.hh-app{
    overflow-x:clip;           /* chặn trượt ngang do banner tràn */
}


/*==========================================================================
  02. CHỮ
==========================================================================*/
h1,h2,h3,h4{
    color:var(--hh-text);
    letter-spacing:-.01em;
}

a{
    transition:color var(--hh-transition);
}

img{
    max-width:100%;
}


/*==========================================================================
  03. THANH TIỆN ÍCH TRÊN CÙNG
==========================================================================*/
.hh-topbar{
    background:var(--hh-white);
    border-bottom:1px solid var(--hh-border);
}

.hh-topbar a,
.hh-topbar span,
.hh-topbar li{
    font-size:var(--hh-fs-sm);
    color:var(--hh-text-light);
}

.hh-topbar a:hover{
    color:var(--hh-primary);
}


/*==========================================================================
  04. HEADER ĐỎ
==========================================================================*/
.hh-mobile-sticky-header > header,
.hh-mobile-sticky-header header{
    background:var(--hh-gradient-soft);
    box-shadow:0 2px 12px rgba(215,25,32,.18);
}

/* --- nút "Danh mục sản phẩm" --- */
.hh-header-danhmucsptilte{
    border-radius:var(--hh-radius-sm);
    font-weight:600;
    letter-spacing:.1px;
    transition:box-shadow var(--hh-transition),transform var(--hh-transition);
}

.hh-header-danhmucsptilte:hover{
    box-shadow:0 4px 14px rgba(0,0,0,.16);
    transform:translateY(-1px);
}

/* --- ô tìm kiếm --- */
.hh-header__search input,
.hh-header__search .hh-search-input{
    border-radius:var(--hh-radius-sm);
    font-size:var(--hh-fs-md);
}

.hh-header__search input::placeholder{
    color:var(--hh-text-muted);
}

/* --- nhóm nút tài khoản / doanh nghiệp / giỏ hàng --- */
.hh-header__actions > a,
.hh-header__actions > div{
    border-radius:var(--hh-radius-sm);
    transition:background var(--hh-transition);
}

.hh-header__actions > a:hover,
.hh-header__actions > div:hover{
    background:rgba(255,255,255,.14);
}


/*==========================================================================
  05. MENU  — DỰNG LẠI (2 thành phần)

  Số đo tham chiếu lấy trực tiếp từ nguyenkim.com bằng getBoundingClientRect,
  không ước lượng bằng mắt:
      · mục menu là CHỮ TRƠN — không icon, không nền, không đệm
      · khoảng cách giữa hai mục đúng 30px (flex gap)
      · cỡ chữ 14px, độ đậm 400, line-height 21px
      · 12 mục nhãn NGẮN, trải đều kín hàng
      · đầu hàng là một nhãn đỏ dẫn tới trang khuyến mãi

  KHÁC nguyenkim.com một điểm, theo yêu cầu: họ dùng chữ XANH DƯƠNG cho hàng
  menu; ở đây giữ tông Hồng Hà — chữ xám đậm, chuyển đỏ khi di chuột.

  BA thứ đã gỡ, đừng thêm lại (chính chúng làm hàng menu rời rạc):
    1. icon trên từng mục
    2. đệm ngang trên từng mục (đệm + gap cộng dồn thành ~54px quãng chữ-tới-chữ)
    3. nhãn dài kiểu "Máy giặt có sấy" — nhãn dài khiến hàng chỉ chứa nổi 9 mục
       và chừa một mảng trống lớn bên phải
==========================================================================*/

/*--------------------------------------------------------------------------
  MENU A — hàng từ khoá dưới header
--------------------------------------------------------------------------*/
.hh-nav{
    height:auto;
    background:var(--hh-white);
    border-top:none;
    border-bottom:1px solid var(--hh-border);
    box-shadow:var(--hh-shadow-xs);
    overflow:visible;
}

.hh-nav .hh-ui-container{
    height:auto;
}

.hh-nav-inner{
    height:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:26px;
    padding:11px 0;      /* hàng cao ~44px, xấp xỉ 49px của nguyenkim.com */
    overflow:visible;
}

/* --- nhãn đỏ đầu hàng --- */
.hh-nav-hot{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    height:24px;
    padding:0 9px;
    border-radius:4px;
    background:var(--hh-primary);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-decoration:none;
    white-space:nowrap;
    transition:background var(--hh-transition);
}

.hh-nav-hot:hover{
    background:var(--hh-primary-dark);
    color:#fff;
}

/* --- vùng cuộn ngang khi màn hình hẹp --- */
.hh-nav-scroll{
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
}

.hh-nav-scroll::-webkit-scrollbar{
    display:none;
}

/* --- danh sách mục --- */
.hh-nav-menu{
    width:auto;
    height:auto;
    justify-content:flex-start;
    gap:30px;                      /* đúng bằng nguyenkim.com */
    white-space:nowrap;
}

.hh-nav-menu li a{
    position:relative;
    height:auto;
    display:flex;
    padding:0;                     /* khoảng cách CHỈ do gap quyết định */
    border:none;
    border-radius:0;
    background:none;
    color:var(--hh-text-body);
    font-size:var(--hh-fs-base);   /* 14px */
    font-weight:400;
    line-height:21px;
    transition:color var(--hh-transition);
}

/* gạch chân mảnh khi di chuột — dấu hiệu "bấm được" mà không làm nặng hàng */
.hh-nav-menu li a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height:2px;
    border-radius:2px;
    background:var(--hh-primary);
    transform:scaleX(0);
    transition:transform var(--hh-transition);
}

.hh-nav-menu li a:hover,
.hh-nav-menu li a.active{
    background:none;
    border-color:transparent;
    color:var(--hh-primary);
}

.hh-nav-menu li a:hover::after,
.hh-nav-menu li a.active::after{
    transform:scaleX(1);
}

/* 12 mục ở gap 30px vừa đúng kín cột 1200px — không còn dư một pixel nào.
   Dưới 1230px cột bắt đầu hẹp lại, nên phải thu gap theo, nếu không mục cuối
   bị cắt mà người dùng không hề thấy dấu hiệu gì (thanh cuộn đã bị ẩn). */
@media (max-width:1229px){
    .hh-nav-menu{
        gap:20px;
    }
}

@media (max-width:1099px){
    .hh-nav-menu{
        gap:15px;
    }

    .hh-nav-inner{
        gap:16px;
    }
}


/*--------------------------------------------------------------------------
  MENU B — bảng "Danh mục sản phẩm" xổ xuống

  Đây là chỗ "khoảng cách dòng xa nhau quá": mỗi dòng đang cao 47px cho một
  dòng chữ 20px, 12 dòng thành 568px — bảng dài lê thê, phải đưa mắt đi xa
  mới quét hết. Thu về ~38px/dòng (tổng ~460px) thì quét nhanh hơn hẳn mà
  vẫn thoáng, và vẫn đủ rộng để bấm.
--------------------------------------------------------------------------*/
.hh-category-dropdown .hh-category-list{
    padding:4px 0;
    border-radius:0 0 var(--hh-radius) var(--hh-radius);
    background:var(--hh-white);
    box-shadow:var(--hh-shadow-lg);
    overflow:hidden;
}

.hh-category-item{
    gap:10px;
    padding:0 12px;
    border-bottom:none;            /* bỏ kẻ ngang: 12 đường kẻ làm bảng rối */
}

.hh-category-item:hover{
    background:var(--hh-primary-soft);
    border-radius:0;
    box-shadow:none;
    transform:none;
}

/* .hh-category-link cao cứng 36px là thứ đẩy dòng lên 47px */
.hh-category-item .hh-category-link{
    min-height:0;
    height:38px;
    padding:0;
}

.hh-category-icon{
    flex:0 0 20px;
    width:20px;
}

.hh-category-icon img{
    width:20px;
    height:20px;
    object-fit:contain;
}

.hh-category-title{
    line-height:1.3;
}

.hh-category-title a{
    color:var(--hh-text-body);
    font-size:var(--hh-fs-base);
    text-decoration:none;
}

.hh-category-item:hover .hh-category-title a{
    color:var(--hh-primary);
    font-weight:500;
}

.hh-category-arrow{
    opacity:0;
    transition:opacity var(--hh-transition),transform var(--hh-transition);
}

.hh-category-item:hover .hh-category-arrow{
    opacity:.6;
}


/*==========================================================================
  06. HERO + DẢI TIÊU ĐỀ BANNER
==========================================================================*/
.hh-hero{
    background:transparent;
}

/* ảnh banner chính */
.hh-hero-slider,
.hh-home-banner{
    border-radius:var(--hh-radius);
    overflow:hidden;
}

/* LỖI ĐÃ SỬA: ảnh banner bị KÉO GIÃN.
   Khung banner tỉ lệ 864×300 (2,88:1) trong khi ảnh gốc 2000×882 (2,27:1),
   mà ảnh để object-fit:fill → chữ và hình trong banner bị bè ngang ~27%.
   Ngoài ra mỗi slide rộng 890px, lớn hơn khung 864px nên mỗi lần đổi ảnh
   lại nhích một chút.
   → Ép mọi slide đúng bằng khung và giữ nguyên tỉ lệ ảnh. */
.inrightbanneradvhomenerversion .itemadvhomenewversion{
    width:100%;
    height:100%;
}

.inrightbanneradvhomenerversion img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* hero + dải tiêu đề gộp thành một khối liền mạch */
.rightbanneradvhomenerversion{
    border-radius:var(--hh-radius);
    overflow:hidden;
    background:var(--hh-white);
    box-shadow:var(--hh-shadow-sm);
}

.inrightbanneradvhomenerversion{
    border-radius:var(--hh-radius) var(--hh-radius) 0 0;
}

/* --- dải 4 tiêu đề dưới banner --- */
.listtabitembannerhomenewversion{
    border-top:1px solid var(--hh-border);
    background:var(--hh-white);
    border-radius:0 0 var(--hh-radius) var(--hh-radius);
}

.tabitembannerhomenv{
    border-right:1px solid var(--hh-border);
    transition:background var(--hh-transition);
}

.tabitembannerhomenv:last-child{
    border-right:none;
}

.tabitembannerhomenv > div{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:8px 14px;
    cursor:pointer;
}

.tabitembannerhomenv span{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:var(--hh-text-light);
    font-size:var(--hh-fs-sm);
    font-weight:600;
    line-height:1.35;
    text-align:center;
    letter-spacing:.1px;
    transition:color var(--hh-transition);
}

.tabitembannerhomenv:hover{
    background:var(--hh-primary-soft);
}

/* mục đang xem: gạch chân đỏ thay vì chỉ đổi màu chữ */
.tabitembannerhomenv.active{
    position:relative;
    background:var(--hh-primary-soft);
}

.tabitembannerhomenv.active::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:var(--hh-primary);
}

.tabitembannerhomenv.active span{
    color:var(--hh-primary);
    font-weight:700;
}


/*==========================================================================
  07. KHỐI "XẢ KHO" (FLASH SALE)
  --------------------------------------------------------------------------
  LỖI ĐÃ SỬA: thẻ HTML có style="display:block" nội tuyến, đè lên
  display:flex của home.css → tiêu đề, dòng trạng thái và đồng hồ đếm
  ngược xếp chồng, tràn khỏi thanh cao 58px và ĐÈ LÊN ảnh sản phẩm.
  Thuộc tính nội tuyến chỉ có thể ghi đè bằng !important.
==========================================================================*/
.hh-home-flash{
    border-radius:var(--hh-radius);
    overflow:hidden;
    box-shadow:var(--hh-shadow);
}

.hh-flash-header,
.hh-flash-header[style]{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    height:auto;
    min-height:54px;
    padding:10px 14px;
    background:var(--hh-gradient);
}

.hh-flash-title{
    padding-top:0;
    font-size:var(--hh-fs-lg);
    font-weight:700;
    letter-spacing:.2px;
}

.hh-flash-title i{
    color:#FFD200;
    font-size:19px;
}

.hh-flash-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
}

.hh-flash-status{
    margin-bottom:0;
    color:rgba(255,255,255,.9);
    font-size:var(--hh-fs-xs);
    letter-spacing:.2px;
}

.hh-countdown{
    gap:4px;
}

.hh-time{
    width:26px;
    height:24px;
    border-radius:var(--hh-radius-xs);
    background:rgba(0,0,0,.28);
    color:#fff;
    font-size:var(--hh-fs-sm);
    font-weight:700;
}

.hh-dot{
    font-size:14px;
    line-height:1;
    opacity:.75;
}

/* --- thân khối --- */
.hh-flash-item-inner{
    padding:12px 14px 14px;
}

.hh-flash-name{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:38px;
    color:var(--hh-text);
    font-size:var(--hh-fs-base);
    font-weight:500;
    line-height:1.35;
}

.hh-flash-price .sale{
    color:var(--hh-primary);
    font-size:var(--hh-fs-lg);
    font-weight:700;
}

.hh-flash-price .old{
    color:var(--hh-text-muted);
    font-size:var(--hh-fs-sm);
    text-decoration:line-through;
}

.hh-flash-progress{
    border-radius:var(--hh-radius-pill);
    overflow:hidden;
}

.hh-flash-progress-bar{
    background:linear-gradient(90deg,#FF8A00,#FF3D00);
}

.hh-flash-buy{
    border-radius:var(--hh-radius-sm);
    font-weight:700;
    letter-spacing:.3px;
}

.hh-flash-buy.disabled{
    background:#E4E7EC;
    color:var(--hh-text-muted);
    opacity:1;
}


/*==========================================================================
  08. DẢI CAM KẾT DỊCH VỤ
  --------------------------------------------------------------------------
  LỖI ĐÃ SỬA: 2 trong 5 mục có dòng mô tả bị ẩn (style="display:none") nên
  chữ của các mục không nằm cùng một đường ngang → hàng bị lệch.
  → Canh giữa theo chiều dọc, không phụ thuộc có hay không dòng mô tả.
==========================================================================*/
.hh-services-list{
    gap:10px;
}

.hh-service-item{
    gap:11px;
    align-items:center;
    min-height:60px;
    padding:10px 12px;
    background:var(--hh-gradient);
    border:none;
    border-radius:var(--hh-radius);
    box-shadow:var(--hh-shadow-red);
}

.hh-service-item:hover{
    background:var(--hh-primary);
    border-color:transparent;
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(215,25,32,.30);
}

.hh-service-icon{
    width:38px;
    height:38px;
    border-radius:var(--hh-radius-sm);   /* thay cho border-radius:40% méo mó */
    font-size:18px;
}

.hh-service-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.hh-service-title{
    font-size:var(--hh-fs-base);
    font-weight:600;
    line-height:1.3;
    letter-spacing:.1px;
}

.hh-service-desc{
    margin-top:2px;
    color:rgba(255,255,255,.78);
    font-size:var(--hh-fs-xs);
    line-height:1.3;
}


/*==========================================================================
  09. LƯỚI DANH MỤC
==========================================================================*/
.hh-featured-header{
    align-items:baseline;
    margin-bottom:14px;
}

.hh-featured-title{
    position:relative;
    padding-left:13px;
    font-size:var(--hh-fs-xl);
    font-weight:700;
}

.hh-featured-title::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:4px;
    height:20px;
    border-radius:3px;
    background:var(--hh-primary);
    transform:translateY(-50%);
}

.hh-featured-grid > a,
.hh-featured-grid > div{
    border:1px solid var(--hh-border);
    border-radius:var(--hh-radius);
    background:var(--hh-white);
    transition:border-color var(--hh-transition),box-shadow var(--hh-transition),
               transform var(--hh-transition);
}

.hh-featured-grid > a:hover,
.hh-featured-grid > div:hover{
    border-color:rgba(215,25,32,.35);
    box-shadow:var(--hh-shadow);
    transform:translateY(-3px);
}

.hh-featured-grid img{
    transition:transform var(--hh-transition-slow);
}

.hh-featured-grid > a:hover img,
.hh-featured-grid > div:hover img{
    transform:scale(1.06);
}


/*==========================================================================
  10. TIÊU ĐỀ KHỐI & NÚT TRƯỢT
==========================================================================*/
.hh-product-section{
    border-radius:var(--hh-radius-lg);
    overflow:hidden;
    box-shadow:var(--hh-shadow-sm);
}

.hh-section-header{
    padding:14px 18px;
    background:var(--hh-gradient);
}

.hh-section-left{
    gap:12px;
}

.hh-section-icon{
    background:rgba(255,255,255,.16);
    border-radius:var(--hh-radius-sm);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.hh-section-icon i{
    color:#fff;
}

.hh-section-title{
    font-size:var(--hh-fs-lg);
    font-weight:700;
    letter-spacing:.2px;
}

.hh-section-desc{
    color:rgba(255,255,255,.8);
    font-size:var(--hh-fs-sm);
}

.hh-section-viewall{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 13px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:var(--hh-radius-pill);
    color:#fff;
    font-size:var(--hh-fs-sm);
    font-weight:600;
    text-decoration:none;
    transition:background var(--hh-transition),border-color var(--hh-transition);
}

.hh-section-viewall:hover{
    background:rgba(255,255,255,.18);
    border-color:#fff;
    color:#fff;
}

/* --- nút trượt trái / phải --- */
.hh-slider-btn,
.hh-tech-news-prev,
.hh-tech-news-next,
.hh-promotion-banner-btn{
    background:var(--hh-white);
    border:1px solid var(--hh-border);
    box-shadow:var(--hh-shadow-md);
    color:var(--hh-text-body);
    transition:background var(--hh-transition),color var(--hh-transition),
               box-shadow var(--hh-transition);
}

.hh-slider-btn:hover,
.hh-tech-news-prev:hover,
.hh-tech-news-next:hover,
.hh-promotion-banner-btn:hover{
    background:var(--hh-primary);
    border-color:var(--hh-primary);
    color:#fff;
    box-shadow:var(--hh-shadow-red);
}


/*==========================================================================
  11. THẺ SẢN PHẨM
  --------------------------------------------------------------------------
  LỖI ĐÃ SỬA: sản phẩm không có giá cũ / không có dòng "Trả góp 0%" bị
  co lại, làm tên và giá của các thẻ trong cùng hàng không thẳng nhau.
  → Cố định chiều cao tối thiểu cho tên, giá, chân thẻ và đẩy chân thẻ
    xuống đáy bằng margin-top:auto.
==========================================================================*/
.hh-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--hh-border);
    border-radius:var(--hh-radius);
    background:var(--hh-white);
    overflow:hidden;
    transition:border-color var(--hh-transition),box-shadow var(--hh-transition),
               transform var(--hh-transition);
}

.hh-card:hover{
    border-color:rgba(215,25,32,.30);
    box-shadow:var(--hh-shadow-md);
    transform:translateY(-3px);
}

/* KHÔNG được biến thẻ này thành flex.
   Lý do: -webkit-line-clamp chỉ hoạt động khi phần tử là display:-webkit-box.
   Con của một flex container bị "blockify" (ép về block) → mất cắt dòng,
   tên sản phẩm dài tràn 3 dòng và ĐÈ LÊN giá. Đã mắc đúng lỗi này một lần. */
.hh-card-link{
    display:block;
    flex:1 1 auto;
    min-height:0;
}

.hh-card-image{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--hh-white);
}

.hh-card-image img{
    transition:transform var(--hh-transition-slow);
}

.hh-card:hover .hh-card-image img{
    transform:scale(1.05);
}

/* Hàng chứa nhãn giảm giá nằm TRONG dòng chảy, nên thẻ nào không có nhãn
   (sản phẩm không giảm giá) sẽ bị đôn lên ~25px, khiến tên và giá của thẻ
   đó lệch hẳn so với các thẻ cùng hàng.
   → Luôn chừa sẵn đúng chiều cao đó, dù có nhãn hay không. */
.hh-card-badges{
    min-height:24px;
}

/* nhãn giảm giá */
.hh-card-badges .badge-sale,
.badge-sale{
    background:var(--hh-gradient);
    border-radius:var(--hh-radius-pill);
    box-shadow:0 2px 6px rgba(215,25,32,.28);
    font-size:var(--hh-fs-xs);
    font-weight:700;
    letter-spacing:.2px;
}

/* tên sản phẩm: tối đa 2 dòng, luôn chiếm đúng chiều cao 2 dòng để các thẻ
   trong cùng hàng thẳng nhau.
   product-cardV2.css đặt height:48px cứng → dòng thứ 3 vẫn lọt vào phần
   thừa 10px và bị cắt ngang thân chữ. Trả về auto rồi chốt bằng min-height. */
.hh-card-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    height:auto;
    min-height:40px;
    color:var(--hh-text);
    font-size:var(--hh-fs-base);
    font-weight:400;
    line-height:1.4;
    transition:color var(--hh-transition);
}

.hh-card:hover .hh-card-title{
    color:var(--hh-primary);
}

.hh-card-spec{
    color:var(--hh-text-light);
    font-size:var(--hh-fs-sm);
}

/* khối giá: chừa sẵn chỗ cho dòng giá cũ để thẻ không co lại */
.hh-card-price{
    min-height:44px;
    margin-top:8px;
}

.price-current{
    color:var(--hh-primary);
    font-size:var(--hh-fs-lg);
    font-weight:700;
    line-height:1.25;
}

.price-old{
    color:var(--hh-text-muted);
    font-size:var(--hh-fs-sm);
    text-decoration:line-through;
}

.hh-card-rating{
    gap:5px;
}

.hh-stars{
    color:var(--hh-gold);
}

.hh-rating-count{
    color:var(--hh-text-muted);
    font-size:var(--hh-fs-xs);
}

/* chân thẻ luôn nằm sát đáy */
.hh-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:40px;
    margin-top:auto;
    padding-top:4px;
}

.hh-installment-footer{
    color:var(--hh-green);
    font-size:var(--hh-fs-xs);
    font-weight:600;
}

.hh-cart-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:32px;
    height:32px;
    border:1px solid rgba(215,25,32,.35);
    border-radius:50%;
    background:var(--hh-primary-soft);
    color:var(--hh-primary);
    transition:background var(--hh-transition),color var(--hh-transition),
               transform var(--hh-transition);
}

.hh-cart-btn:hover{
    background:var(--hh-primary);
    border-color:var(--hh-primary);
    color:#fff;
    transform:scale(1.08);
}


/*==========================================================================
  12. KHỐI KHUYẾN MÃI NỀN MÀU
==========================================================================*/
.hh-flashsale-section,
.hh-home-promotion,
.hh-promotion-auto{
    border-radius:var(--hh-radius-lg);
    overflow:hidden;
    box-shadow:var(--hh-shadow-sm);
}

.hh-flashsale-header,
.hh-home-promotion__header,
.hh-promotion-auto__header{
    padding:14px 18px;
}

/* LỖI ĐÃ SỬA: HomepagePromotionAuto.css phủ một lớp gradient MỜ lên ảnh nền
   "/UI2026/images/HomepagePromotionAuto/header-bg.png" — ảnh này không có
   trong bộ file (lỗi 404 mỗi lần tải trang), nên nửa phải của thanh tiêu đề
   trong suốt, chữ trắng gần như mất hút.
   → Bỏ ảnh nền không tồn tại, dùng gradient đặc tự thân. */
.hh-promotion-auto__header{
    height:auto;
    min-height:64px;
    background-image:linear-gradient(90deg,#C4161D 0%,#E8410C 55%,#FF8A2B 100%);
}

/* --- nút lọc trên nền màu ---
   LỖI ĐÃ SỬA: nút đang chọn tô ĐỎ, nhưng khối "HOT DEAL" cũng nền đỏ nên
   nút gần như tàng hình; khối "DEAL HỜI LỜI TO" nền cam thì đỏ bị chìm.
   → Đảo ngược: nút đang chọn nền TRẮNG chữ đỏ (nổi trên mọi nền màu),
     nút chưa chọn viền trắng mờ, nền trong suốt. */
.hh-promotion-tab,
.hh-flashsale-tab,
.hh-home-promotion__tab,
.hh-promotion-auto__tab{
    border:1px solid rgba(255,255,255,.55);
    border-radius:var(--hh-radius-pill);
    background:transparent;
    color:#fff;
    font-size:var(--hh-fs-base);
    font-weight:600;
    transition:background var(--hh-transition),color var(--hh-transition),
               border-color var(--hh-transition),box-shadow var(--hh-transition);
}

.hh-promotion-tab:hover,
.hh-flashsale-tab:hover,
.hh-home-promotion__tab:hover,
.hh-promotion-auto__tab:hover{
    background:rgba(255,255,255,.20);
    border-color:#fff;
    color:#fff;
}

.hh-promotion-tab.active,
.hh-flashsale-tab.active,
.hh-home-promotion__tab.active,
.hh-promotion-auto__tab.active,
.hh-promotion-tab.is-active,
.hh-home-promotion__tab.is-active{
    background:var(--hh-white);
    border-color:var(--hh-white);
    color:var(--hh-primary);
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* --- nhãn giảm giá: hai khối dùng hai kiểu khác nhau
       ("Giảm:15%" và "-15%") → cho về cùng một dáng chữ --- */
.hh-promotion-auto__installmentH,
.hh-promotion-card-discount{
    color:var(--hh-primary);
    font-size:var(--hh-fs-sm);
    font-weight:700;
    letter-spacing:.1px;
}

/* banner khuyến mãi giữa trang */
.hh-category-banner img,
.hh-promotion-banner-slide img,
.banneriteminbanneradvhome img{
    border-radius:var(--hh-radius);
}

.hh-promotion-banner-dot{
    transition:background var(--hh-transition),width var(--hh-transition);
}

.hh-promotion-banner-dot.is-active{
    background:var(--hh-primary);
}


/*==========================================================================
  13. BẢN TIN CÔNG NGHỆ
  --------------------------------------------------------------------------
  LỖI ĐÃ SỬA: khối này KHÔNG được bọc trong .hh-ui-container như các khối
  khác nên rộng bằng đúng thẻ cha 1200px, lệch hẳn so với phần còn lại và
  tiêu đề bị cắt ở mép trái.
  → Cho khối tự canh giữa theo đúng cột nội dung chung.
==========================================================================*/
.hh-tech-news{
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
}

.hh-tech-news-header h2{
    position:relative;
    padding-left:13px;
    font-size:var(--hh-fs-xl);
    letter-spacing:-.01em;
}

.hh-tech-news-header h2::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:4px;
    height:20px;
    border-radius:3px;
    background:var(--hh-primary);
    transform:translateY(-50%);
}

.hh-tech-news-item,
.hh-tech-news-track > *{
    border-radius:var(--hh-radius);
    overflow:hidden;
    background:var(--hh-white);
    border:1px solid var(--hh-border);
    transition:border-color var(--hh-transition),box-shadow var(--hh-transition),
               transform var(--hh-transition);
}

.hh-tech-news-track > *:hover{
    border-color:rgba(215,25,32,.28);
    box-shadow:var(--hh-shadow-md);
    transform:translateY(-3px);
}

.hh-tech-news-category{
    color:var(--hh-primary);
    font-size:var(--hh-fs-xs);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
}

/* hh-techNews-SliderV0.css khoá cứng height/max-height 46px cho đúng 2 dòng
   ở cỡ chữ 16/23px. Đổi cỡ chữ mà giữ khung cứng thì dòng thứ 3 lọt vào
   phần thừa và bị cắt ngang → mở khoá chiều cao, để số dòng tự quyết. */
.hh-tech-news-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    height:auto;
    min-height:44px;
    max-height:none;
    color:var(--hh-text);
    font-size:var(--hh-fs-md);
    font-weight:600;
    line-height:1.45;
}

.hh-tech-news-date{
    color:var(--hh-text-muted);
    font-size:var(--hh-fs-sm);
}

.hh-tech-news-image img{
    transition:transform var(--hh-transition-slow);
}

.hh-tech-news-track > *:hover .hh-tech-news-image img{
    transform:scale(1.05);
}

.hh-tech-news-dots span.active,
.hh-tech-news-dots .active{
    background:var(--hh-primary);
}


/*==========================================================================
  14. CHÂN TRANG
==========================================================================*/
#divfooter,
.indivfooter{
    background:var(--hh-white);
    border-top:1px solid var(--hh-border);
}

.itemmenubottomcol,
.itemmenubottomcolend{
    line-height:1.75;
}

.itemmenubottomcol > div:first-child,
.itemmenubottomcolend > div:first-child,
.titlethongtinlienhebottom{
    margin-bottom:6px;
    color:var(--hh-text);
    font-size:var(--hh-fs-md);
    font-weight:700;
}

/* Toàn bộ liên kết chân trang đang in đậm (kế thừa font-weight:bold từ thẻ
   cha) nên cả khối chữ nặng như nhau, không phân biệt được tiêu đề cột với
   mục con. → Chỉ tiêu đề cột in đậm, liên kết để chữ thường. */
.itemmenubottomcol a,
.itemmenubottomcolend a{
    color:var(--hh-text-light);
    font-size:var(--hh-fs-base);
    font-weight:400;
    text-decoration:none;
}

.itemmenubottomcol a:hover,
.itemmenubottomcolend a:hover{
    color:var(--hh-primary);
}

/* dòng bản quyền */
.outbannerbottom,
.divcopyrightbottom{
    background:var(--hh-dark);
    color:rgba(255,255,255,.72);
    font-size:var(--hh-fs-sm);
    line-height:1.7;
}

.outbannerbottom a,
.divcopyrightbottom a{
    color:rgba(255,255,255,.9);
}


/*==========================================================================
  15. NÚT LIÊN HỆ NỔI (Messenger / Zalo)
==========================================================================*/
.sticky-sidebar img,
.sticky-sidebar a{
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));
    transition:transform var(--hh-transition);
}

.sticky-sidebar a:hover{
    transform:scale(1.08);
}


/*==========================================================================
  16. KHẢ NĂNG TIẾP CẬN — viền khi di chuyển bằng bàn phím (phím Tab)
==========================================================================*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
    outline:2px solid var(--hh-primary);
    outline-offset:2px;
    border-radius:var(--hh-radius-xs);
}

/* Tôn trọng thiết lập "giảm chuyển động" của hệ điều hành */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}


/*==========================================================================
  17. THANH TRÊN CÙNG & CHÂN TRANG — đợt sửa 8
  --------------------------------------------------------------------------
  Áp cho CẢ HAI trang vì header/footer là thành phần dùng chung; sửa một bên
  sẽ làm hai trang lệch nhau.
==========================================================================*/

/*--------------------------------------------------------------------------
  17.1  BỎ NÚT "XEM TỒN KHO", DỒN THANH TÌM KIẾM SANG
  --------------------------------------------------------------------------
  Header là lưới 5 cột: logo | danh mục | tồn kho | tìm kiếm | tài khoản.
  Ẩn nút tồn kho thôi là CHƯA ĐỦ — `display:none` rút phần tử khỏi lưới nên
  ô tìm kiếm tụt vào cột 140px và bị bóp lại. Phải khai báo lại lưới còn 4
  cột ở MỌI điểm ngắt có định nghĩa `grid-template-columns`.
--------------------------------------------------------------------------*/
.hh-header__province{
    display:none !important;
}

.hh-header-inner{
    grid-template-columns:
        160px
        190px
        minmax(280px, 1fr)
        300px;
}

@media (min-width:768px) and (max-width:1199px){
    .hh-header-inner{
        grid-template-columns:130px 160px minmax(220px, 1fr) 102px;
    }
}

@media (max-width:767px){
    .hh-header-inner{
        grid-template-areas:
            "logo actions"
            "search search";
    }
}

/*--------------------------------------------------------------------------
  17.2  CHÂN TRANG — cột "Kết nối với chúng tôi"
  --------------------------------------------------------------------------
  Bản cũ: cột này rộng 30% (4 cột kia mỗi cột 17,5%) nên tổng vượt 100% và
  nó tự tràn ra ngoài hàng. Bên trong mỗi dòng liên hệ lại chia
  `nhãn 60% float:left` + `số 40% float:right`, nên số điện thoại bị đẩy sang
  tận mép phải, cách nhãn một quãng trống rất lớn và không thẳng hàng với
  bốn cột bên cạnh.

  → Cột này về đúng 17,5% như các cột khác; mỗi mục liên hệ xếp DỌC
    (nhãn ở trên, số ở dưới) thay vì chia đôi ngang; thêm icon điện thoại.
--------------------------------------------------------------------------*/
/* 4 cột đầu 17,5% + cột này 30% = 117,5% ⇒ tràn hàng. Cho cả 5 cột 20%
   thì vừa đúng 100%, mép cột nào cũng thẳng nhau và không dư khoảng trống
   ở mép phải. */
.itemmenubottomcol,
.itemmenubottomcolend{
    width:20%;
    box-sizing:border-box;
}

.itemmenubottomcolend > div{
    padding:0 10px;
}

/* mỗi mục: Bán hàng trực tuyến / Chăm sóc khách hàng / Tổng đài */
#ttbanhangtructuyen,
#ttchamsockhachhang,
#tttongdai{
    margin-bottom:10px;
}

/* gỡ kiểu chia đôi ngang của bản cũ (nhãn 60% float trái, số 40% float phải) */
.itemmenubottomcolend #ttbanhangtructuyen .titlethongtinlienhebottom,
.itemmenubottomcolend #ttchamsockhachhang .titlethongtinlienhebottom,
.itemmenubottomcolend #tttongdai .titlethongtinlienhebottom{
    width:auto;
    float:none;
    margin:0;
    color:var(--hh-text-light);
    font-size:var(--hh-fs-sm);
    font-weight:400;
    line-height:1.4;
}

.itemmenubottomcolend .sdtlienhebottom{
    width:auto;
    float:none;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--hh-text);
    font-size:var(--hh-fs-md);
    font-weight:700;
    line-height:1.4;
    letter-spacing:.2px;
}

/* Icon điện thoại của đợt 8 nằm TRƯỚC SỐ và tô đỏ. Đợt 9 chuyển icon ra
   trước TÊN PHÒNG BAN và đổi sang màu đen (mục 18.2) ⇒ gỡ hẳn icon cũ ở đây,
   nếu không mỗi dòng hiện HAI icon. */
.itemmenubottomcolend .sdtlienhebottom::before{
    content:none;
}

#baogiakh{
    margin-bottom:12px;
}

/* Ô đăng ký email (#divdangkyemailnhanthongtin) bản gốc đã đặt
   `display:none` trong desktopv090419.css — không tạo kiểu cho nó ở đây,
   viết cũng không hiện. */


/*==========================================================================
  18. ĐỢT SỬA 9 — nhãn "Dành cho Doanh nghiệp" & cột liên hệ chân trang
==========================================================================*/

/*--------------------------------------------------------------------------
  18.1  NHÃN 2 DÒNG: "Dành cho" / "Doanh nghiệp"
  --------------------------------------------------------------------------
  Ba mục ở góc phải header (Tài khoản · Dành cho Doanh nghiệp · Giỏ hàng) nằm
  trên một hàng flex canh giữa theo chiều dọc. Cho riêng một mục xuống 2 dòng
  thì mục đó cao hơn 15px, hàng canh giữa sẽ đẩy icon của nó lên lệch so với
  hai mục kia.
  → Đặt trước chỗ cho 2 dòng ở CẢ BA mục (`min-height` = 2 × 15px). Ba khối
    cao bằng nhau ⇒ icon thẳng hàng, dòng chữ ĐẦU cũng thẳng hàng, mục 2 dòng
    chỉ dôi thêm dòng thứ hai xuống dưới.
--------------------------------------------------------------------------*/
.hh-header__actions .hh-action{
    align-self:center;
    justify-content:flex-start;
}

.hh-header__actions .hh-action__text{
    min-height:30px;        /* 2 dòng × line-height 15px */
    white-space:normal;     /* để <br> ăn; nowrap của bản gốc chặn xuống dòng */
}

.hh-action__text--2dong{
    line-height:15px;
}

/*--------------------------------------------------------------------------
  18.2  CHÂN TRANG — CỘT LIÊN HỆ XẾP 2 CỘT: phòng ban | số điện thoại
  --------------------------------------------------------------------------
  Theo mẫu người dùng gửi: mỗi dòng là "icon · tên phòng ban · số điện thoại"
  nằm TRÊN CÙNG MỘT HÀNG, icon màu đen.

  Cột 20% (=240px) không đủ cho dòng dài nhất ("Chăm sóc khách hàng" +
  "0966.833.933" ≈ 230px kể cả icon) nên sẽ bị gãy dòng. → chia lại:
  4 cột đầu 19% + cột liên hệ 24% = 100%, các cột vẫn thẳng hàng nhau.
--------------------------------------------------------------------------*/
.itemmenubottomcol{
    width:19%;
}

.itemmenubottomcolend{
    width:24%;
}

#ttbanhangtructuyen,
#ttchamsockhachhang,
#tttongdai{
    display:flex;
    align-items:baseline;
    flex-wrap:nowrap;
    gap:6px;
    margin-bottom:7px;
}

/* icon điện thoại — ĐEN, theo yêu cầu (trước để đỏ thương hiệu) */
#ttbanhangtructuyen::before,
#ttchamsockhachhang::before,
#tttongdai::before{
    content:"\f095";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:11px;
    color:var(--hh-text);
    flex:0 0 auto;
}

/* CỘT 1 — tên phòng ban */
.itemmenubottomcolend #ttbanhangtructuyen .titlethongtinlienhebottom,
.itemmenubottomcolend #ttchamsockhachhang .titlethongtinlienhebottom,
.itemmenubottomcolend #tttongdai .titlethongtinlienhebottom{
    flex:0 0 auto;
    width:auto;
    float:none;
    margin:0;
    color:var(--hh-text);
    font-size:var(--hh-fs-sm);
    font-weight:400;
    line-height:1.5;
    white-space:nowrap;
}

/* chỉ 3 dòng có số điện thoại mới thêm dấu hai chấm — #baogiakh không có số */
#ttbanhangtructuyen .titlethongtinlienhebottom::after,
#ttchamsockhachhang .titlethongtinlienhebottom::after,
#tttongdai .titlethongtinlienhebottom::after{
    content:":";
}

/* CỘT 2 — số điện thoại */
.itemmenubottomcolend .sdtlienhebottom{
    flex:0 0 auto;
    display:block;
    width:auto;
    float:none;
    color:var(--hh-text);
    font-size:var(--hh-fs-sm);
    font-weight:700;
    line-height:1.5;
    letter-spacing:.2px;
    white-space:nowrap;
}

/* dòng này không có số nên không cần icon, chỉ lùi cho thẳng với các dòng trên */
#baogiakh{
    margin-top:12px;
    padding-left:17px;      /* thẳng hàng với chữ của 3 dòng trên (icon 11px + khe 6px) */
}

#baogiakh .titlethongtinlienhebottom{
    margin:0;
    font-size:var(--hh-fs-sm);
    font-weight:400;
}


/*==========================================================================
  19. ĐỢT SỬA 10 — DỰNG LẠI KHỐI MENU CHÂN TRANG
  --------------------------------------------------------------------------
  Bản trước lộn xộn vì ba chuyện cộng lại:
    ① Cỡ chữ không thống nhất: liên kết 14px, cột liên hệ 12px, tiêu đề 15px
       ⇒ nhìn chỗ to chỗ nhỏ.
    ② Các cột là `float:left` với bề rộng tính theo %, khoảng cách giữa hai
       cột chỉ là phần đệm 10px hai bên ⇒ khe hở không đều và không kiểm soát
       được.
    ③ Mỗi mục cao theo nội dung của chính nó, mục nào gãy 2 dòng thì đẩy tất
       cả các mục dưới nó xuống ⇒ hàng ngang giữa các cột không thẳng.

  Cách sửa: chuyển hẳn sang CSS Grid, khoá bề rộng đủ để KHÔNG mục nào gãy
  dòng, và cho mọi hàng chung một chiều cao để hàng thứ N của cột nào cũng
  nằm đúng một độ cao.

  SỐ ĐO THẬT (đo bằng headless ở cỡ chữ 13px, khung rộng 1180px):
      mục dài nhất  "Danh sách sản phẩm áp dụng đổi trả"      = 212px
      dòng liên hệ dài nhất (icon+nhãn+số)                    = 226px
      "Hướng dẫn mua hàng tại Hồng Hà"                        = 197px
  ⇒ cột liên hệ 234px, bốn cột còn lại chia đều phần dư:
      (1180 − 234 − 4×20) / 4 = 216px  >  212px  ⇒ vừa, không gãy dòng.
==========================================================================*/
#thongtinchungcongty{
    display:grid;
    grid-template-columns:repeat(4, 1fr) 234px;
    column-gap:20px;
    align-items:start;
}

/* thẻ clear:both cuối khối sẽ thành ô lưới thứ 6 nếu để nguyên */
#thongtinchungcongty > div[style*="clear"]{
    display:none;
}

.itemmenubottomcol,
.itemmenubottomcolend{
    width:auto;
    float:none;
    min-width:0;
}

.itemmenubottomcol > div,
.itemmenubottomcolend > div{
    padding:0;                 /* khoảng cách cột đã do column-gap lo */
    line-height:normal;
}

/*--------------------------------------------------------------------------
  19.1  MỘT CỠ CHỮ DUY NHẤT CHO MỌI MỤC
  Tiêu đề cột vẫn 15px đậm để phân biệt cấp, còn TẤT CẢ nội dung bên dưới —
  liên kết, tên phòng ban, số điện thoại — đều 13px.
--------------------------------------------------------------------------*/
.itemmenubottomcol > div > div:first-child,
.itemmenubottomcolend > div > div:first-child{
    height:32px;
    margin:0 0 4px;
    color:var(--hh-text);
    font-size:var(--hh-fs-md);
    font-weight:700;
    line-height:32px;
    white-space:nowrap;
}

.itemmenubottomcol > div > div,
.itemmenubottomcolend .titlethongtinlienhebottom,
.itemmenubottomcolend .sdtlienhebottom{
    font-size:13px;
}

.itemmenubottomcol a,
.itemmenubottomcolend a{
    font-size:13px;
}

/*--------------------------------------------------------------------------
  19.2  MỌI HÀNG CÙNG MỘT CHIỀU CAO ⇒ HÀNG NGANG THẲNG GIỮA CÁC CỘT
  `white-space:nowrap` là chốt chặn: nếu sau này có mục dài hơn số đo ở trên,
  nó sẽ tràn ra thấy ngay, thay vì âm thầm gãy dòng làm lệch cả lưới.
--------------------------------------------------------------------------*/
/*  Chiều cao hàng: 28px → 22px.
    Chữ chỉ 13px nên 28px dư tới 15px khoảng trống mỗi dòng, các dòng nhìn rời rạc.
    22px = chữ 13px + 9px thoáng (line-height 1,69) — vẫn dễ đọc mà 5 dòng trong
    một cột ngắn lại 30px. Con số này chọn sau khi dựng ảnh so 28/24/22px.
    ĐỪNG hạ thêm: dưới 20px thì dòng chữ bắt đầu dính nhau.                     */
.itemmenubottomcol > div > div:not(:first-child),
#ttbanhangtructuyen,
#ttchamsockhachhang,
#tttongdai,
#baogiakh{
    height:22px;
    margin:0;
    line-height:22px;
    white-space:nowrap;
}

.itemmenubottomcol > div > div:not(:first-child) a{
    line-height:22px;
}

/* ba dòng liên hệ: icon · phòng ban : số — vẫn một hàng, nay cao đúng 22px */
#ttbanhangtructuyen,
#ttchamsockhachhang,
#tttongdai{
    display:flex;
    align-items:center;
    gap:6px;
}

.itemmenubottomcolend #ttbanhangtructuyen .titlethongtinlienhebottom,
.itemmenubottomcolend #ttchamsockhachhang .titlethongtinlienhebottom,
.itemmenubottomcolend #tttongdai .titlethongtinlienhebottom,
.itemmenubottomcolend .sdtlienhebottom{
    line-height:22px;
}

#baogiakh{
    margin-top:0;
    padding-left:17px;         /* thẳng với chữ của 3 dòng trên: icon 11 + khe 6 */
}


/*==========================================================================
  20. ĐỢT SỬA 11 — CÂN ĐỐI LẠI THANH ĐỎ TRÊN CÙNG
  --------------------------------------------------------------------------
  SỐ ĐO TRƯỚC KHI SỬA (headless, khung header rộng 1200px):
      lưới  160 | 190 | 508 (tìm kiếm) | 300 (tài khoản…), khe 14px
  Thanh tìm kiếm 508px chiếm gần nửa thanh đỏ nên nhìn nặng một bên; ba nút
  bên phải lại xếp icon-trên-chữ-dưới nên cao và hẹp, càng lệch.

  Bố cục mới: thanh tìm kiếm về 430px, ba nút chuyển sang ICON TRƯỚC – CHỮ SAU
  trên cùng một hàng, cụm nút bám mép phải, phần dư thành khoảng thở ngăn giữa
  vùng "tìm kiếm" và vùng "tài khoản".
      160 + 14 + 190 + 14 + 430 + 14 + 378 = 1200
  Cụm ba nút rộng ~326px trong ô 378px ⇒ dôi ~52px khoảng trống bên trái cụm.
==========================================================================*/
.hh-header-inner{
    grid-template-columns:
        160px
        190px
        410px
        1fr;
}

@media (min-width:768px) and (max-width:1199px){
    .hh-header-inner{
        grid-template-columns:130px 160px minmax(210px, 326px) 1fr;
    }
}

/*--------------------------------------------------------------------------
  20.1  BA NÚT: ICON TRƯỚC — CHỮ SAU, CÙNG MỘT HÀNG
  --------------------------------------------------------------------------
  Gỡ lại hai thứ của mục 18.1 vốn sinh ra để phục vụ kiểu xếp DỌC:
  `min-height:30px` (đặt trước chỗ cho 2 dòng) và `justify-content:flex-start`.
  Ở kiểu xếp NGANG, icon và khối chữ tự canh giữa theo chiều dọc nên nhãn
  "Dành cho / Doanh nghiệp" 2 dòng vẫn cân với hai nút một dòng.
--------------------------------------------------------------------------*/
/* phải kèm .hh-flex: header.css có `.hh-header__actions.hh-flex{gap:14px}` ở mức
   (0,2,0), viết `.hh-header__actions{gap:28px}` (0,1,0) không ăn — đo ra vẫn 14px. */
.hh-header__actions,
.hh-header__actions.hh-flex{
    gap:26px;
    justify-content:flex-end;
}

.hh-header__actions .hh-action{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-width:0;
    text-align:left;
}

.hh-header__actions .hh-action__text{
    min-height:0;
    font-size:13px;
    line-height:16px;
    text-align:left;
}

/* Icon cao bằng đúng khối chữ 2 dòng của "Dành cho / Doanh nghiệp"
   (2 × line-height 16px = 32px) nên ba nút nhìn cùng một tầm. */
.hh-header__actions .hh-action__icon{
    flex:0 0 auto;
    width:32px;
    height:32px;
}

/*--------------------------------------------------------------------------
  20.2  SỐ TRÊN GIỎ HÀNG
  Bản gốc neo `right:6px` — đúng khi chữ nằm DƯỚI icon, nhưng ở kiểu xếp ngang
  mép phải của nút là cuối chữ "Giỏ hàng" nên con số văng sang đè lên chữ.
  → Neo theo mép TRÁI, ngay góc trên-phải của icon.
--------------------------------------------------------------------------*/
/* Phải viết kèm .hh-header__actions: quy tắc `.hh-header__actions .hh-action{gap:8px}`
   ở mục 20.1 có độ ưu tiên (0,2,0), cao hơn `.hh-cart` (0,1,0) — mà .hh-cart CŨNG là
   .hh-action, nên viết `.hh-cart{gap:12px}` không bao giờ ăn (đúng bài học 14). */
.hh-header__actions .hh-cart{
    gap:14px;          /* rộng hơn hai nút kia để con số không chạm vào chữ */
}

/*  Con số đang ĐÈ LÊN icon giỏ hàng. `left:5px` đặt nó vào giữa-trái icon —
    chỗ có nét vẽ. Đẩy hẳn ra GÓC TRÊN-PHẢI, phần lớn nằm ngoài icon: icon rộng
    32px nên đặt left:23px ⇒ số chiếm 23…40px, chỉ chạm mép phải icon, thân giỏ
    hàng lộ ra hoàn toàn. Chữ "Giỏ hàng" bắt đầu ở 32+14=46px ⇒ vẫn hở 6px.       */
.hh-cart .hh-cart-count{
    top:-5px;
    left:23px;
    right:auto;
    min-width:17px;
    height:17px;
    line-height:17px;
    padding:0 3px;
}


/*==========================================================================
  21. BẢNG DANH MỤC — ICON TO GẤP ĐÔI, HÀNG SIẾT LẠI
  --------------------------------------------------------------------------
  SỐ ĐO TRƯỚC KHI SỬA: hàng cao 38px nhưng chữ chỉ 18px (14px/1.3) ⇒ mỗi hàng
  dư 20px khoảng trống, icon 20px lọt thỏm ở giữa nên nhìn hàng nào cũng rời rạc.
  Khoảng cách icon → chữ cũng tới 18px (margin-right 6 + gap 12).

  ĐÃ THỬ 40px (gấp đôi) RỒI BỎ: icon 40px ép hàng phải cao tối thiểu 42px, tức
  hai dòng chữ xa nhau HƠN cũ 4px — ngược lại yêu cầu "các hàng chữ gần lại".
  Bảng danh mục cũng phình từ 466 lên 514px.

  Chốt 32px: icon to gấp 1,6 lần bản cũ (nhìn rõ hẳn) mà hàng còn thấp hơn cũ
  (38 → 34px) nên các dòng chữ THẬT SỰ gần nhau hơn. Bảng còn 420px, thấp hơn
  bản cũ 46px. Đây là mức duy nhất thoả được cả hai yêu cầu.
  Kéo icon sát chữ: 18px → 10px.
==========================================================================*/
.hh-category-icon{
    flex:0 0 32px;
    width:32px;
    min-width:32px;
    height:32px;
    margin-right:0;
}

.hh-category-icon img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.hh-category-item{
    height:34px;
    padding:0 12px;
}

.hh-category-link{
    gap:10px;
}


/*==========================================================================
  22. KHỐI "XẢ KHO" (FLASH SALE) Ở TRANG CHỦ — bố cục lại
  --------------------------------------------------------------------------
  SỐ ĐO BẢN CŨ (thẻ 320×359): đầu khối 66px · ẢNH CHỈ 82px · tên 38px (2 dòng)
  · giá 26 · thanh 16 · nút 26 · các khe 5/6/6/10px.
  Ba vấn đề: ① ảnh bị bóp còn 82px trong ô rộng 292px nên trông bé xíu;
  ② tên tràn 2 dòng với `line-height:2.45` (14px × 2.45 = 34px/dòng) — chính
  chỗ này tạo cảm giác rời rạc; ③ các khe không đều.

  RÀNG BUỘC PHẢI TÔN TRỌNG: `syncHeroHeight()` khoá chiều cao thẻ này BẰNG
  chiều cao banner bên cạnh. Cho ô ảnh `flex:1 1 auto` là sai — ô ảnh tự phình
  theo ảnh gốc, thẻ cao lên, hàng flex giãn ra, banner bị kéo theo rồi
  syncHeroHeight lại lấy số đó ⇒ VÒNG LẶP, thẻ vọt từ 359 lên 474px và bố cục
  hàng đầu trang chủ bị đổi (đã mắc một lần).
  → Phải dùng `flex:1 1 0` (cơ sở 0): ô ảnh KHÔNG BAO GIỜ đóng góp chiều cao
    nội dung, chỉ ăn phần dư. Rồi lấy chỗ cho nó bằng cách siết đầu khối,
    chân khối, các khe và cho tên về 1 dòng.
==========================================================================*/

/*  22.1  ĐẦU KHỐI gọn lại: 58 → 48px
    Phải viết kèm `[style]`: mục 06 (cùng file, viết trước) có
    `.hh-flash-header, .hh-flash-header[style]{min-height:54px; padding:10px 14px}`
    ở mức (0,2,0) — thẻ này có style nội tuyến nên bộ chọn đó khớp và thắng
    quy tắc class đơn (0,1,0) của mình. Đo ra vẫn 58px cho tới khi viết đúng mức. */
.hh-flash-header,
.hh-flash-header[style]{
    height:48px;
    min-height:0;
    padding:0 14px;
    align-items:center;
}

.hh-flash-title{
    padding-top:0;            /* bản cũ đẩy xuống 10px làm lệch tâm */
    font-size:15px;
    gap:7px;
}

.hh-flash-title i{
    font-size:18px;
}

.hh-flash-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
}

.hh-flash-status-text{
    font-size:10.5px;
    line-height:1.2;
    white-space:nowrap;
}

.hh-countdown{
    gap:5px;
}

.hh-time{
    width:27px;
    height:18px;
    border-radius:5px;
    font-size:12.5px;
}

.hh-dot{
    font-size:13px;
}

/*  22.2  Ô ẢNH — ăn hết phần dư, cơ sở 0 để không kéo thẻ cao lên
    Ảnh giới hạn bằng max-width/max-height, KHÔNG dùng `height:100%`
    trên thẻ <img> (xem ERR-023).                                             */
.hh-flash-image{
    flex:1 1 0;
    height:auto;
    min-height:90px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hh-flash-image img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/*  22.3  TÊN SẢN PHẨM — đúng 1 dòng, dài thì cắt bằng dấu ba chấm
    Hai thứ phải gỡ của mục 06 (cùng file, viết trước):
      `display:-webkit-box` → phải về `block` thì `text-overflow` mới ăn;
      `min-height:38px`     → không gỡ thì ô tên vẫn cao 2 dòng dù chữ 1 dòng. */
.hh-flash-name{
    display:block;
    -webkit-line-clamp:none;
    min-height:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin:9px 0 0;
    color:var(--hh-text);
    font-size:13.5px;
    font-weight:500;
    line-height:1.45;
}

/*  22.4  GIÁ — cho nổi hơn, hai mức giá trên cùng một hàng  */
.hh-flash-price{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
    margin:7px 0 0;
}

.hh-home-flash .sale{
    font-size:19px;
    font-weight:800;
    letter-spacing:-.3px;
}

.hh-home-flash .old{
    margin-left:0;
    font-size:12.5px;
}

/*  22.5  THANH ĐÃ BÁN — mảnh lại, bo tròn hẳn  */
.hh-flash-progress{
    height:18px;
    margin:8px 0 0;
    border-radius:100px;
}

.hh-flash-progress span{
    font-size:10.5px;
    line-height:18px;
}

/*  22.6  NÚT MUA  */
.hh-flash-buy{
    height:34px;
    margin-top:9px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
}

/*  22.7  CHÂN KHỐI (chấm trang + "Xem tất cả") gọn lại  */
.hh-flash-footer{
    height:40px;
    padding:0 14px;
    align-items:center;
}


/*==========================================================================
  23. TIÊU ĐỀ CÁC KHỐI SẢN PHẨM Ở TRANG CHỦ (10 khối)
  --------------------------------------------------------------------------
  SỐ ĐO BẢN CŨ: tiêu đề 17px/700 line-height 25,5px (hộp 26px cho chữ 17px ⇒
  thừa 9px đệm dòng) · dòng mô tả 12px line-height 18px (thừa 6px) · cách nhau
  `margin-top:4px`. Cộng lại khe THẤY BẰNG MẮT ≈ 11,5px — đó là lý do dòng nhỏ
  nhìn rời hẳn khỏi tiêu đề, dù con số margin chỉ có 4px.

  → Siết đệm dòng của CẢ HAI (1,5 → 1,25 và 1,35) rồi mới giảm margin.
    Chữ hoa + đậm hơn cho tiêu đề, kèm giãn chữ .4px vì chữ hoa sát nhau khó đọc.
==========================================================================*/
.hh-section-title{
    margin:0;
    font-size:var(--hh-fs-lg);
    font-weight:800;
    line-height:1.25;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.hh-section-desc{
    margin-top:2px;
    color:rgba(255,255,255,.82);
    font-size:var(--hh-fs-sm);
    line-height:1.35;
}


/*==========================================================================
  24. KHỐI "DEAL HỜI LỜI TO" — DỰNG THEO ẢNH MẪU NGƯỜI DÙNG GỬI
  --------------------------------------------------------------------------
  Nguồn: `04.png` (bản vẽ toàn khối) + `nền.png` (nền tia sáng) ở gốc dự án.
  Bản phiên 30 (gradient phẳng, tiêu đề 16px) người dùng nhận xét "vẫn chưa
  đẹp" và yêu cầu làm ĐÚNG theo 2 ảnh ⇒ viết lại toàn bộ mục này.

  Quy đổi kích thước: khung trong ảnh mẫu rộng ~1628px ↔ khối thật 1200px
  ⇒ hệ số 0,737. Bố cục, màu, hình khối giữ theo ảnh mẫu.

  CỠ CHỮ THEO THANG CHUNG CỦA HỆ THỐNG (phiên 32 — người dùng: "font chữ để quá to,
  đặc biệt tên sản phẩm, giá"). Lấy nguyên số ảnh mẫu × 0,737 thì chữ trong thẻ to
  hơn hẳn 10 khối sản phẩm khác (tên 16 vs 14px, giá 23 vs 17px). Nay dùng đúng số
  đo computed của các khối đó: tên 14px · giá 17px · giá cũ 12px · nhãn 12px ·
  tab 14px/42px · nút giỏ 34px · "Xem tất cả" 13px. Đừng phóng to lại theo ảnh mẫu.

  Phần đi kèm (gỡ mục này thì phải gỡ cả chúng):
   - TRANG CHỦ.html: tiêu đề + dòng phụ, `.hh-dh-trangtri`, icon SVG trong
     5 nút tab, thẻ <script> nạp `hh-deal-2026.js`
   - GIAO-DIEN/js/hh-deal-2026.js: nhãn -x%, nút tim, thanh "Đã bán",
     chấm phân trang (dựng bằng JS vì máy chủ thay ruột thẻ mỗi lần bấm tab)
   - GIAO-DIEN/anh/deal-hoi-loi-to-nen.jpg, deal-tia-set.svg, deal-phieu-giam.svg

  BẪY ĐÃ VẤP (phiên 30): mục 12 cùng file đặt `.hh-flashsale-header
  {padding:14px 18px}` — phải gỡ đệm ngang ở đây, không thì cụm tiêu đề lệch
  so với hàng tab (hàng tab nằm NGOÀI header).
  MỌI QUY TẮC BỌC TRONG `.hh-flashsale-section` — `.hh-promotion-tab*` và
  `.hh-card*` còn nhiều khối khác trên trang chủ dùng chung.
==========================================================================*/

/*  24.1  KHUNG + NỀN TIA SÁNG  */
.hh-flashsale-section{
    position:relative;
    isolation:isolate;
    padding:12px 16px 20px;
    border-radius:20px;
    /* trong ảnh mẫu, khung chiếm vùng x 22…1650, y 60…905 của ảnh nền 1672×941
       ⇒ nền rộng 1672/1628 = 102,7% bề rộng khối, kéo lên 60 × 0,737 = 44px */
    background:
        linear-gradient(180deg,rgba(222,34,18,.5) 0%,rgba(232,58,24,.3) 20%,rgba(245,100,30,0) 38%),
        #F26A21 url(../anh/deal-hoi-loi-to-nen.jpg) 50% -44px/102.7% auto no-repeat;
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 8px 24px rgba(215,25,32,.16);
}

/* trang trí: phiếu % + tia sét thứ hai, nằm dưới mọi nội dung, không bấm được */
.hh-dh-trangtri{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.hh-dh-phieu{
    position:absolute;
    top:2px;
    left:68%;
    width:78px;
    height:auto;
    transform:rotate(-24deg);
    filter:drop-shadow(0 6px 8px rgba(140,20,0,.28));
}

.hh-dh-set2{
    position:absolute;
    top:42px;
    left:74.5%;
    width:44px;
    height:auto;
    transform:rotate(14deg);
    filter:drop-shadow(0 6px 10px rgba(150,40,0,.3));
}

/*  24.2  HÀNG ĐẦU: tia sét · tiêu đề lớn + dòng phụ · đồng hồ · "Xem tất cả"  */
.hh-flashsale-section .hh-flashsale-header{
    position:relative;
    z-index:1;
    align-items:center;
    gap:20px;
    min-height:78px;
    margin:0;
    padding:0;
}

.hh-flashsale-section .hh-flashsale-left{
    gap:26px;
    margin:0;
    padding:0;
}

.hh-flashsale-section .hh-flashsale-title{
    align-items:center;
    gap:6px;
}

.hh-dh-set{
    flex:0 0 auto;
    width:52px;
    height:76px;
    margin:-14px -4px -2px -4px;
    filter:drop-shadow(0 5px 7px rgba(150,40,0,.35));
}

.hh-dh-tieude{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

/*  Chữ đậm nghiêng có chiều sâu như ảnh mẫu.
    Roboto trong dự án không có tệp nghiêng ⇒ nghiêng bằng skewX (điều khiển
    được góc, không phụ thuộc trình duyệt tự "giả nghiêng").  */
.hh-dh-chu{
    display:inline-block;
    color:#fff;
    margin-right:-37px;
    background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 48%,#FFE39A 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:40px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:-.5px;
    white-space:nowrap;
    /* Roboto trong dự án không có trục "wdth" (đã thử font-variation-settings,
       bề ngang không đổi) ⇒ hẹp chữ bằng scaleX, bù lề phải = bề rộng chữ × 12%
       (40px: rộng 310px ⇒ −37px) */
    transform:skewX(-9deg) scaleX(.88);
    transform-origin:left bottom;
    filter:drop-shadow(0 0 1px #B3140E) drop-shadow(0 3px 0 #B3140E)
           drop-shadow(0 7px 10px rgba(120,10,0,.4));
}

.hh-dh-phu{
    margin:3px 0 0 12px;
    color:#fff;
    font-size:13px;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    text-shadow:0 1px 3px rgba(140,30,0,.5);
}

/*  24.3  ĐỒNG HỒ: viên thuốc trong mờ, ô số trắng chữ đỏ  */
.hh-flashsale-section .hh-flashsale-countdown{
    gap:10px;
    height:44px;
    padding:0 5px 0 16px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:var(--hh-radius-pill);
    background:rgba(170,25,5,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(150,20,0,.12);
}

.hh-flashsale-section .hh-countdown-label{
    color:#fff;
    font-size:14px;
    font-weight:400;
    white-space:nowrap;
}

.hh-flashsale-section .hh-countdown-time{
    gap:6px;
}

.hh-flashsale-section .hh-countdown-time span{
    min-width:34px;
    height:34px;
    padding:0 3px;
    border-radius:8px;
    background:#fff;
    color:#E0141C;
    font-size:18px;
    font-weight:700;
    line-height:34px;
    text-align:center;
    font-variant-numeric:tabular-nums;
    box-shadow:0 3px 8px rgba(150,20,0,.2);
}

.hh-flashsale-section .hh-countdown-time b{
    color:#fff;
    font-size:16px;
    font-weight:700;
    line-height:1;
}

/*  24.4  "XEM TẤT CẢ": viên thuốc viền trắng  */
.hh-flashsale-section .hh-flashsale-viewall{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    height:36px;
    margin-right:10px;
    padding:0 16px 0 18px;
    border:1.5px solid rgba(255,255,255,.92);
    border-radius:var(--hh-radius-pill);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background var(--hh-transition),color var(--hh-transition);
}

.hh-flashsale-section .hh-flashsale-viewall i{
    font-size:11px;
}

.hh-flashsale-section .hh-flashsale-viewall:hover{
    border-color:#fff;
    background:#fff;
    color:var(--hh-primary);
}

/*  24.5  HÀNG TAB: dồn trái, có icon; đang chọn nền trắng chữ đỏ,
    chưa chọn nền đào nhạt chữ nâu đậm  */
.hh-flashsale-section .hh-promotion-tabs-wrap{
    position:relative;
    z-index:1;
    margin:0;
    padding:4px 0 0;
    border:0;
}

/* `.hh-promotion-tabs` có overflow-x:auto ⇒ cắt mất bóng đổ của nút.
   Cả hàng chỉ rộng ~880px trong 1168px nên không cần cuộn ngang. */
.hh-flashsale-section .hh-promotion-tabs{
    overflow:visible;
    justify-content:flex-start;
    margin:0;
    padding:0;
}

.hh-flashsale-section .hh-promotion-tab-list{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px;
    min-width:0;
    margin:0;
    padding:0;
}

.hh-flashsale-section .hh-promotion-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:110px;
    height:42px;
    margin:0;
    padding:0 20px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--hh-radius-pill);
    background:linear-gradient(180deg,#FFE4C4 0%,#FCC895 100%);
    color:#4A2513;
    font-size:14px;
    font-weight:600;
    box-shadow:0 3px 10px rgba(170,50,0,.14);
    transform:none;
}

.hh-flashsale-section .hh-promotion-tab:hover{
    border-color:#fff;
    background:#FFF3E6;
    color:var(--hh-primary);
    transform:translateY(-1px);
}

.hh-flashsale-section .hh-promotion-tab.active{
    border-color:#fff;
    background:#fff;
    color:var(--hh-primary);
    font-weight:600;
    box-shadow:0 6px 16px rgba(160,20,0,.24);
}

/* bỏ mũi tên tam giác dưới nút đang chọn (product-cardV2.css) */
.hh-flashsale-section .hh-promotion-tab.active::after{
    content:none;
}

.hh-dh-tab-icon{
    flex:0 0 20px;
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hh-dh-tab-icon--lua{
    flex-basis:24px;
    width:24px;
    height:24px;
    margin:-3px -2px -1px -4px;
    fill:currentColor;
    stroke:none;
}

/* lõi ngọn lửa trắng như mẫu */
.hh-dh-tab-icon--lua .hh-dh-lua-trong{
    fill:#fff;
}

/*  24.6  DÃY THẺ SẢN PHẨM  */
.hh-flashsale-section .hh-product-slider{
    position:relative;
    z-index:1;
    margin:10px -6px 0;
}

/* đệm trên 6px để thẻ nhấc lên khi di chuột không bị cắt đầu;
   đệm dưới 16px chừa chỗ cho bóng đổ */
.hh-flashsale-section .hh-product-track{
    padding:6px 6px 16px;
}

.hh-flashsale-section .hh-product-grid{
    gap:10px;
}

/* product-cardV2.css tính bề rộng thẻ theo khe 16px ở MỌI điểm ngắt
   ((100% - 80px)/6 …). Khe ở đây 10px nên phải khai báo lại từng mức,
   không thì dư một dải trống bên phải. */
.hh-flashsale-section .hh-card{
    position:relative;
    flex:0 0 calc((100% - 50px)/6);
    border:0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 18px rgba(170,50,0,.13);
}
@media (max-width:1024px) {
    .hh-header__actions, .hh-header__actions.hh-flex {
        gap:12px;
    }
}
@media (max-width:992px){
    .hh-flashsale-section .hh-card{ flex:0 0 calc((100% - 40px)/5); }
}

@media (max-width:768px){
    .hh-flashsale-section .hh-card{ flex:0 0 calc((100% - 30px)/4); }
}

@media (max-width:500px){
    .hh-flashsale-section .hh-card{ flex:0 0 calc((100% - 10px)/2); }
 
         /* Ẩn Danh mục sản phẩm trên header */
    .hh-mobile-sticky-header .hh-mobile-category {
        display: none !important;
    }

    /* Search chiếm toàn bộ phần không gian còn lại */
    .hh-mobile-sticky-header .hh-header__search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;margin-left: 0;
    }

    .hh-mobile-sticky-header .hh-header__search .hh-search {
        width: 100%;
    }

    .hh-mobile-sticky-header .hh-header__search .hh-search input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
  .hh-header__actions .hh-action[href="/khach-hang-doanh-nghiep.html"] {
        display: none !important;
    }
}

.hh-flashsale-section .hh-card:hover{
    box-shadow:0 12px 26px rgba(170,40,0,.22);
    transform:translateY(-4px);
}

/* ô `.hh-installment-footer` (ẩn, chờ chữ trả góp) giữ vai trò chừa chỗ cho
   hàng nhãn -x% / nút tim nằm đè phía trên ảnh */
.hh-flashsale-section .hh-card-link{
    padding:0 14px;
}

.hh-flashsale-section .hh-flashsale-card .hh-installment-footer{
    flex:none;
    height:40px;
    min-height:40px;
    padding:0;
}

.hh-flashsale-section .hh-card-image{
    height:165px;
    margin:0 0 10px;
}

.hh-flashsale-section .hh-card-image img{
    max-width:100%;
    max-height:160px;
}

.hh-flashsale-section .hh-card-title{
    min-height:40px;
    color:#333;
    font-size:var(--hh-fs-base);
    font-weight:400;
    line-height:20px;
}

.hh-flashsale-section .hh-card-price{
    min-height:0;
    margin-top:6px;
}

.hh-flashsale-section .hh-flashsale-card .price-current{
    color:var(--hh-primary);
    font-size:var(--hh-fs-lg);
    font-weight:700;
    line-height:22px;
}

.hh-flashsale-section .price-old{
    margin-top:0;
    color:var(--hh-text-muted);
    font-size:var(--hh-fs-sm);
    line-height:18px;
}

/* nhãn giảm giá góc trái + nút tim góc phải (JS dựng) */
.hh-dh-giam{
    position:absolute;
    top:12px;
    left:14px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    height:22px;
    padding:0 7px;
    border-radius:6px;
    background:linear-gradient(135deg,#FF3B2F 0%,#D71920 100%);
    color:#fff;
    font-size:var(--hh-fs-sm);
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 6px rgba(215,25,32,.28);
    pointer-events:none;
}

.hh-dh-tim{
    position:absolute;
    top:8px;
    right:9px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#6B6B6B;
    font-size:15px;
    cursor:pointer;
    transition:color var(--hh-transition),background var(--hh-transition);
}

.hh-dh-tim:hover,
.hh-dh-tim.is-on{
    background:rgba(215,25,32,.08);
    color:var(--hh-primary);
}

/* chân thẻ: thanh "Đã bán" bên trái, nút giỏ vuông đỏ bên phải */
.hh-flashsale-section .hh-promotion-auto__product-footer{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    min-height:0;
    margin-top:auto;
    padding:8px 12px 12px 14px;
}

/* chữ "Giảm:x%" cũ đã chuyển thành nhãn góc trái — chỉ ẩn khi JS đã dựng
   xong nhãn (lớp `.hh-dh-san-sang`); JS lỗi thì chữ cũ vẫn còn */
.hh-dh-san-sang .hh-promotion-auto__installmentH{
    display:none;
}

.hh-dh-daban{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    gap:5px;
    min-width:0;
    padding-bottom:1px;
}

.hh-dh-thanh{
    display:block;
    width:100%;
    max-width:90px;
    height:8px;
    border-radius:var(--hh-radius-pill);
    background:#ECECEC;
    overflow:hidden;
}

.hh-dh-thanh i{
    display:block;
    min-width:8px;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#FF7A45 0%,#E8141B 100%);
}

.hh-dh-daban-chu{
    color:var(--hh-text-light);
    font-size:var(--hh-fs-sm);
    line-height:15px;
    white-space:nowrap;
}

.hh-flashsale-section .hh-promotion-auto__cart{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    background:linear-gradient(180deg,#FF4A36 0%,#D71920 100%);
    color:#fff;
    box-shadow:0 4px 10px rgba(215,25,32,.3);
}

.hh-flashsale-section .hh-promotion-auto__cart i{
    font-size:14px;
}

.hh-flashsale-section .hh-promotion-auto__cart:hover{
    background:#B8141A;
    color:#fff;
    transform:translateY(-1px);
}

/*  24.7  NÚT TRƯỢT: tròn trắng, tâm nằm ở mép thẻ ngoài cùng  */
.hh-flashsale-section .hh-slider-btn{
    top:40%;
    width:42px;
    height:42px;
    border:0;
    background:#fff;
    color:#333;
    font-size:16px;
    box-shadow:0 4px 14px rgba(120,30,0,.22);
}

.hh-flashsale-section .hh-prev{ left:-9px; }
.hh-flashsale-section .hh-next{ right:-9px; }

.hh-flashsale-section .hh-slider-btn:hover{
    background:var(--hh-primary);
    color:#fff;
}

/*  24.8  CHẤM PHÂN TRANG (JS dựng)  */
.hh-dh-cham{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:12px;
}

.hh-dh-cham button{
    width:11px;
    height:11px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#E4E4E4;
    cursor:pointer;
    transition:background var(--hh-transition),transform var(--hh-transition);
}

.hh-dh-cham button:hover{
    background:#FFB199;
}

.hh-dh-cham button.is-active{
    background:#E0141C;
    transform:scale(1.15);
}

/*  24.9  MÀN HẸP: bỏ trang trí, cho hàng đầu xuống dòng  */
@media (max-width:991px){
    .hh-dh-trangtri{ display:none; }

    .hh-flashsale-section .hh-flashsale-header,
    .hh-flashsale-section .hh-flashsale-left{
        flex-wrap:wrap;
        gap:12px;
        min-height:0;
    }

    .hh-dh-chu{ margin-right:-24px; font-size:26px; }
    .hh-dh-set{ width:36px; height:52px; margin-top:0; }

    .hh-flashsale-section .hh-flashsale-countdown{ height:40px; }

    .hh-flashsale-section .hh-countdown-time span{
        min-width:30px;
        height:30px;
        font-size:16px;
        line-height:30px;
    }
}

/*==========================================================================
  25. KHỐI "GIÁ RẺ MỖI NGÀY" (.hh-promotion, #promotioncard) — THEO ẢNH MẪU
  --------------------------------------------------------------------------
  Nguồn: `01.png` (bản vẽ) + `nền giá rẻ mỗi ngày.png` (nền) ở gốc dự án.
  Khung đỏ trong cả hai ảnh ở cùng vùng x 16…1306, y 7…1123 (1291×1117)
  ⇒ quy đổi sang khối 1200px: × 0,9295.

  NỀN CẮT 3 LÁT (GIAO-DIEN/anh/gia-re-moi-ngay-nen-*.jpg):
   - "dau"  (233px ảnh ⇒ 216px) : chữ HOT DEAL / Giá Rẻ mỗi ngày / hộp quà — ghim ĐỈNH
   - "chan" (264px ảnh ⇒ 245px) : icon giỏ hàng + % — ghim ĐÁY
   - "giua" : chỉ có sóng đỏ ⇒ được phép giãn theo chiều cao
  Vì sao không dùng một ảnh: nút "Xem thêm sản phẩm" làm khối cao thêm từng hàng —
  kéo giãn nguyên ảnh sẽ méo chữ HOT DEAL. Hai đường cắt (y 240 và 860 của ảnh
  gốc) đã soi: đi qua vùng đỏ trơn, không cắt ngang chi tiết nào.

  CỠ CHỮ THEO THANG CHUNG CỦA HỆ THỐNG (xem ràng buộc trong CLAUDE.md) — không
  nhân theo ảnh mẫu: tab 14px/600 cao 42px · tên 14px/400 · giá 17px/700 ·
  giá cũ 12px · % giảm 12px · nhãn "Trả trước 0đ" 11px.

  Phần đi kèm trong TRANG CHỦ.html: icon SVG trong 3 tab; liên kết
  `.hh-promotion-viewall` bỏ `style="display:none"` và đổi thành "SĂN DEAL NGAY".
  Ảnh banner cũ `.hh-promotion-header-banner` chỉ ẩn bằng CSS, không xoá.
==========================================================================*/

/*  25.1  KHUNG + NỀN 3 LÁT  */
.hh-promotion{
    position:relative;
    box-sizing:border-box;
    padding:0 12px 34px;
    border-radius:16px;
    background:
        /*url(../anh/gia-re-moi-ngay-nen-dau.jpg) center top/100% auto no-repeat,
        url(../anh/gia-re-moi-ngay-nen-chan.jpg) center bottom/100% auto no-repeat,
        url(../anh/gia-re-moi-ngay-nen-giua.jpg) center 215px/100% calc(100% - 459px) no-repeat,*/
            url(/UI2026/images/banners/gia-re-moi-ngay-nen-dau.jpg) center top/100% auto no-repeat,
            url(/UI2026/images/banners/gia-re-moi-ngay-nen-chan.jpg) center bottom/100% auto no-repeat,
            url(/UI2026/images/banners/gia-re-moi-ngay-nen-giua.jpg) center 215px/100% calc(100% - 459px) no-repeat,
        #D7061C;
    box-shadow:0 8px 24px rgba(215,25,32,.16);
}

/*  25.2  PHẦN ĐẦU: chữ đã nằm sẵn trong lát nền "dau" ⇒ header chỉ còn là
    khoảng chừa chỗ, cao đúng tỉ lệ ảnh (170/1291 bề ngang khối = 158px).
    Tiêu đề chữ "ĐẠI TIỆC ƯU ĐÃI" vốn đã display:none ở promotion-grid.css.  */
.hh-promotion .hh-promotion-header{
    display:block;
    margin:0 -12px;
    aspect-ratio:1291 / 170;
}

.hh-promotion .hh-promotion-header-banner{
    display:none;
}

/* nút vàng "SĂN DEAL NGAY" — cùng hàng với tab, sát mép phải */
.hh-promotion .hh-promotion-viewall{
    position:absolute;
    top:161px;
    right:12px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:42px;
    padding:0 6px 0 18px;
    border-radius:var(--hh-radius-pill);
    background:linear-gradient(180deg,#FFE56E 0%,#FFC61F 55%,#F5A900 100%);
    color:#B3120E;
    font-size:var(--hh-fs-base);
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px rgba(110,0,0,.3);
    transition:filter var(--hh-transition),transform var(--hh-transition);
}

.hh-promotion .hh-promotion-viewall > .fa-cart-shopping{
    font-size:15px;
}

.hh-grm-mui{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin-left:2px;
    border-radius:50%;
    background:#C8140F;
    color:#FFE56E;
    font-size:11px;
}

.hh-promotion .hh-promotion-viewall:hover{
    filter:brightness(1.05);
    text-decoration:none;
    transform:translateY(-1px);
}

/*  25.3  HÀNG TAB: dồn trái như ảnh mẫu (bản cũ canh giữa)  */
.hh-promotion .hh-deal-content{
    padding:3px 0 0;
    border-radius:0;
    background:transparent;
}

/* chừa 230px bên phải cho nút "SĂN DEAL NGAY" */
.hh-promotion .hh-promotion-tabs{
    justify-content:flex-start;
    gap:10px;
    min-height:42px;
    margin:0;
    padding:0 230px 0 0;
}

.hh-promotion .hh-promotion-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:42px;
    padding:0 22px 0 18px;
    border:1.5px solid rgba(255,255,255,.85);
    border-radius:var(--hh-radius-pill);
    background:rgba(120,0,10,.18);
    color:#fff;
    font-size:var(--hh-fs-base);
    font-weight:600;
    box-shadow:none;
}

.hh-promotion .hh-promotion-tab:hover{
    border-color:#fff;
    background:rgba(255,255,255,.16);
    color:#fff;
}

.hh-promotion .hh-promotion-tab.active{
    border-color:#fff;
    background:#fff;
    color:var(--hh-primary);
    box-shadow:0 4px 12px rgba(100,0,0,.25);
}

.hh-grm-tab-icon{
    flex:0 0 20px;
    width:20px;
    height:20px;
}

.hh-grm-tab-icon--net{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hh-grm-tab-icon--dac,
.hh-grm-tab-icon--lua{
    fill:currentColor;
}
.hh-promotion .hh-promotion-tab svg {
    fill:currentColor;
}
.hh-grm-tab-icon--lua{
    flex-basis:22px;
    width:22px;
    height:22px;
    margin:-2px -2px 0 -3px;
}

/* lõi ngọn lửa cam như ảnh mẫu */
.hh-grm-tab-icon--lua .hh-grm-lua-trong{
    fill:#FF9A3C;
}

/*  25.4  LƯỚI THẺ: 6 cột, khe 10px ngang / 11px dọc  */
/* desktopv090419.css đặt `.listiteminpdnchildv6{overflow:hidden}` ⇒ thẻ nhấc lên
   3px khi di chuột bị cắt đầu. Chừa 4px đệm trên; margin 8 → 7px để khe
   tab–thẻ vẫn ~11px như ảnh mẫu. */
.hh-promotion .listiteminpdnchildv6{
    margin-top:7px;
    padding-top:4px;
}

.hh-promotion .hh-promotion-grid{
    gap:11px 10px;
    padding:0;
}

.hh-promotion .hh-promotion-card{
    border:0;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(110,0,0,.18);
}

.hh-promotion .hh-promotion-card:hover{
    box-shadow:0 10px 22px rgba(110,0,0,.28);
}

.hh-promotion .hh-promotion-card-badge{
    top:12px;
    left:12px;
    border-color:#E6E6E6;
    color:#666;
}

.hh-promotion .hh-promotion-card-image{
    height:183px;
    padding:12px 12px 6px;
}

.hh-promotion .hh-promotion-card-image img{
    max-height:165px;
}

/* đệm đáy 39px chừa chỗ cho hàng chân thẻ nằm tuyệt đối (trả góp · nút giỏ) */
.hh-promotion .hh-promotion-card-content{
    padding:8px 12px 39px;
}

.hh-promotion .hh-promotion-card-title{
    margin:0;
    font-weight:400;
}

.hh-promotion .hh-promotion-card-price{
    margin-top:9px;
}

.hh-promotion .hh-promotion-card-old-price{
    margin-top:3px;
    color:var(--hh-text-muted);
}

/* chân thẻ: nút giỏ góc phải-dưới như ảnh mẫu, chữ "Trả góp 0 %" (nếu có) góc trái */
.hh-promotion .hh-promotion-auto__product-footer{
    position:absolute;
    right:10px;
    bottom:10px;
    left:12px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    min-height:0;
    margin:0;
    padding:0;
}

.hh-promotion .hh-promotion-auto__installment{
    color:var(--hh-red);
    font-size:var(--hh-fs-xs);
    font-weight:600;
}

.hh-promotion .hh-promotion-auto__cart{
    width:36px;
    height:34px;
    border:1.5px solid var(--hh-primary);
    border-radius:8px;
    background:#fff;
    color:var(--hh-primary);
}

.hh-promotion .hh-promotion-auto__cart i{
    font-size:15px;
}

.hh-promotion .hh-promotion-auto__cart:hover{
    background:var(--hh-primary);
    color:#fff;
}

/*  25.5  "XEM THÊM SẢN PHẨM": viên thuốc trắng, chữ đỏ  */
.hh-promotion .hh-promotion-more{
    margin-top:33px;
}

.hh-promotion .hh-promotion-more-btn{
    gap:10px;
    min-width:260px;
    height:44px;
    border:0;
    border-radius:var(--hh-radius-pill);
    background:#fff;
    color:var(--hh-primary);
    font-size:var(--hh-fs-base);
    font-weight:600;
    box-shadow:0 6px 16px rgba(110,0,0,.25);
}

.hh-promotion .hh-promotion-more-btn i{
    font-size:12px;
}

.hh-promotion .hh-promotion-more-btn:hover{
    background:#FFF1F1;
    color:var(--hh-primary);
}

/*  25.6  MÀN HẸP HƠN 1200px: vị trí lát giữa tính bằng px theo khối 1200px
    ⇒ cho lát giữa phủ kín; nút vàng về dòng riêng dưới hàng tab  */
@media (max-width:1199px){
    .hh-promotion{
        background:            
            url(/UI2026/images/banners/gia-re-moi-ngay-nen-dau.jpg) center top/100% auto no-repeat,
            url(/UI2026/images/banners/gia-re-moi-ngay-nen-chan.jpg) center bottom/100% auto no-repeat,
            url(/UI2026/images/banners/gia-re-moi-ngay-nen-giua.jpg) center 215px/100% calc(100% - 459px) no-repeat,
        #D7061C;                        
    }

    .hh-promotion .hh-promotion-viewall{
        position:static;
        margin:10px 0 0;
    }

    .hh-promotion .hh-promotion-tabs{
        padding-right:0;
    }
}

/*==========================================================================
  26. THANH MENU DƯỚI HEADER (3 MỤC) + MODULE "TỪ KHÓA NỔI BẬT"
  --------------------------------------------------------------------------
  Người dùng yêu cầu (2026-09-14): 12 từ khoá (Laptop … Lọc nước) chuyển khỏi
  thanh menu dưới header, xuống một module nút vuông ngay trên "BẢN TIN CÔNG
  NGHỆ"; thanh menu đổi thành "Khuyến mãi hot | Xây dựng cấu hình máy tính |
  Sửa chữa - Bảo Hành".

  - Thanh menu có ở TRANG CHỦ + TRANG SẢN PHẨM (sửa tay) và TRANG LINH KIỆN +
    TRANG LAPTOP (CONG-CU/chuyen-trang-danh-muc.py chép khối <nav> từ TRANG CHỦ).
  - "Sửa chữa - Bảo Hành" trỏ tới trang demo TRANG-DICH-VU-SUA-CHUA/…; "Xây dựng
    cấu hình máy tính" CHƯA có trang ⇒ tạm "http://beta.hongha.asia/#".
  - Module chỉ có ở TRANG CHỦ.
==========================================================================*/

/*  26.1  THANH MENU: 3 mục, ngăn bằng vạch mảnh  */
.hh-nav-dichvu{
    gap:0;
}

.hh-nav-dichvu li{
    display:flex;
    align-items:center;
}

.hh-nav-dichvu li + li::before{
    content:"";
    flex:0 0 1px;
    width:1px;
    height:14px;
    margin:0 20px;
    background:var(--hh-border-strong);
}

/* line-height 24px = đúng chiều cao nhãn đỏ "KHUYẾN MÃI HOT" cũ (24px) ⇒ hàng
   menu giữ nguyên 46px. Để 21px như mục 04 thì hàng thấp đi 3px và CẢ TRANG
   dịch lên theo. */
.hh-nav-dichvu li a{
    gap:7px;
}
.hh-nav-dichvu li a{
    font-weight:500;
    line-height:24px;
}

.hh-nav-dichvu .hh-nav-dichvu-hot{
    color:var(--hh-primary);
    font-weight:600;
}

/* icon trước chữ (phiên 36): lửa · máy tính để bàn · cờ lê — cùng màu đỏ thương
   hiệu, chữ giữ màu cũ */

.hh-nav-dichvu li a > i{
    flex:0 0 auto;
    color:var(--hh-primary);
    font-size:14px;
    line-height:1;
}

/*  26.2  MODULE "TỪ KHÓA NỔI BẬT" (trang chủ, ngay trên BẢN TIN CÔNG NGHỆ)
    Tiêu đề cùng dáng tiêu đề BẢN TIN CÔNG NGHỆ (vạch đỏ + 20px/700) để hai khối
    liền nhau trông cùng một hệ.  */
.hh-tu-khoa{
    box-sizing:border-box;
    max-width:1200px;
    margin:28px auto 0;
}

.hh-tu-khoa-header{
    display:flex;
    align-items:center;
    margin-bottom:16px;
}

.hh-tu-khoa-header h2{
    position:relative;
    margin:0;
    padding:0 0 0 13px;
    color:#222;
    font-size:var(--hh-fs-xl);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.01em;
}

.hh-tu-khoa-header h2::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:4px;
    height:20px;
    border-radius:3px;
    background:var(--hh-primary);
    transform:translateY(-50%);
}

.hh-tu-khoa-list{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.hh-tu-khoa-list li{
    margin:0;
    padding:0;
}

/* nút vuông viền mảnh — bo 8px như thẻ sản phẩm */
.hh-tu-khoa-list a{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    height:46px;
    padding:0 12px;
    border:1px solid var(--hh-border);
    border-radius:8px;
    background:#fff;
    color:var(--hh-text);
    font-size:var(--hh-fs-base);
    font-weight:500;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:var(--hh-shadow-xs);
    transition:color var(--hh-transition),border-color var(--hh-transition),
               background var(--hh-transition),box-shadow var(--hh-transition),
               transform var(--hh-transition);
}

.hh-tu-khoa-list a:hover{
    border-color:var(--hh-primary);
    background:var(--hh-primary-soft);
    color:var(--hh-primary);
    box-shadow:var(--hh-shadow-sm);
    transform:translateY(-2px);
}

@media (max-width:991px){
    .hh-tu-khoa-list{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:767px){
    .hh-tu-khoa{ margin-top:20px; }
    .hh-tu-khoa-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
}

@media (max-width:479px){
    .hh-tu-khoa-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/*==========================================================================
  27. GIAO DIỆN MOBILE (≤ 767px) — TRANG CHỦ + PHẦN DÙNG CHUNG
  --------------------------------------------------------------------------
  Người dùng yêu cầu (2026-09-14): mobile phải đẹp và đủ như máy tính, nhất là
  thanh trên cùng và chân trang. Đo ở 390px (đặt trang trong iframe — Chrome
  headless không cho cửa sổ hẹp hơn 500px) ra các lỗi:
   ① Header đỏ: lưới vẫn là `160px 190px 410px 0px` của mục 20 (viết KHÔNG kèm
     media query) ⇒ cột icon rộng 0, mỗi icon còn 12px, số giỏ hàng văng ra ngoài
     màn hình (x 387…404).
   ② Dải tiện ích: 4 mục chữ 9px bị cắt cụt hai đầu.
   ③ Thanh menu 3 mục: mục thứ 3 nằm ở x=399, ngoài màn hình (thanh cuộn bị ẩn).
     Ngay dưới lại có hàng ô nhanh `.hh-mobile-quick-tabs` gần trùng nội dung.
   ④ Chân trang: lưới cột máy tính `14px×4 + 234px` ⇒ chữ cụt còn 1–2 ký tự;
     cột "Kết nối với chúng tôi" bị ẩn hẳn.
   ⑤ Khối sản phẩm: "Xem tất cả" gãy 2 dòng (hộp 70×50px); nút trượt ở x=-18.
   ⑥ Khối Giá rẻ mỗi ngày: phần đầu chỉ 52px nên nút "SĂN DEAL NGAY" đè lên chữ.
  TẤT CẢ nằm trong một media query — giao diện máy tính không đổi 1 điểm ảnh.
==========================================================================*/
@media (max-width:767px){

    /*  27.1  DẢI TIỆN ÍCH: chỉ giữ 2 số điện thoại, mỗi số nửa bề ngang  */
    .hh-topbar{
        height:32px;
        font-size:11px;
    }

    .hh-topbar .hh-ui-container{
        display:flex;
        align-items:center;
        height:32px;
        padding:0 10px;
    }

    .hh-topbar-left{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        width:100%;
    }

    .hh-topbar-left > .hh-topbar-item{
        display:none !important;
    }

    .hh-topbar-left > .hh-topbar-item.hh-topbar-hotline{
        display:flex !important;
        flex:1 1 0;
        align-items:center;
        justify-content:center;
        gap:4px;
        min-width:0;
    }

    /* nhãn đầy đủ ("Chăm sóc khách hàng:") không vừa nửa màn hình ⇒ nhãn ngắn */
    .hh-topbar-hotline .hh-topbar-label{
        font-size:0;
    }

    .hh-topbar-left > .hh-topbar-item:nth-child(3) .hh-topbar-label::after{
        content:"Hotline:";
        font-size:11px;
    }

    .hh-topbar-left > .hh-topbar-item:nth-child(4) .hh-topbar-label::after{
        content:"CSKH:";
        font-size:11px;
    }

    .hh-topbar-hotline .hh-topbar-phone{
        margin:0;
        font-size:11px;
        font-weight:700;
        white-space:nowrap;
    }

    /*  27.2  HEADER ĐỎ — THEO MẪU NGƯỜI DÙNG GỬI (2026-09-14)
        Hàng 1: logo trái · 3 nút ICON + CHỮ (Tài khoản · Dành cho/Doanh nghiệp ·
                Giỏ hàng).
        Hàng 2: nút trắng "☰ Danh mục sản phẩm" bên trái · ô tìm kiếm bên phải.
        Nút danh mục là `#hhMobileCategory` — nằm NGOÀI lưới header (ngay sau
        </header>, trong `.hh-mobile-sticky-header`). Không đổi HTML: đặt nó
        `position:absolute` vào hàng 2 (khối sticky là khung định vị), ô tìm kiếm
        chừa lề trái đúng bằng nút. Menu xổ vẫn do desktopmaster.js bật lớp is-open.
        Kích thước tính cho màn 375–390px: 10+80+8+(28+48)+10+(28+68)+10+(28+44)+10
        = 372px; màn < 375px có mức nhỏ hơn ở cuối mục.  */
    .hh-mobile-sticky-header header .hh-ui-container{
        padding-right:0;
        padding-left:0;
    }

    .hh-header-inner{
        grid-template-columns:auto minmax(0,1fr);
        grid-template-rows:44px 40px;
        grid-template-areas:"logo actions" "search search";
        column-gap:8px;
        row-gap:8px;
        padding:8px 10px 10px;
    }

    .hh-header__logo img{
        height:auto;
        max-width:80px;
        max-height:38px;
    }

    .hh-header__actions,
    .hh-header__actions.hh-flex{
        width:auto;
        min-width:0;
        max-width:none;
        height:44px;
        gap:10px;
        justify-content:flex-end;
    }

    .hh-header__actions .hh-action{
        width:auto;
        min-width:0;
        height:44px;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:4px;
    }

    .hh-header__actions .hh-action__icon{
        flex:0 0 auto;
        width:24px;
        height:24px;
    }

    .hh-header__actions .hh-action__text{
        display:block !important;
        min-height:0;
        color:#fff;
        font-size:11px;
        font-weight:500;
        line-height:13px;
        text-align:left;
        white-space:nowrap;
    }

    .hh-header__actions .hh-cart{
        gap:4px;
    }

    /* số giỏ hàng ở góc trên-phải ICON (không phải của cả nút có chữ) */
    .hh-cart .hh-cart-count,
    .hh-header__actions .hh-cart-count{
        top:3px;
        right:auto;
        left:15px;
        min-width:16px;
        height:16px;
        padding:0 4px;
        font-size:10px;
        line-height:16px;
    }

    /* hàng 2: ô tìm kiếm chừa 156px nút danh mục + 8px khe */
    .hh-header__search{
        width:auto;
        margin-left:164px;
    }

    .hh-mobile-sticky-header{
        position:sticky;
    }

    /* Bản đầu: đo thấy nút ở đúng chỗ, bấm vẫn mở menu, nhưng ẢNH CHỤP không có
       nút — nền đỏ của <header> vẽ đè lên. Hạ header về lớp 1 trong khối sticky,
       nút danh mục lớp 20 (menu xổ vẫn nổi trên trang vì cả khối sticky z 9999). */
    .hh-mobile-sticky-header > header{
        position:relative;
        z-index:1;
    }

    /* hàng 2 bắt đầu ở 8 (đệm trên) + 44 (hàng 1) + 8 (khe) = 60px */
    .hh-mobile-category{
        position:absolute;
        top:60px;
        left:10px;
        z-index:20;
        width:156px;
        margin:0;
        padding:0;
    }

    .hh-mobile-category-toggle{
        justify-content:flex-start;
        min-height:40px;
        height:40px;
        padding:0 10px;
        border:0;
        border-radius:10px;
        font-size:12px;
        white-space:nowrap;
    }

    .hh-mobile-category-toggle__left{
        gap:7px;
    }

    .hh-mobile-category-toggle__icon{
        font-size:16px;
    }

    /* mẫu không có mũi tên xổ xuống */
    .hh-mobile-category-toggle__arrow{
        display:none;
    }

    /* menu xổ: rộng bằng màn hình (trừ 2 lề 10px), cuộn được nếu dài */
    .hh-mobile-category-menu{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        width:calc(100vw - 20px);
        max-height:70vh;
        margin:0;
        overflow-y:auto;
    }

    /*  27.3  THANH MENU 3 MỤC: 3 ô đều nhau, icon trên – chữ dưới  */
    .hh-nav{
        height:auto;
    }

    .hh-nav .hh-ui-container{
        padding:0;
    }

    .hh-nav .hh-nav-inner{
        display:block;
        height:auto;
        padding:0;
        overflow:visible;
    }

    .hh-nav .hh-nav-scroll{
        overflow:visible;
    }

    .hh-nav .hh-nav-dichvu{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:0;
        width:100%;
        min-width:0;
        height:auto;
        padding:0;
        white-space:normal;
    }

    .hh-nav .hh-nav-dichvu li{
        position:relative;
        display:flex;
        min-width:0;
    }

    .hh-nav .hh-nav-dichvu li + li::before{
        position:absolute;
        top:50%;
        left:0;
        height:30px;
        margin:0;
        transform:translateY(-50%);
    }

    .hh-nav .hh-nav-dichvu li a{
        flex:1 1 auto;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:100%;
        min-width:0;
        height:auto;
        min-height:60px;
        padding:9px 6px;
        font-size:12px;
        line-height:15px;
        text-align:center;
        white-space:normal;
    }

    .hh-nav .hh-nav-dichvu li a > i{
        font-size:18px;
    }

    .hh-nav .hh-nav-dichvu li a::after{
        display:none;
    }

    /* hàng ô nhanh cũ ("Xây dựng cấu hình / Tin khuyến mãi / Sửa chữa") trùng nội
       dung với thanh menu ngay trên ⇒ ẩn (header.css ép display:block !important) */
    .hh-mobile-quick-tabs-wrapper{
        display:none !important;
    }

    /*  27.4  KHỐI SẢN PHẨM: "Xem tất cả" một dòng, nút trượt nằm trong màn hình  */
    .hh-product-section .hh-section-header{
        gap:10px;
    }

    .hh-product-section .hh-section-viewall{
        flex:0 0 auto;
        height:30px;
        margin-right:0;
        padding:0 12px;
        font-size:12px;
        white-space:nowrap;
    }

    .hh-product-section .hh-slider-btn{
        width:34px;
        height:34px;
    }

    .hh-product-section .hh-prev{
        left:4px;
    }

    .hh-product-section .hh-next{
        right:4px;
    }

    /*  27.5  KHỐI GIÁ RẺ MỖI NGÀY: phần đầu cao đúng lát nền "dau"
        (padding-top theo % bề ngang = 233/1291), nút vàng xuống dưới hình chữ  */
    .hh-promotion{
        padding:0 10px 24px;
    }

    .hh-promotion .hh-promotion-header{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        margin:0 -10px;
        padding:calc((100% + 20px) * 233 / 1291) 10px 0;
        aspect-ratio:auto;
    }

    .hh-promotion .hh-promotion-viewall{
        position:static;
        height:34px;
        margin:8px 0 0;
        padding:0 5px 0 14px;
        font-size:13px;
    }

    .hh-promotion .hh-grm-mui{
        width:24px;
        height:24px;
    }

    .hh-promotion .hh-promotion-tabs{
        gap:8px;
        margin-top:10px;
    }

    .hh-promotion .hh-promotion-tab{
        height:36px;
        padding:0 14px 0 12px;
        font-size:13px;
    }

    /*  27.6  TỪ KHÓA NỔI BẬT: 3 cột, cách mép màn hình 10px  */
    .hh-tu-khoa{
        padding:0 10px;
    }

    .hh-tu-khoa-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .hh-tu-khoa-list a{
        height:42px;
        padding:0 6px;
        font-size:13px;
    }

    /*  27.7  CHÂN TRANG: 2 cột menu, cột liên hệ trải hết bề ngang  */
    /* khung lưới và từng cột đang bị khoá cao 160px (đo được) ⇒ hàng thứ hai đè lên
       đuôi hàng thứ nhất. Trả chiều cao về tự động. */
    #thongtinchungcongty{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:none;
        grid-auto-rows:auto;
        align-items:start;
        column-gap:16px;
        row-gap:18px;
        height:auto;
        padding:4px 14px 8px;
    }

    .itemmenubottomcol,
    .itemmenubottomcolend,
    .itemmenubottomcol > div,
    .itemmenubottomcolend > div{
        width:auto;
        min-width:0;
        height:auto;
        max-height:none;
        overflow:visible;
    }

    .itemmenubottomcolend{
        display:block !important;
        grid-column:1 / -1;
    }

    .itemmenubottomcol > div > div:first-child,
    .itemmenubottomcolend > div > div:first-child{
        height:auto;
        margin:0 0 6px;
        font-size:14px;
        line-height:20px;
        white-space:normal;
    }

    .itemmenubottomcol > div > div:not(:first-child),
    .itemmenubottomcol > div > div:not(:first-child) a{
        height:auto;
        line-height:20px;
        white-space:normal;
    }

    /* hàng cao ~28px — đủ lớn để chạm bằng ngón tay */
    .itemmenubottomcol > div > div:not(:first-child){
        padding:4px 0;
    }

    .sticky-sidebar{
        display:none;
    }
}

/*  27.8  MÀN RẤT HẸP (< 375px, ví dụ 360px): thu nhỏ một nấc để hàng logo +
    3 nút có chữ vẫn vừa một hàng (bản 375–390px cần ~372px)  */
@media (max-width:374px){
    .hh-header__logo img{
        max-width:70px;
    }

    .hh-header__actions,
    .hh-header__actions.hh-flex{
        gap:8px;
    }

    .hh-header__actions .hh-action__icon{
        width:20px;
        height:20px;
    }

    .hh-header__actions .hh-action__text{
        font-size:10px;
        line-height:12px;
    }

    .hh-cart .hh-cart-count,
    .hh-header__actions .hh-cart-count{
        left:12px;
    }

    .hh-header__search{
        margin-left:152px;
    }

    .hh-mobile-category{
        width:144px;
    }

    .hh-mobile-category-toggle{
        padding:0 8px;
        font-size:11px;
    }
}