/* ══════════════════════════════════════════════════════════════════════════
   LONG CHÂU REDESIGN LAYER — Nhà Thuốc Bệnh Viện
   Bám theo LONGCHAU_DESIGN_SYSTEM.md (số THẬT) nhưng dùng BỘ 3 MÀU của mình.
   Đây là lớp OVERRIDE thuần CSS: KHÔNG đụng markup, KHÔNG đụng clone-cart.js.
   Load SAU cùng trong <head> → thắng mọi style theme cũ + inline listing.
   ─────────────────────────────────────────────────────────────────────────
   BỘ 3 MÀU:
     - Xanh dương (header/nav/link)  : #00559A  (primary blue)
     - Xanh lá (CTA/nút)             : #39B54A → #2FA35A (gradient)
     - Đỏ (giá nhấn + badge)         : #E53935 → #FF6B5E
     - Nền phụ                       : #F4F9F6 ; Text chính #222244 ; phụ #6B7280
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --lc-blue:#00559A;      --lc-blue-2:#0A6BC0;
  --lc-green:#39B54A;     --lc-green-2:#2FA35A;
  --lc-red:#E53935;       --lc-red-2:#FF6B5E;
  --lc-ink:#222244;       --lc-sub:#6B7280;
  --lc-bg:#F4F9F6;        --lc-line:#E7ECF0;
  --lc-radius-card:12px;  --lc-radius-pill:50px;
  --lc-ease:cubic-bezier(0,0,.2,1);
  --lc-shadow-h:0 8px 24px rgba(0,85,154,.14);
  --lc-container:1280px;
}

/* ── 1. FONT: Inter toàn site ──────────────────────────────────────────────
   (link Google Fonts được inject trong <head> bởi assemble.py) */
html, body,
body, button, input, select, textarea,
h1,h2,h3,h4,h5,h6, p, a, span, div, li,
.product-title, .current-price, .original-price,
.pc-t, .pc-p, .cat-title, .ntv-top, .ntv-drop a,
.section-title h2, .ft-title{
  font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
}

/* ── 2. TYPOGRAPHY SCALE (đúng spec, màu token mình) ───────────────────────*/
body{ font-size:16px; font-weight:400; line-height:24px; color:var(--lc-ink); background:#fff; }
h1{ font-size:24px; font-weight:500; line-height:36px; color:var(--lc-ink); }
h2, .section-title h2{ font-size:18px; font-weight:600; line-height:24px; color:var(--lc-ink); letter-spacing:.045px; }
a{ color:var(--lc-blue); }
a:hover{ color:var(--lc-blue-2); }

/* Container 1280px */
.wrapper{ max-width:var(--lc-container) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   3. HEADER — NỀN TRẮNG, logo to rõ, GỌN 1 DÒNG (fix vỡ redesign)
      Tầng TOP  : [hotline trái] .......... [ô search pill phải]  (nền trắng)
      Tầng CENTER: [LOGO to trái] [nav ngang] [nút Giỏ hàng phải] (nền trắng)
      Nav chữ xanh trên nền trắng → đọc rõ, không tràn.
   ══════════════════════════════════════════════════════════════════════════ */
#header{ position:sticky; top:0; z-index:900; box-shadow:0 2px 10px rgba(0,0,0,.06); }

/* ── HEADER XANH kiểu Long Châu (điểm khác DUY NHẤT: dùng #00559A thay all-blue LC) ──
   Gradient xanh dương phủ cả 2 tầng top + center; chữ + icon trắng.
   Nav TÁCH RA thanh trắng riêng (.lc-navbar-strip) bên dưới. */
.desktop-header{
  background:linear-gradient(135deg,#0067B8 0%,var(--lc-blue) 55%,#003E73 100%) !important;
  position:relative;
}
.desktop-header-top{ background:transparent !important; padding:8px 0 2px; border-bottom:0; }
.desktop-header-center{ background:transparent !important; padding:6px 0 14px; }
.desktop-header .wrapper{ background:transparent !important; }

/* ── Tầng TOP: ép grid 2 nửa thành 1 dòng flex nowrap ── */
.desktop-header-top .inner > .grid{
  display:flex !important; flex-wrap:nowrap !important; align-items:center;
  gap:16px; margin:0 !important;
}
.desktop-header-top .grid__item.large--one-half{
  width:auto !important; float:none !important; padding:0 !important; margin:0 !important;
}
.desktop-header-top .grid__item.large--one-half:first-child{ flex:0 0 auto; }
.desktop-header-top .grid__item.large--one-half:last-child{ flex:1 1 auto; text-align:right; }

/* Utility bar (contact/hotline) — CHỮ TRẮNG trên nền xanh */
.hdt-left-contact{ color:rgba(255,255,255,.9); font-size:13px; white-space:nowrap; }
.hdt-left-contact a{ color:#fff !important; text-decoration:none; margin-right:4px; font-weight:600; }
.hdt-left-contact a:hover{ color:#EAF4FF !important; }
.hdt-left-contact i{ color:#fff; }

/* Login link — CHỮ TRẮNG, icon người, nằm hàng top phải */
.hdt-account a{ color:#fff !important; font-weight:600; font-size:14px; text-decoration:none; }
.hdt-account a:hover{ color:#EAF4FF !important; }
/* (bỏ) ::before webfont FA → ô vuông vì site dùng FA SVG-JS; icon đặt bằng <i> trong HTML */
.hdt-account a svg{ margin-right:6px; }

/* Ô SEARCH pill — nằm bên phải tầng top, rộng vừa phải
   ROOT CAUSE lỗi "cắt góc" (bằng chứng file:dòng suplo-style.scss.css):
     - :3594-3596  .search-form-wrapper{ border:solid 1px #ebebeb } → KHUNG XÁM THỪA lớp ngoài (chữ nhật, không bo).
     - :1410-1416  ...form{ width:450px;height:28px;border-radius:3px;overflow:hidden } → form CAO 28px + overflow:hidden
                   CẮT CỤT pill cao 44px; radius 3px lệch với pill; specificity ID cao thắng .ultimate-search.
     - :3610-3615  input#searchtext{ border-radius:30px } → input tự bo 30px lệch với form 3px → 2 lớp bo góc.
   FIX: gom về MỘT pill sạch. Bỏ khung ngoài + bỏ overflow/height/radius của form (dùng selector đủ mạnh để thắng suplo). */
.hdt-right-search{ max-width:520px; margin-left:auto; display:inline-block; width:100%; }

/* Bỏ KHUNG XÁM THỪA lớp ngoài (thắng suplo:3596) */
#header .desktop-header .desktop-header-top .hdt-right-search .search-form-wrapper,
.search-form-wrapper{
  position:relative; border:none !important; background:transparent !important; box-shadow:none !important;
}

/* form: bỏ overflow:hidden + height 28px + radius 3px cứng (thắng suplo:1410-1416) → không còn cắt cụt */
#header .desktop-header .desktop-header-top .hdt-right-search .search-form-wrapper form,
.searchform-categoris.ultimate-search{
  position:relative !important; width:100% !important; max-width:100% !important;
  height:auto !important; line-height:normal !important;
  border:none !important; border-radius:0 !important; overflow:visible !important; background:transparent !important;
}
.searchform-categoris.ultimate-search .wpo-search,
.searchform-categoris.ultimate-search .wpo-search-inner{ width:100%; background:transparent; border:none; }

/* MỘT lớp PILL DUY NHẤT — viền xanh dương, bo tròn 999px, cao 44px, overflow:visible */
#header .desktop-header .desktop-header-top .hdt-right-search .input-group,
.ultimate-search .input-group{
  display:flex !important; align-items:center; background:#fff !important;
  border:2px solid var(--lc-blue) !important; border-radius:999px !important; overflow:visible !important;
  box-shadow:0 2px 8px rgba(0,85,154,.08); height:44px !important; width:100% !important; max-width:100% !important;
  padding-right:5px;
}

/* input: trong suốt, không viền, không radius riêng (thắng suplo:3610-3615) */
#header .desktop-header .desktop-header-top .hdt-right-search .input-group input#searchtext,
.ultimate-search #searchtext, .ultimate-search .input-search{
  border:0 !important; outline:0 !important; height:40px !important; border-radius:0 !important;
  padding:0 8px 0 20px !important; font-size:14px !important; color:var(--lc-ink) !important;
  flex:1 1 auto; width:auto !important; background:transparent !important; box-shadow:none !important;
}
.ultimate-search #searchtext::placeholder{ color:#9AA3AE; }

/* nút kính lúp GỌN trong pill, không tràn mép */
#header .desktop-header .desktop-header-top .hdt-right-search .input-group span.input-group-btn,
.ultimate-search .input-group-btn{
  display:flex !important; align-items:center; justify-content:center;
  width:auto !important; height:auto !important; flex:0 0 auto; padding:0;
}
#header .desktop-header .desktop-header-top .hdt-right-search .input-group span.input-group-btn button,
.ultimate-search #searchsubmit{
  width:36px !important; height:36px !important; border:0 !important; border-radius:50% !important;
  background:linear-gradient(135deg,var(--lc-blue) 0%,var(--lc-blue-2) 100%) !important;
  color:#fff !important; cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; transition:all .3s var(--lc-ease);
}
.ultimate-search #searchsubmit:hover{ filter:brightness(1.08); transform:scale(1.05); }

/* (ĐIỂM 2) Hàng keyword gợi ý — HIỆN LẠI, căn giữa dưới ô search, chữ trắng (giống Long Châu) */
.lc-keywords{
  display:flex !important; flex-wrap:nowrap; justify-content:center; align-items:center;
  gap:0 15px; margin:9px 0 0 50%; padding:0; line-height:1.2;
  width:max-content; max-width:none; transform:translateX(-50%);
}
.lc-keywords a{
  color:#fff !important; font-size:13.5px; font-weight:400; text-decoration:none;
  white-space:nowrap; opacity:.95; transition:all .2s var(--lc-ease);
}
.lc-keywords a:hover{ opacity:1; text-decoration:underline; }

/* ── Tầng CENTER: logo trái + nav + cart trên 1 dòng ── */
.desktop-header-center .inner > .grid{
  display:flex !important; flex-wrap:nowrap !important; align-items:center;
  gap:20px; margin:0 !important;
}
.desktop-header-center .grid__item.large--two-twelfths{
  width:auto !important; float:none !important; padding:0 !important; margin:0 !important; flex:0 0 auto;
}
.desktop-header-center .grid__item.large--ten-twelfths{
  width:auto !important; float:none !important; padding:0 !important; margin:0 !important;
  flex:1 1 auto; position:static;
  display:flex !important; align-items:center; justify-content:flex-end; gap:16px; text-align:left;
}

/* LOGO to, rõ trên nền trắng — max-height 84px (thắng inline style max-height:60px của <img>) */
.hd-logo h1{ margin:0; }
.desktop-header-center .hd-logo,
.desktop-header-center .hd-logo > a{
  display:inline-block; overflow:visible !important; height:auto !important; line-height:0;
}
#header .desktop-header .desktop-header-center .hd-logo img,
.desktop-header-center .hd-logo img{
  max-height:84px !important; height:auto !important; width:auto !important;
}

/* Nav chiếm phần giữa, đẩy cart về sát phải */
.desktop-header-center .desktop-header-navbar{ flex:1 1 auto; }
.desktop-header-center .desktop-cart-wrapper{ flex:0 0 auto; margin-left:auto; }

/* Giỏ hàng — nút pill xanh gọn, icon + chữ + badge trên 1 dòng */
.desktop-cart-wrapper{ display:inline-block; }
/* GIỎ HÀNG = CTA điểm nhấn → nền XANH LÁ #39B54A, hover #2FA35A (LỖI 2: đưa xanh lá vào header) */
.desktop-cart-wrapper > .hd-cart{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:linear-gradient(135deg,var(--lc-green) 0%,var(--lc-green-2) 100%) !important; color:#fff !important;
  border-radius:var(--lc-radius-pill); padding:9px 16px; font-weight:600; font-size:14px;
  box-shadow:0 3px 10px rgba(57,181,74,.28); transition:all .3s var(--lc-ease); position:relative;
}
.desktop-cart-wrapper > .hd-cart:hover{
  background:linear-gradient(135deg,var(--lc-green-2) 0%,#279247 100%) !important;
  transform:translateY(-1px); box-shadow:0 5px 14px rgba(57,181,74,.38);
}
.desktop-cart-wrapper > .hd-cart i{ color:#fff; font-size:16px; }
.desktop-cart-wrapper > .hd-cart::after{ content:"Giỏ hàng"; font-weight:600; }
.hd-cart-count{
  background:var(--lc-red); color:#fff; border-radius:50%;
  min-width:20px; height:20px; line-height:20px; text-align:center;
  font-size:12px; font-weight:700; padding:0 2px; margin-left:2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV ngang danh mục — trên nền trắng, chữ xanh, 1 dòng ngang sạch
   ══════════════════════════════════════════════════════════════════════════ */
/* Ép nền navbar TRẮNG/trong suốt — thắng suplo-style.scss.css:4292
   (.desktop-header-navbar{background:var(--color-secondary=#00559A)!important}) */
.desktop-header-navbar,
#header .desktop-header .desktop-header-navbar{
  background:transparent !important; border-radius:0; margin:0; padding:0;
  box-shadow:none; text-align:left; float:none !important; width:auto; overflow:visible;
}
.ntv-nav{ display:flex; flex-wrap:nowrap; align-items:center; gap:2px; margin:0; padding:0; list-style:none; justify-content:flex-start; }
.ntv-item{ position:relative; }
.ntv-top{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:10px 14px; color:var(--lc-ink) !important; font-size:15px; font-weight:600;
  text-decoration:none; transition:all .2s var(--lc-ease); border-radius:8px;
}
/* Nav hover = nền XANH LÁ #39B54A chữ trắng (LỖI 2: điểm nhấn xanh lá trên nav) */
.ntv-top{ position:relative; }
.ntv-top:hover{ color:#fff !important; background:var(--lc-green) !important; }
.ntv-top i{ font-size:12px; opacity:.7; }
/* Dropdown */
.ntv-drop{
  position:absolute; top:100%; left:0; min-width:240px; background:#fff;
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.16);
  padding:8px 0; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .25s var(--lc-ease); z-index:950; border:1px solid var(--lc-line);
}
.ntv-item:hover .ntv-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.ntv-drop a{
  display:block; padding:9px 18px; color:var(--lc-ink) !important; font-size:14px;
  font-weight:500; text-decoration:none; transition:all .2s var(--lc-ease);
}
.ntv-drop a:hover{ background:var(--lc-bg); color:var(--lc-green) !important; padding-left:22px; }

/* ══════════════════════════════════════════════════════════════════════════
   4. HOMEPAGE sections — section title kiểu LC + grid
   ══════════════════════════════════════════════════════════════════════════ */
.section-title{ margin:28px 0 16px; }
.section-title h2{
  font-size:20px !important; font-weight:700 !important; color:var(--lc-ink) !important;
  position:relative; display:inline-block; padding-bottom:8px; text-transform:none;
}
.section-title h2::after{
  content:""; position:absolute; left:0; bottom:0; width:56px; height:3px;
  background:linear-gradient(90deg,var(--lc-green),var(--lc-blue)); border-radius:3px;
}
.section-title-border{ display:none; }

/* Tabs sản phẩm */
.hmp-tablinks1{
  background:#fff !important; color:var(--lc-sub) !important; border:1px solid var(--lc-line) !important;
  border-radius:var(--lc-radius-pill) !important; padding:8px 20px !important; margin:0 4px 8px !important;
  font-weight:600 !important; font-size:14px !important; transition:all .3s var(--lc-ease) !important; cursor:pointer;
}
.hmp-tablinks1:hover{ border-color:var(--lc-green) !important; color:var(--lc-green) !important; }
.hmp-tablinks1.active, .hmp-tablinks1[style*="block"]{ }
.tab .hmp-tablinks1.active{
  background:linear-gradient(135deg,var(--lc-green),var(--lc-green-2)) !important;
  color:#fff !important; border-color:transparent !important;
}

/* Home policy / service icons */
#home-policy .hservice-item{ background:var(--lc-bg); border-radius:12px; padding:14px; transition:all .3s var(--lc-ease); }
#home-policy .hservice-item:hover{ box-shadow:var(--lc-shadow-h); transform:translateY(-2px); }
#home-policy .hservice-title{ color:var(--lc-ink); font-weight:600; font-size:15px; }

/* ── 4b. BỐ CỤC TRANG CHỦ kiểu Long Châu (CSS override, KHÔNG đụng HTML) ──────
   Hiện trạng (bằng chứng index.html:971 + :4610):
     content = .grid__item large--nine-twelfths float-right (9/12, bên phải)
     sidebar = .grid__item large--three-twelfths (3/12, bên trái)
   → layout 2 cột có sidebar; Long Châu là DỌC full-width.
   FIX: dùng flex column trên #index-wrapper .grid → content full-width TRÊN,
        sidebar full-width DƯỚI (giữ nội dung categories/flashsale/testimonials,
        không xoá). Container 1280 căn giữa. */
#index-wrapper .wrapper{ max-width:var(--lc-container) !important; margin:0 auto !important; padding:0 16px !important; }
#index-wrapper .inner > .grid{
  display:flex !important; flex-direction:column !important; margin:0 !important;
}
#index-wrapper .inner > .grid > .grid__item.large--nine-twelfths{
  width:100% !important; float:none !important; padding:0 !important; order:1;
}
#index-wrapper .inner > .grid > .grid__item.large--three-twelfths{
  width:100% !important; float:none !important; padding:0 !important; order:2;
  margin-top:8px;
}
/* Sidebar khi xuống dưới: các block xếp ngang thoáng như section (không dồn cột hẹp) */
#index-sidebar{ display:flex; flex-wrap:wrap; gap:16px; }
#index-sidebar > div{ flex:1 1 300px; min-width:280px; }
#index-sidebar > #index-sidebar-flashsale{ flex:1 1 100%; }

/* Section chung: cách đều dọc, khối bo góc trên nền trắng */
#home-collection-tabs, #home-brands, #home-small-collections, #home-articles, #home-banner{
  padding:32px 0 !important;
}
/* Section xen kẽ nền off-white cho dễ phân biệt */
#home-brands, #home-articles{ background:var(--lc-bg); border-radius:16px; padding:28px 20px !important; margin:24px 0 !important; }

/* Hero: full-bleed nên BỎ bo góc để sát 2 mép; #home-banner giữ bo góc */
#home-banner > a{ border-radius:16px; overflow:hidden; }
#hero-slider .hero-slide-content .hero-content{ text-shadow:0 2px 10px rgba(0,0,0,.45); }
#hero-slider .hero-slide-content .hero-content .slide-message h4{ color:#fff !important; }

/* ── HERO BANNER: FULL-BLEED + HEIGHT THẤP + CHỐNG FOUC ──────────────────────
   ROOT CAUSE (bằng chứng file:dòng):
     1) FLASH/FOUC khi F5:
        - site/index.html:809,840,871,902 → 4 <div class="hero-slide"
            style="...; height:500px;">  (mỗi slide cao 500px inline)
        - site/index.html:939 → $('#hero-slider').slick({fade:true, dots:true...})
            chạy trong $(document).ready → CHẠY SAU khi HTML render.
        - suplo-style.scss.css:1980 #hero-slider .hero-slide KHÔNG position:absolute
            trước init → 4 slide xếp CHỒNG DỌC full-height ⇒ hero cao ~2000px,
            hiện "to đùng/xếp chồng" rồi slick gắn .slick-initialized mới co lại.
        FIX: (a) ép height container CỐ ĐỊNH ngay từ CSS (không chờ JS reflow);
             (b) trước .slick-initialized → ẩn mọi slide trừ slide đầu.
     2) HEIGHT TO: css cũ clamp(360,56vw,860) → giảm ~1 nửa.
     3) LETTERBOX/VIỀN: css cũ background-size:contain + background-color:#eef4fb
        → viền xanh 2 bên. Đổi cover + bỏ nền. Full-bleed thoát #index-wrapper
        (hero nằm NGOÀI wrapper: index.html:800 vs #index-wrapper:967). */

/* (VIỆC 3) FULL-BLEED: hero phủ trọn chiều ngang viewport, sát 2 mép */
#hero-slider{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  /* (VIỆC 2) height container CỐ ĐỊNH ngay từ CSS ⇒ không reflow khi slick init */
  height:clamp(180px, 28vw, 430px) !important;
  overflow:hidden !important;
  background:#eef4fb;                 /* nền tạm trong lúc ảnh đầu load, không letterbox 2 bên vì slide cover */
}

/* (VIỆC 2) height slide + slick-list/track = nửa cũ */
#hero-slider .hero-slide{
  height:clamp(180px, 28vw, 430px) !important;   /* ~1 nửa 360-860 → thấp kiểu Long Châu */
  background-size:cover !important;               /* (VIỆC 3) phủ đầy, bỏ letterbox */
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;        /* bỏ fixed gây lệch/cắt */
}
#hero-slider .slick-list, #hero-slider .slick-track{ height:clamp(180px,28vw,430px) !important; }

/* (VIỆC 1) CHỐNG FOUC: trước khi slick gắn .slick-initialized → chỉ hiện slide đầu.
   slick gắn class .slick-initialized vào chính $('#hero-slider') (init trên nó). */
#hero-slider:not(.slick-initialized) .hero-slide{ display:none !important; }
#hero-slider:not(.slick-initialized) .hero-slide:first-child{ display:block !important; }

/* overlay gradient để chữ vẫn đọc rõ trên ảnh cover */
#hero-slider .hero-slide .hero-slide-overlay{
  background:linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%) !important;
  z-index:1 !important;
}
#hero-slider .hero-slide .hero-slide-content{ z-index:2 !important; padding:16px !important; }
/* banner thấp → thu gọn overlay chữ cho cân */
#hero-slider .hero-slide .hero-slide-content .hero-content .slide-message h4{
  font-size:clamp(18px, 2.4vw, 34px) !important; margin:0 0 8px !important;
}
#hero-slider .hero-slide .hero-slide-content .hero-content .slide-message p{
  font-size:clamp(12px, 1.1vw, 15px) !important; line-height:1.4 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. CARD SẢN PHẨM — HOMEPAGE (.product-item) — anatomy Long Châu
   ══════════════════════════════════════════════════════════════════════════ */
.product-item{
  background:#fff; border:1px solid var(--lc-line); border-radius:var(--lc-radius-card);
  overflow:hidden; padding:0 0 12px; transition:all .3s var(--lc-ease); position:relative; height:100%;
}
.product-item:hover{ transform:translateY(-4px); box-shadow:var(--lc-shadow-h); border-color:transparent; }
.product-item .product-img{ position:relative; border-radius:var(--lc-radius-card) var(--lc-radius-card) 0 0; overflow:hidden; }
.product-item .product-img > a{ display:block; aspect-ratio:1/1; }
.product-item .product-img img{ width:100%; height:100%; object-fit:contain; padding:10px; }

/* Badge % giảm — gradient ĐỎ, góc trên-trái, bo góc phải-dưới */
.product-item .tag-saleoff{
  position:absolute; top:0; left:0; z-index:3;
  background:linear-gradient(295deg,var(--lc-red) 0%,var(--lc-red-2) 100%) !important;
  color:#fff !important; font-size:12px; font-weight:700; line-height:1;
  padding:5px 9px; border-radius:0 0 12px 0 !important; margin:0 !important;
}

/* Tên SP 14/600 clamp-3 dòng */
.product-item .product-item-info{ padding:10px 12px 0; text-align:left; }
.product-item .product-title{ margin:0 0 8px; min-height:60px; }
.product-item .product-title a{
  color:var(--lc-ink) !important; font-size:14px; font-weight:600; line-height:20px;
  text-decoration:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-item .product-title a:hover{ color:var(--lc-blue) !important; }

/* Giá bán ĐỎ đậm + giá gốc gạch xám */
.product-item .product-price{ text-align:left; }
.product-item .current-price{
  color:var(--lc-red) !important; font-size:17px !important; font-weight:700 !important; margin-right:8px;
}
.product-item .original-price, .product-item .original-price s{
  color:var(--lc-sub) !important; font-size:13px; font-weight:400; text-decoration:line-through;
}

/* Nút hành động (.product-actions nằm TRONG .product-img → kéo xuống flow dưới ảnh).
   ROOT CAUSE nút không hiện (bằng chứng suplo-style.scss.css:2946-2977):
     - :2946  .product-actions{ position:absolute; bottom:0 } → overlay đè ảnh, ẩn.
     - :2970-2977 từng button có transform:translateX(-150px)/translateX(150px)/translateY(150px)
                  → nút bị ĐẨY KHUẤT ngoài khung; chỉ :hover mới translate(0).
     - :2907 .product-img{ } + redesign:269 overflow:hidden → cắt nút nếu còn translate.
   FIX: ép actions static full-width + RESET transform từng button (specificity ≥ suplo 0,4,1). */
.product-item .product-img{ overflow:visible !important; }
.product-item .product-img .product-actions{
  position:static !important; opacity:1 !important; visibility:visible !important;
  padding:10px 12px 0 !important; margin-top:6px; background:transparent !important;
  transform:none !important; left:auto; right:auto; bottom:auto; overflow:visible !important;
}
.product-item .product-img .product-actions > div{
  display:flex !important; gap:6px; align-items:stretch; padding:0 !important; width:100%;
}
/* RESET transform bị suplo đẩy khuất — thắng suplo:2970-2977 (cùng cấp specificity) */
.product-item .product-img .product-actions > div > button{
  transform:none !important; float:none !important; margin-right:0 !important;
  height:38px !important; line-height:1 !important;
}
/* Nút "Chọn mua" (add-to-cart) full-width gradient lá pill — GIỮ class .btnAddToCart + data-id */
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart{
  flex:1 1 auto; width:auto !important; padding:0 !important; border:0 !important; cursor:pointer;
  background:linear-gradient(315deg,var(--lc-green) 0%,var(--lc-green-2) 100%) !important;
  color:#fff !important; border-radius:var(--lc-radius-pill) !important;
  font-size:14px; font-weight:600; display:flex !important; align-items:center; justify-content:center; gap:6px;
  transition:all .3s var(--lc-ease); box-shadow:0 3px 10px rgba(57,181,74,.28);
}
/* Ẩn TRIỆT ĐỂ icon giỏ (fa-cart-plus): font-size:0 nuốt glyph trong <span>,
   rồi hiện lại chữ "Chọn mua" qua ::after với font-size riêng (thắng mọi .fa::before) */
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span{ font-size:0 !important; }
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart i,
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart i::before{ display:none !important; font-size:0 !important; content:"" !important; width:0; }
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span::after{ content:"Chọn mua"; font-size:14px !important; font-weight:600; }
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart:hover{ filter:brightness(.95); transform:translateY(-1px) !important; box-shadow:0 5px 14px rgba(57,181,74,.36); }
/* Nút Mua ngay — viền xanh dương, GIỮ data-id */
.product-item .product-img .product-actions > div > button.btnBuyNow.buy-now{
  flex:1 1 auto; padding:0 12px !important; border:1.5px solid var(--lc-blue) !important;
  background:#fff !important; color:var(--lc-blue) !important; border-radius:var(--lc-radius-pill) !important;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .3s var(--lc-ease); white-space:nowrap;
}
.product-item .product-img .product-actions > div > button.btnBuyNow.buy-now:hover{ background:var(--lc-blue) !important; color:#fff !important; }
/* QuickView — ẨN trên card listing (Long Châu không có; giữ nút to gọn 2 CTA) */
.product-item .product-img .product-actions > div > button.btnQuickView{ display:none !important; }
.product-item .product-img .product-actions > div > button.btnQuickView:hover{ border-color:var(--lc-blue) !important; color:var(--lc-blue) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   5b. CARD SẢN PHẨM — LISTING (.pc) — cùng anatomy, GIỮ onclick CloneCart
   ══════════════════════════════════════════════════════════════════════════ */
.cat-wrap{ max-width:var(--lc-container) !important; margin:20px auto !important; padding:0 16px !important; }
.cat-title{ font-size:24px !important; font-weight:600 !important; color:var(--lc-ink) !important; margin:12px 0 6px !important; }
.pc-note{ color:var(--lc-sub); font-size:14px; }
.prod-grid{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important;
}
.pc{
  border:1px solid var(--lc-line) !important; border-radius:var(--lc-radius-card) !important;
  padding:0 0 12px !important; background:#fff !important; display:flex !important; flex-direction:column !important;
  transition:all .3s var(--lc-ease) !important; overflow:hidden;
}
.pc:hover{ transform:translateY(-4px); box-shadow:var(--lc-shadow-h) !important; border-color:transparent !important; }
.pc-img{ aspect-ratio:1/1 !important; border-radius:var(--lc-radius-card) var(--lc-radius-card) 0 0 !important; }
.pc-img img{ padding:10px; object-fit:contain !important; }
.pc-t{
  color:var(--lc-ink) !important; font-size:14px !important; font-weight:600 !important; line-height:20px !important;
  margin:8px 12px 6px !important; min-height:60px !important; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-t:hover{ color:var(--lc-blue) !important; }
.pc-p{ color:var(--lc-red) !important; font-weight:700 !important; font-size:17px !important; margin:0 12px 10px !important; }
.pc-btns{ display:flex; gap:6px; margin:auto 12px 0 !important; }
/* Nút "Thêm giỏ" (pc-add) full-width gradient lá pill — GIỮ onclick CloneCart.add */
.pc-btn.pc-add{
  flex:1 1 auto; margin-top:0 !important;
  background:linear-gradient(315deg,var(--lc-green) 0%,var(--lc-green-2) 100%) !important;
  color:#fff !important; border:0 !important; border-radius:var(--lc-radius-pill) !important;
  padding:10px !important; font-size:14px !important; font-weight:600 !important; cursor:pointer;
  transition:all .3s var(--lc-ease) !important; box-shadow:0 3px 10px rgba(57,181,74,.28);
}
.pc-btn.pc-add:hover{ filter:brightness(.95); transform:translateY(-1px); }
/* Nút "Mua ngay" (pc-buy) viền xanh — GIỮ onclick CloneCart.buyNow */
.pc-btn.pc-buy{
  margin-top:0 !important; background:#fff !important; color:var(--lc-blue) !important;
  border:1.5px solid var(--lc-blue) !important; border-radius:var(--lc-radius-pill) !important;
  padding:10px 12px !important; font-size:13px !important; font-weight:600 !important; cursor:pointer;
  transition:all .3s var(--lc-ease) !important; white-space:nowrap;
}
.pc-btn.pc-buy:hover{ background:var(--lc-blue) !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   5c. PRODUCT DETAIL — giá đỏ + nút Long Châu (GIỮ class .btnAddToCart/.btnBuyNow)
   ══════════════════════════════════════════════════════════════════════════ */
.product-single .current-price.ProductPrice,
.product-single .current-price{ color:var(--lc-red) !important; font-weight:700 !important; }
.product-single .compare-price, .product-single .original-price{ color:var(--lc-sub) !important; text-decoration:line-through; }
.btnAddToCart:not(.add-to-cart), #AddToCart.btnAddToCart{
  background:linear-gradient(315deg,var(--lc-green) 0%,var(--lc-green-2) 100%) !important;
  color:#fff !important; border:0 !important; border-radius:42px !important; font-weight:600 !important;
  transition:all .3s var(--lc-ease) !important;
}
.btnAddToCart:not(.add-to-cart):hover{ filter:brightness(.95); }
.btnBuyNow:not(.buy-now), #buy-now.btnBuyNow{
  background:#fff !important; color:var(--lc-blue) !important; border:1.5px solid var(--lc-blue) !important;
  border-radius:42px !important; font-weight:600 !important; transition:all .3s var(--lc-ease) !important;
}
.btnBuyNow:not(.buy-now):hover{ background:var(--lc-blue) !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   6. FOOTER — nền tối, tiêu đề cột 12/700 UPPERCASE
   ══════════════════════════════════════════════════════════════════════════ */
#footer{ background:#0B2A46; color:#C6D3DF; }
#footer .footer-content{ background:transparent; padding:36px 0 20px; }
#footer .ft-title{
  font-size:13px !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.24px; color:#fff !important; margin-bottom:14px !important; position:relative; padding-bottom:8px;
}
#footer .ft-title::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--lc-green); }
#footer a{ color:#C6D3DF !important; transition:color .2s var(--lc-ease); }
#footer a:hover{ color:var(--lc-green) !important; }
#footer .ft-contact-desc, #footer .list-addr, #footer .ft-contact-detail{ color:#AEBECD; font-size:13px; line-height:22px; }
#footer .ft-contact-icon i{ color:var(--lc-green); }
#footer .ft-contact-tel a{ color:#fff !important; font-weight:700; font-size:16px; }
#footer .ft-social a{
  display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border-radius:50%; margin-right:8px; color:#fff !important;
  transition:all .3s var(--lc-ease);
}
#footer .ft-social a:hover{ background:var(--lc-green); }
#footer .ft-sub-wrapper input[type=email]{
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff;
  border-radius:8px 0 0 8px; padding:10px 12px;
}
#footer .ft-sub-wrapper button{ background:var(--lc-green); border:0; color:#fff; border-radius:0 8px 8px 0; padding:0 14px; }
.footer-copyrights{ background:#081E33; color:#8FA3B4; padding:12px 0; }
.footer-copyrights a{ color:#B9C7D6 !important; }
.footer-copyrights a:hover{ color:var(--lc-green) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   7. HIỆU ỨNG chung + responsive
   ══════════════════════════════════════════════════════════════════════════ */
.product-item, .pc, .hservice-item, .ntv-drop,
.btnAddToCart, .btnBuyNow, .pc-btn, .hd-cart, .hmp-tablinks1{
  transition:all .3s var(--lc-ease);
}

/* Mobile header (giữ nền xanh) */
.mobile-header{ background:var(--lc-blue) !important; }
.mobile-header .hd-cart, .mobile-header .hd-btnMenu a{ color:#fff !important; }
.mobile-header .hd-cart i{ color:#fff !important; }
/* Logo mobile ~54px (vừa thanh header xanh) */
.mobile-header .hd-logo img{ max-height:54px !important; height:auto !important; width:auto !important; }

@media (max-width:1024px){
  .ntv-top{ padding:10px 12px; font-size:14px; }
}
@media (max-width:767px){
  .prod-grid{ grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .pc-btns{ flex-direction:column; }
  .pc-t, .pc-p{ margin-left:8px !important; margin-right:8px !important; }
  h1, .cat-title{ font-size:20px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LỚP "GIỐNG HỆT LONG CHÂU" — 8 điểm lệch (2026-08-23)
   Đối chiếu ảnh: docs/nhathuocbenhvien/longchau-shots/01-home.png
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (ĐIỂM 1) HEADER: ô search TO + CĂN GIỮA ─────────────────────────────── */
/* Tầng center = [logo trái] [search giữa co giãn] [cart phải] */
#header .desktop-header-center .grid__item.large--ten-twelfths{
  justify-content:space-between !important; gap:24px !important; flex:1 1 auto !important;
}
.lc-header-search-cell{
  flex:1 1 auto !important; width:auto !important; float:none !important;
  padding:0 !important; margin:0 !important; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* ô search: to hơn (680px, cao 48px) và CĂN GIỮA thay vì dính phải */
#header .desktop-header .hdt-right-search,
.hdt-right-search{
  max-width:680px !important; width:100% !important;
  margin:0 auto !important; display:block !important; float:none !important;
}
#header .desktop-header .hdt-right-search .input-group,
.ultimate-search .input-group{
  height:48px !important; border:0 !important;
  box-shadow:0 4px 14px rgba(0,0,0,.18) !important; padding-right:6px !important;
}
#header .desktop-header .hdt-right-search .input-group input#searchtext,
.ultimate-search #searchtext{ height:44px !important; font-size:15px !important; padding-left:22px !important; }
#header .desktop-header .hdt-right-search .input-group span.input-group-btn button,
.ultimate-search #searchsubmit{ width:38px !important; height:38px !important; }
/* dropdown gợi ý bám đúng ô search */
.lc-header-search-cell .search-form-wrapper{ width:100%; }
/* logo to rõ trên nền xanh */
#header .desktop-header .desktop-header-center .hd-logo img{ max-height:64px !important; }
.desktop-header-center .grid__item.large--two-twelfths{ flex:0 0 auto !important; }
/* Giỏ hàng giữ bên phải */
#header .desktop-header-center .desktop-cart-wrapper{ flex:0 0 auto !important; margin-left:0 !important; }

/* ── (ĐIỂM 3) THANH NAV DANH MỤC NGANG RIÊNG — nền TRẮNG dưới header xanh ── */
.lc-navbar-strip{
  background:#fff !important;
  border-bottom:1px solid var(--lc-line);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.lc-navbar-strip > .wrapper{
  max-width:var(--lc-container) !important; margin:0 auto !important; padding:0 16px !important;
}
.lc-navbar-strip .desktop-header-navbar{ width:100% !important; }
.lc-navbar-strip .ntv-nav{
  justify-content:space-between !important; gap:4px !important; width:100%;
}
.lc-navbar-strip .ntv-top{
  padding:14px 10px !important; font-size:15px !important; font-weight:500 !important;
  color:var(--lc-ink) !important; border-radius:0 !important;
}
.lc-navbar-strip .ntv-item:hover > .ntv-top,
.lc-navbar-strip .ntv-top:hover{
  color:var(--lc-blue) !important; background:transparent !important;
  box-shadow:inset 0 -3px 0 var(--lc-green);
}
.lc-navbar-strip .ntv-drop{ border-top:3px solid var(--lc-blue); }

/* ── (ĐIỂM 4+5) HERO: CHỮ TRÁI / HÌNH PHẢI + nền gradient xanh ───────────── */
#hero-slider{ background:linear-gradient(100deg,#003E73 0%,#00559A 45%,#0067B8 100%) !important; }
#hero-slider .hero-slide{
  background-color:transparent !important;
  background-size:auto 100% !important;         /* ảnh nằm nửa phải, không crop chiều cao */
  background-position:right center !important;
  background-repeat:no-repeat !important;
}
/* ── LỚP PHỦ XANH (2026-08-24) — GIẢM ÁM XANH ĐỂ NHÌN THẤY ẢNH ────────────
   Sếp: "cho ít cái ám xanh thôi để còn nhìn thấy ảnh".

   TRƯỚC (bản backup-live/longchau-redesign.css.PRE-HERO-20260824:646):
       #003E73 0%, #00559A 30%, rgba(0,85,154,.92) 42%,
       rgba(0,85,154,.55) 52%, rgba(0,85,154,0) 66%
   → 2 chặng đầu là màu ĐẶC (alpha = 1): 30% bề ngang bên trái bị sơn kín,
     ảnh dược sĩ mất hẳn ở mobile (ảnh cover phủ full width).

   WHY dùng GRADIENT chứ không hạ overlay phẳng — đo bằng
   scratchpad/hero_contrast.py (mô phỏng đúng 3 lớp: gradient #hero-slider →
   ảnh hero-N.jpg → lớp phủ này; nội suy premultiplied alpha như CSS):
   - Hạ đều xuống ~.45 thì mép PHẢI của dải chữ tụt dưới 4,5:1 khi nền ảnh
     sáng (áo blouse trắng, kệ thuốc). Kiểm chứng "tệ nhất tuyệt đối" — coi
     như ảnh dưới lớp phủ là TRẮNG TINH: bản TRƯỚC chỉ được 3,86:1 ở 430px.
   - Nên: ĐẬM đều ở dải CÓ CHỮ (0→48% desktop / 0→66% ≤1024, alpha .70–.74),
     rồi TỤT NHANH ở dải CHỈ CÓ ẢNH.
   - Màu scrim đổi sang navy #002B52/#00376 4 (tối hơn #00559A) → cùng một mức
     "thấy ảnh" nhưng che chữ tốt hơn, nên alpha để thấp hơn được.

   VÌ SAO ĐUÔI GRADIENT NGẮN LẠI (vòng 2, sửa hồi quy của vòng 1):
   Vòng 1 kéo đuôi tới 86%/94% → alpha trung bình PHỦ LÊN VÙNG CÓ ẢNH tăng
   0,038 → 0,172 ở desktop (+357%), tức ám xanh NHIỀU HƠN bản cũ, ngược ý sếp.
   Ở >1024px chữ nằm trọn trên nền gradient xanh của #hero-slider, ảnh (đặt
   background-size:auto 100%; right center) mới bắt đầu ở ~57% bề ngang ⇒ đuôi
   lớp phủ tắt hẳn ở 68% là dư an toàn cho chữ mà trả lại ảnh gần như sạch.
   Số đo sau khi sửa (alpha TB trên vùng ảnh): desktop 0,027 · 430px 0,546.

   ĐO TƯƠNG PHẢN SAU KHI SỬA (chữ #fff, ngưỡng WCAG AA 4,5:1) — xấu nhất
   trong dải chữ, trên cả 3 ảnh hero: 1440px 11,0:1 · 1024px 5,6:1 ·
   430px 5,5:1 · 393px 5,5:1. Kể cả khi giả định ảnh dưới lớp phủ TRẮNG TINH
   vẫn đạt: 4,66 / 5,53 / 5,36 / 5,37:1. */
#hero-slider .hero-slide .hero-slide-overlay{
  position:absolute !important; inset:0 !important;
  background:linear-gradient(90deg,
      rgba(0,43,82,.72) 0%, rgba(0,45,86,.70) 48%, rgba(0,54,100,.40) 55%,
      rgba(0,70,128,.10) 61%, rgba(0,85,154,0) 68%) !important;
  z-index:1 !important;
}
/* ROOT CAUSE lệch trái: suplo-style.scss.css:1994-2000 đặt
   .hero-slide-content{top:50%;left:50%;transform:translate(-50%,-50%);width:60%}
   → chỉ ghi đè top/left mà QUÊN transform ⇒ nội dung bị đẩy -50% ra ngoài màn hình.
   FIX: reset transform:none + width:100%. */
#hero-slider .hero-slide .hero-slide-content{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  transform:none !important; -webkit-transform:none !important;
  width:100% !important; display:flex !important; align-items:center !important;
  padding:0 !important; z-index:2 !important;
}
#hero-slider .hero-slide .hero-slide-content > .wrapper{
  max-width:var(--lc-container) !important; width:100% !important; margin:0 auto !important; padding:0 16px !important;
}
/* CHỮ TRÁI (thay text-center) */
#hero-slider .hero-content.lc-hero-left,
#hero-slider .hero-content{
  text-align:left !important; max-width:46% !important; margin:0 !important;
  /* lớp phủ đã nhạt đi nên bóng chữ dày thêm (.35 → .55) để viền chữ tách khỏi
     hoạ tiết ảnh. WCAG KHÔNG tính text-shadow vào contrast ratio — đây chỉ là
     lớp bảo hiểm thị giác, ratio 4,5:1 vẫn phải do lớp phủ gánh. */
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
#hero-slider .hero-content .slide-message h4{
  font-size:clamp(20px,2.6vw,38px) !important; line-height:1.2 !important;
  font-weight:700 !important; color:#fff !important; margin:0 0 10px !important;
}
#hero-slider .hero-content .slide-message p{
  color:rgba(255,255,255,.92) !important; font-size:clamp(12px,1.05vw,15px) !important;
  line-height:1.5 !important; margin:0 0 14px !important;
  /* (2026-09-03) BỎ -webkit-line-clamp/overflow:hidden — founder: "che thì
     vẫn phải hiển thị được nội dung chứ, sao lại ... thế này" (mô tả dài
     nhất — slide 2 — bị cắt còn "...trang thiết bị y tế, dược m..."). KHÔNG
     giới hạn số dòng nữa; khối .hero-content cao tự nhiên theo nội dung.
     Bù chỗ bằng: (a) tăng chiều cao banner desktop/tablet-ngang (media
     min-width:769px dưới), (b) giảm cỡ chữ tiêu đề+mô tả một chút — xem
     khối đo đạc kèm bảng số liệu ngay dưới. Ở ≤768px .medium--hide
     .small--hide (timber.scss.css:453,580) đã ẩn hẳn <p> này từ theme gốc
     (không phải bug mới) nên bỏ line-clamp ở đây KHÔNG đổi gì trên mobile. */
}
/* .slide-button/nút "Xem thêm" đã bỏ khỏi HTML (2026-09-03, yêu cầu founder)
   ⇒ xoá luôn CSS liên quan, không để dead code (site/index.html không còn
   phần tử nào mang class .slide-button — grep "slide-button" site/ = 0). */

/* ── (2026-09-03) HERO DESKTOP >1024px: LỚP XANH CHỈ CÒN ~1/3 (yêu cầu
   founder: banner đang bị 1 lớp xanh đậm che gần 50% bề ngang, ảnh chỉ còn
   hiện một nửa — ảnh chụp desktop).
   ROOT CAUSE (đo bằng getComputedStyle thật qua Playwright, không đoán):
   >1024px .hero-slide dùng background-size:auto 100%; position:right center
   (dòng 636-641) ⇒ ảnh (giữ nguyên tỉ lệ gốc, neo phải) chỉ rộng ra được
   tới ~57% bề ngang; đo tại 1440px maxWidth chữ = 46%, overlay tắt hẳn ở
   68% — nhưng 0-57% KHÔNG CÓ PIXEL ẢNH NÀO (chỉ là nền gradient xanh đặc
   #hero-slider dòng 635), dù chỉnh overlay thế nào cũng không đổi được:
   đó chính là "lớp xanh che gần nửa banner" founder thấy.
   FIX: >1024px đổi sang background-size:cover (giống mobile đang làm ở
   dòng 849, đã kiểm chứng nhìn ổn) để ảnh phủ TRỌN bề ngang, rồi thu hẹp
   overlay + max-width chữ còn ~1/3 bên trái.
   ĐO (scratchpad hero_contrast_new.py, cùng công thức hero_contrast_check.py
   gốc — nội suy gradient premultiplied-alpha, WCAG AA 4,5:1):
     - dải chữ 0–29,2% bề ngang (max-width:26%)
     - ảnh "sạch" (overlay alpha<0,05) từ 35,5% ⇒ ảnh chiếm 64,5% bề ngang
     - tương phản chữ trắng/nền xấu nhất trong dải chữ: hero-1 6,05:1 ·
       hero-2 6,15:1 · hero-3 5,59:1 — cả 3 ĐẠT AA
     - trường hợp tệ nhất tuyệt đối (ảnh dưới lớp phủ giả định TRẮNG TINH,
       phòng ảnh hero tương lai): 5,42:1 — ĐẠT
   CHỈ áp dụng ≥1025px — 1024px trở xuống (tablet/mobile) giữ NGUYÊN như
   cũ (founder: "mobile đang đẹp thì giữ y nguyên"; đã đo getComputedStyle
   xác nhận tablet/mobile hiện dùng nhánh CSS riêng ở dòng 1112-1144,
   không đụng tới). */
@media (min-width:1025px){
  #hero-slider .hero-slide{
    background-size:cover !important;
    background-position:center !important;
  }
  #hero-slider .hero-slide .hero-slide-overlay{
    background:linear-gradient(90deg,
        rgba(0,35,68,.92) 0%, rgba(0,38,74,.90) 22%, rgba(0,42,80,.82) 28%,
        rgba(0,55,100,.35) 32%, rgba(0,85,154,0) 36%) !important;
  }
  #hero-slider .hero-content.lc-hero-left,
  #hero-slider .hero-content{
    max-width:26% !important;
  }
}

/* ── (2026-09-03) OVERLAY BÁM PIXEL THẬT ở ≥1280px — FIX CONTRAST FAIL PHÁT
   HIỆN BẰNG ĐO THẬT (contrast_bg2.mjs, sample đúng glyph qua Range.get
   ClientRects, không đoán): ở 1920x1080 contrast tụt còn 1.7–3.85:1 (rớt
   WCAG AA 4,5:1) tại rìa phải cột chữ — ẢNH nền sáng lộ ra dưới chữ.
   ROOT CAUSE (đo bằng getBoundingClientRect, khớp công thức tính tay):
   .wrapper có max-width:var(--lc-container)=1280px (dòng 23) — khi viewport
   ≥1280px, .hero-content bị khoá ở VỊ TRÍ PIXEL CỐ ĐỊNH, NHƯNG padding 2
   bên của .wrapper đổi theo mốc 1392px (dòng 1227-1229: ≤1392px padding
   76px để chừa mũi tên slick; ≥1393px padding 16px) ⇒ 2 công thức khác
   nhau cho content_right(px):
     1280–1392px (padding 76): content_right = viewport/2 − 240
     ≥1393px     (padding 16): content_right = viewport/2 − 300
       (đo: 1440→420px=29,2% · 1920→660px=34,4% — khớp công thức)
   Overlay cũ viết bằng %-của-viewport (90deg) nên viewport càng rộng,
   content_right(px) CỐ ĐỊNH ⇒ %-của-viewport của nó càng TĂNG dần về 50%,
   trong khi overlay tắt hẳn (alpha 0) ở mốc % CỐ ĐỊNH (36%) ⇒ màn càng
   rộng, mép chữ càng trôi ra vùng overlay đã nhạt (thử vá 1 công thức
   chung cho cả ≥1280px lúc đầu → ĐO LẠI phát hiện FAIL riêng ở dải
   1280–1392 vì lệch 60px do padding 76 khác 16 — sửa thành 2 dải).
   FIX: neo overlay theo calc(50% − Npx) thay vì %-thuần — 50% của chính
   overlay (full slide width ≈ viewport) trừ hằng số px tái tạo ĐÚNG
   content_right(px) theo từng dải. Hằng số suy từ 5 mốc % gốc tại vp=1440
   (720−mốc%×1440, anchor=300): 22%→103px·28%→17px·32%→(−41px)·36%→(−98px);
   dải 1280–1392 dùng cùng offset nhưng anchor=240 (thay 300, lệch đúng
   60px = 76−16 do padding). */
@media (min-width:1280px) and (max-width:1392px){
  #hero-slider .hero-slide .hero-slide-overlay{
    background:linear-gradient(90deg,
        rgba(0,35,68,.92) 0%,
        rgba(0,38,74,.90) calc(50% - 343px),
        rgba(0,42,80,.82) calc(50% - 257px),
        rgba(0,55,100,.35) calc(50% - 199px),
        rgba(0,85,154,0) calc(50% - 142px)) !important;
  }
}
@media (min-width:1393px){
  #hero-slider .hero-slide .hero-slide-overlay{
    background:linear-gradient(90deg,
        rgba(0,35,68,.92) 0%,
        rgba(0,38,74,.90) calc(50% - 403px),
        rgba(0,42,80,.82) calc(50% - 317px),
        rgba(0,55,100,.35) calc(50% - 259px),
        rgba(0,85,154,0) calc(50% - 202px)) !important;
  }
}
/* ĐO LẠI SAU FIX (contrast_bg2.mjs, cả 4 slide, 1280x800 + 1920x1080):
   minRatio 5,3–11,4:1, KHÔNG còn <4,5:1 — xem bảng trong báo cáo. */

/* ── (2026-09-03) VÙNG p HIỂN THỊ (≥769px, medium--hide/small--hide chỉ ẩn
   <p> tới 768px — timber.scss.css:453,580) — BÙ CHỖ SAU KHI BỎ LINE-CLAMP.
   ĐO THẬT (measure.mjs, getBoundingClientRect trước khi sửa, slide 2 —
   mô tả dài nhất 340 ký tự — width cột chữ chỉ 324px ở 1440px):
     - h4 "Chuẩn mực về chất lượng sản phẩm và dịch vụ" ở font 38px/1.2 →
       WRAP 3 DÒNG (font quá to so với cột 324px) = 122px
     - p không line-clamp cần 8 dòng ở font 15px/1.5 = 189px
     - tổng h4+p+margin ≈ 335px, chỗ trống từ content tới dots chỉ 233px
       (content.y=264, dots.y=497 @1440x900) ⇒ THIẾU ~102px nếu không sửa gì.
   FIX (2 mũi, không nới max-width ngang vì đã đo an toàn không đè mặt ở
   26% — nới rộng ra sẽ chồng mặt dược sĩ, xem ảnh before-slide1/4):
     1) HẠ cỡ chữ h4/p vừa đủ để h4 xuống còn 2 dòng, p đọc được mà không
        cần quá nhiều dòng (đo lại bằng measure.mjs sau khi áp dụng).
     2) TĂNG chiều cao banner (chỉ ≥769px — ≤768px giữ y nguyên clamp cũ
        180–360/23vw vì <p> vô hình ở đó, không cần thêm chỗ).
   Giá trị dưới đây đã ĐO LẠI THẬT sau khi áp dụng (không đoán) — xem bảng
   overflow=0 trong báo cáo thanhtra-reports/banner-hero-20260903. */
@media (min-width:769px){
  #hero-slider,
  #hero-slider .hero-slide,
  #hero-slider .slick-list, #hero-slider .slick-track{
    height:clamp(300px, 34vw, 520px) !important;
  }
  #hero-slider .hero-content .slide-message h4{
    font-size:clamp(17px, 1.9vw, 28px) !important; line-height:1.25 !important;
  }
  #hero-slider .hero-content .slide-message p{
    font-size:clamp(12px, 0.85vw, 13.5px) !important; line-height:1.42 !important;
  }
  /* nội dung có thể cao hơn slide (title ngắn 2 dòng + mô tả dài 6-7 dòng ở
     slide khác) → center dọc để không lệch, và chừa đáy cho dots (24px) */
  #hero-slider .hero-slide-content{ display:flex !important; align-items:center !important; }
  #hero-slider .hero-slide .hero-slide-content{ padding:20px 16px 34px !important; box-sizing:border-box !important; }
}
/* mũi tên + dots kiểu Long Châu */
#hero-slider .slick-prev, #hero-slider .slick-next{
  width:40px !important; height:40px !important; border-radius:50% !important;
  background:rgba(255,255,255,.9) !important; z-index:5 !important; box-shadow:0 2px 10px rgba(0,0,0,.18);
}
#hero-slider .slick-prev{ left:24px !important; } #hero-slider .slick-next{ right:24px !important; }
#hero-slider .slick-dots{ bottom:12px !important; }
/* Dot: theme gốc (suplo-style.scss.css:1956) vẽ mọi dot là vòng tròn viền
   trắng giống hệt nhau, chỉ khác opacity .6/1 → nhìn không ra dot nào đang
   chạy. Đổi thành: dot thường = vòng rỗng mờ, dot đang chạy = viên thuốc
   trắng đặc, dài gấp đôi ⇒ đọc được vị trí slide bằng cả hình dạng lẫn màu
   (không chỉ dựa vào màu — WCAG 1.4.1). */
#hero-slider .slick-dots li button:before{ display:none !important; }
#hero-slider .slick-dots li{ width:auto !important; height:auto !important; margin:0 4px !important; }
#hero-slider .slick-dots li button{
  width:9px !important; height:9px !important; padding:0 !important;
  border:1.5px solid rgba(255,255,255,.85) !important; border-radius:999px !important;
  background:transparent !important; transition:width .3s ease, background .3s ease;
}
#hero-slider .slick-dots li.slick-active button{
  width:22px !important; background:#fff !important; border-color:#fff !important;
}

/* ── (ĐIỂM 6) 2 BANNER PHỤ: trái 1 to + phải 2 nhỏ ───────────────────────── */
.lc-strip{ max-width:var(--lc-container); margin:0 auto; padding:0 16px; }
.lc-subbanners{
  display:grid; grid-template-columns:1.86fr 1fr; gap:16px; margin:16px auto 0;
}
.lc-subbanners .lc-sb-right{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.lc-sb{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  border-radius:14px; overflow:hidden; text-decoration:none; padding:20px 24px;
  transition:all .3s var(--lc-ease);
}
.lc-sb:hover{ transform:translateY(-2px); box-shadow:var(--lc-shadow-h); }
.lc-sb-big{ min-height:190px; background:linear-gradient(120deg,#0A6BC0 0%,#00559A 55%,#003E73 100%); }
.lc-sb-sm{ min-height:87px; }
.lc-sb-sm-1{ background:linear-gradient(120deg,#39B54A 0%,#2FA35A 100%); }
.lc-sb-sm-2{ background:linear-gradient(120deg,#3977BC 0%,#00559A 100%); }
.lc-sb .lc-sb-kicker{ color:rgba(255,255,255,.85); font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px; }
.lc-sb .lc-sb-title{ color:#fff; font-weight:700; line-height:1.25; }
.lc-sb-big .lc-sb-title{ font-size:28px; max-width:64%; }
.lc-sb-sm .lc-sb-title{ font-size:16px; }
.lc-sb .lc-sb-desc{ color:rgba(255,255,255,.9); font-size:13px; margin-top:6px; max-width:60%; }
.lc-sb-big .lc-sb-cta{
  margin-top:14px; align-self:flex-start; background:linear-gradient(135deg,var(--lc-green),var(--lc-green-2));
  color:#fff; font-weight:700; font-size:14px; padding:9px 22px; border-radius:var(--lc-radius-pill);
  box-shadow:0 5px 14px rgba(57,181,74,.3);
}
.lc-sb-icon{ position:absolute; right:16px; bottom:-6px; font-size:64px; color:rgba(255,255,255,.18); }
.lc-sb-big .lc-sb-icon{ font-size:120px; right:34px; bottom:-18px; }

/* ── (ĐIỂM 7) HÀNG 6 ICON SHORTCUT ───────────────────────────────────────── */
.lc-shortcuts{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin:16px auto 4px;
}
.lc-shortcut{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  background:#fff; border:1px solid var(--lc-line); border-radius:12px;
  padding:12px 12px; min-height:66px; transition:all .3s var(--lc-ease);
}
.lc-shortcut:hover{ border-color:var(--lc-green); box-shadow:var(--lc-shadow-h); transform:translateY(-2px); }
.lc-shortcut .lc-sc-ico{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff;
  background:linear-gradient(135deg,var(--lc-blue) 0%,var(--lc-blue-2) 100%);
}
.lc-shortcut:nth-child(2n) .lc-sc-ico{ background:linear-gradient(135deg,var(--lc-green),var(--lc-green-2)); }
.lc-shortcut .lc-sc-txt{
  font-size:14px; font-weight:600; color:var(--lc-ink); line-height:1.25;
}

/* ── (ĐIỂM 8) FLASHSALE FULL-WIDTH: header đỏ + countdown + grid nhiều cột ── */
#index-sidebar-flashsale{
  max-width:var(--lc-container); margin:24px auto 8px; padding:0 16px;
  float:none !important; width:100% !important;
}
#index-sidebar-flashsale > h3{
  display:flex !important; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg,var(--lc-red) 0%,#C62828 60%,var(--lc-red-2) 100%) !important;
  color:#fff !important; margin:0 !important; padding:16px 20px !important;
  border-radius:16px 16px 0 0 !important; border:0 !important;
  font-size:24px !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.5px;
  text-align:center !important; line-height:1.2 !important;
}
/* icon tia sét đặt bằng <i class="fas fa-bolt"> trong HTML — KHÔNG dùng ::before
   vì site nạp Font Awesome 5.0.6 bản SVG-JS (index.html:145) → không có webfont, ::before ra ô vuông */
#index-sidebar-flashsale > h3 svg, #index-sidebar-flashsale > h3 .fa-bolt{ color:#FFD54F; font-size:22px; }
/* countdown chèn bằng CSS-in-HTML (.lc-fs-count) */
.lc-fs-count{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#FFF3F2; border-left:1px solid #FFD9D6; border-right:1px solid #FFD9D6;
  padding:12px; font-size:14px; font-weight:600; color:var(--lc-ink);
}
.lc-fs-count b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:32px; border-radius:8px; background:var(--lc-red); color:#fff;
  font-size:16px; font-weight:700;
}
.lc-fs-count .lc-fs-sep{ color:var(--lc-red); font-weight:700; }
/* thân flashsale: khung trắng bo dưới */
#index-sidebar-flashsale .isb-flashsale-wrapper{
  background:#fff; border:1px solid var(--lc-line); border-top:0;
  border-radius:0 0 16px 16px; padding:16px 12px !important; margin:0 !important;
  position:relative;
}
/* owl: nhiều cột (JS đã đổi items:6) — ép item không bị bó hẹp */
#index-sidebar-flashsale #owl-home-featured-products-slider .item{
  padding:0 7px !important; width:auto !important; float:none !important;
}
#index-sidebar-flashsale .owl-buttons div{
  background:#fff !important; border:1px solid var(--lc-line) !important;
  width:34px; height:34px; border-radius:50%; color:var(--lc-blue) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.12); opacity:1 !important;
}
/* sidebar sau khi xuống dưới: flashsale KHÔNG còn nằm trong sidebar nữa
   (đã dời DOM lên trên) — giữ các block còn lại thoáng */
#index-sidebar > div{ flex:1 1 320px; }

/* ── Responsive các khối mới ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .lc-shortcuts{ grid-template-columns:repeat(3,1fr); }
  .lc-subbanners{ grid-template-columns:1fr; }
  #hero-slider .hero-content{ max-width:70% !important; }
  .lc-keywords{ display:none !important; }
}
@media (max-width:640px){
  .lc-shortcuts{ grid-template-columns:repeat(2,1fr); }
  #hero-slider .hero-content{ max-width:100% !important; }
  #hero-slider .hero-slide{ background-size:cover !important; background-position:center !important; }
  #index-sidebar-flashsale > h3{ font-size:18px !important; }
}

/* ── Vá vụn (2026-08-23) ──────────────────────────────────────────────────
   1) VẠCH TRẮNG 1px dưới hàng keyword: #search_smart (dropdown gợi ý) luôn
      display:block, background:#fff, cao 1px khi rỗng → lộ 1 gạch trắng.
      Bằng chứng: getBoundingClientRect() #search_smart = {height:1, bg:#fff}.
      FIX: nền trong suốt cho vỏ; chỉ panel con CÓ nội dung mới có nền trắng. */
#header .hdt-right-search #search_smart{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
#header .hdt-right-search #search_smart > #product:not(:empty),
#header .hdt-right-search #search_smart > #article:not(:empty){
  background:#fff; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.18);
  overflow:hidden; margin-top:6px;
}
/* 2) Logo to hơn cho cân với header xanh */
#header .desktop-header .desktop-header-center .hd-logo img{ max-height:72px !important; }

/* ── Chỉnh tỉ lệ bám sát ảnh Long Châu 01-home.png (đo tại 1432px) ────────
   LC: hero cao 323px / 1432 ≈ 22.6vw  → ta đang 28vw (cao hơn) → hạ xuống.
   LC: banner phụ trái cao ~136px, 2 banner phải ~60px + gap.
   (2026-09-03) BỌC LẠI trong ≤768px: rule này KHÔNG media-guard, đứng SAU
   khối "@media (min-width:769px)" ở dòng ~764 trong nguồn ⇒ cùng specificity
   + !important, luật đứng SAU thắng ⇒ đã ĐÈ MẤT chiều cao mới cho ≥769px
   (đo bằng measure.mjs: slideH 1024/1440/1920 KHÔNG đổi dù đã sửa —
   overflow=0 giả nhưng contentBottom > dotsTop = tràn xuống dots thật).
   Bọc media ≤768px để chỉ áp dụng cho vùng <p> vẫn ẩn (medium/small--hide
   tới 768px) — khớp đúng ý founder "mobile đang đẹp thì giữ y nguyên". */
@media (max-width:768px){
  #hero-slider,
  #hero-slider .hero-slide,
  #hero-slider .slick-list, #hero-slider .slick-track{
    height:clamp(180px, 23vw, 360px) !important;
  }
}
.lc-sb{ padding:16px 22px !important; }
.lc-sb-big{ min-height:164px !important; }
.lc-sb-sm{ min-height:74px !important; }
.lc-sb-big .lc-sb-title{ font-size:24px !important; max-width:60%; }
.lc-sb .lc-sb-desc{ font-size:12.5px; margin-top:4px; }
.lc-sb-big .lc-sb-cta{ margin-top:11px; padding:8px 20px; font-size:13.5px; }
.lc-sb-sm .lc-sb-title{ font-size:15px !important; }
.lc-subbanners{ margin-top:14px; }
.lc-shortcuts{ margin-top:14px; }
.lc-sb-big .lc-sb-title{ font-size:22px !important; max-width:78% !important; }
.lc-sb .lc-sb-desc{ max-width:72%; }

/* ══════════════════════════════════════════════════════════════════════════
   LỚP FIX-2 (2026-08-23) — 7 lỗi do worker verify đo được bằng CDP
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (FIX2-1) Ô SEARCH CĂN GIỮA THẬT ───────────────────────────────────────
   ĐO TRƯỚC: tâm ô search x=650.3 / tâm viewport 720 → lệch trái 69.7px.
   ROOT CAUSE: hàng header là flex [logo | (search + giỏ)]. Cột logo rộng 64px
   (shrink-to-fit) còn cụm giỏ hàng rộng 179.4px → 2 rail 2 bên KHÔNG cân,
   ô search nằm giữa phần còn lại chứ không giữa hàng.
   FIX: ép 2 rail bằng nhau (240px) → tâm ô search = tâm .grid = tâm viewport.
   Không dùng margin bù. */
#header .desktop-header-center .grid{
  display:flex !important; align-items:center !important; gap:0 !important; flex-wrap:nowrap !important;
}
#header .desktop-header-center .grid__item.large--two-twelfths{
  flex:0 0 240px !important; width:240px !important; max-width:240px !important; padding:0 !important;
}
#header .desktop-header-center .grid__item.large--ten-twelfths{
  flex:1 1 auto !important; display:flex !important; align-items:center !important;
  gap:0 !important; min-width:0 !important; padding:0 !important;
}
#header .desktop-header-center .grid__item.lc-header-search-cell{
  flex:1 1 auto !important; min-width:0 !important; padding:0 !important;
}
#header .desktop-header-center .desktop-cart-wrapper{
  flex:0 0 240px !important; width:240px !important; max-width:240px !important;
  margin-left:0 !important; text-align:right !important;
}
@media (max-width:1100px){
  #header .desktop-header-center .grid__item.large--two-twelfths,
  #header .desktop-header-center .desktop-cart-wrapper{
    flex-basis:180px !important; width:180px !important; max-width:180px !important;
  }
}

/* ── (FIX2-2) LOGO 72px THẬT ───────────────────────────────────────────────
   ĐO TRƯỚC: computed max-height 64px, ảnh render 64x64 dù redesign:820 ghi 72px.
   ROOT CAUSE: suplo-style.scss.css có nhánh selector
     "#header .desktop-header .desktop-header-center .hd-logo h1 > a img"
   = specificity (1,3,3) với max-height:64px!important; height:64px!important
   → THẮNG rule (1,3,1) của redesign dù redesign nạp sau.
   FIX: đối chọi ĐÚNG selector (1,3,3) ở file nạp sau. */
#header .desktop-header .desktop-header-center .hd-logo h1 > a img,
#header .desktop-header .desktop-header-center .hd-logo h1 img,
#header .desktop-header .desktop-header-center .hd-logo a img{
  max-height:72px !important; height:auto !important; width:auto !important; max-width:100% !important;
}

/* ── (FIX2-5) NAV STRIP: canh trái, khoảng cách đều ~36px ──────────────────
   ĐO TRƯỚC: space-between trải kín 1248px (Thuốc x=96 … Góc sức khỏe x=1211).
   Long Châu xếp sát nhau canh trái. */
.lc-navbar-strip .ntv-nav{
  justify-content:flex-start !important; gap:36px !important; width:auto !important;
}
.lc-navbar-strip .ntv-top{ padding:14px 0 !important; }

/* ── (FIX2-4) CARD HẸP (carousel flashsale / featured): 1 nút "Chọn mua"
   FULL-WIDTH đúng kiểu Long Châu (01-home.png: card LC chỉ có 1 nút duy nhất).
   ĐO TRƯỚC: card w=190, nút add-to-cart w=69 mà nhãn ::after "Chọn mua" 14px
   rộng 68.7px → chữ chạm/tràn mép, đè sang nút "Mua ngay" bên cạnh. */
#owl-home-featured-products-slider .product-item .product-img .product-actions > div > button.btnBuyNow.buy-now,
#index-sidebar-flashsale .product-item .product-img .product-actions > div > button.btnBuyNow.buy-now,
.owl-carousel .product-item .product-img .product-actions > div > button.btnBuyNow.buy-now{
  display:none !important;
}
#owl-home-featured-products-slider .product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart,
#index-sidebar-flashsale .product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart,
.owl-carousel .product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart{
  flex:1 1 100% !important; width:100% !important; overflow:hidden !important;
}
/* chống chữ tràn ra ngoài nút ở MỌI card (kể cả card lưới hẹp) */
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart{
  overflow:hidden !important; min-width:0 !important;
}
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span{
  display:inline-block; max-width:100%; overflow:hidden; white-space:nowrap;
}
.product-item .product-img .product-actions > div > button.btnBuyNow.buy-now{ min-width:0 !important; }

/* ── (FIX2-7) Khối cuối trang kiểu Long Châu: "Góc sức khỏe" ───────────────
   #index-sidebar (danh mục + form liên hệ + testimonials) KHÔNG có ở Long Châu
   → ẩn, thay bằng .lc-health-corner (1 bài nổi bật trái + 5 bài nhỏ phải). */
#index-sidebar{ display:none !important; }

.lc-health{ max-width:var(--lc-container); margin:28px auto 8px; padding:0 16px; }
.lc-health-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.lc-health-head .lc-health-ico{
  width:28px; height:28px; border-radius:8px; flex:0 0 28px;
  background:var(--lc-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.lc-health-head h2{
  font-size:22px !important; font-weight:700 !important; color:var(--lc-ink) !important; margin:0 !important;
}
.lc-health-head .lc-health-all{
  margin-left:14px; color:var(--lc-blue); font-size:14px; font-weight:500; white-space:nowrap;
}
.lc-health-head .lc-health-all:hover{ text-decoration:underline; }
.lc-health-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.lc-health-tabs a{
  border:1px solid var(--lc-line); border-radius:999px; padding:6px 14px;
  font-size:13.5px; color:var(--lc-ink); background:#fff; transition:all .25s var(--lc-ease);
}
.lc-health-tabs a:hover{ border-color:var(--lc-green); color:var(--lc-green); background:var(--lc-mint,#F4F9F6); }
.lc-health-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.lc-health-hero img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--lc-radius-card);
  display:block; background:#EAF1F8;
}
.lc-health-hero .lc-health-cat{
  display:inline-block; margin:14px 0 6px; font-size:12.5px; color:var(--lc-sub);
}
.lc-health-hero h3{
  font-size:22px !important; line-height:1.35 !important; font-weight:700 !important;
  margin:0 !important; color:var(--lc-ink) !important;
}
.lc-health-hero:hover h3{ color:var(--lc-blue) !important; }
.lc-health-list{ display:flex; flex-direction:column; gap:14px; }
.lc-health-row{ display:flex; gap:14px; align-items:flex-start; }
.lc-health-row img{
  width:104px; height:64px; flex:0 0 104px; object-fit:cover;
  border-radius:10px; display:block; background:#EAF1F8;
}
.lc-health-row .lc-health-cat{ display:block; font-size:12px; color:var(--lc-sub); margin-bottom:3px; }
.lc-health-row .lc-health-t{
  font-size:14px; font-weight:600; line-height:1.4; color:var(--lc-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lc-health-row:hover .lc-health-t{ color:var(--lc-blue); }
@media (max-width:900px){
  .lc-health-grid{ grid-template-columns:1fr; gap:20px; }
  .lc-health-hero h3{ font-size:18px !important; }
}

/* ── (FIX2-phụ) tràn ngang 11px: .ntv-drop rộng hơn viewport ở mục cuối ──── */
.lc-navbar-strip .ntv-item:last-child .ntv-drop{ left:auto !important; right:0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LỚP FIX-3 (2026-08-23) — 2 việc founder chốt
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (FIX3-1) THỨ TỰ TRONG CARD = LONG CHÂU: ảnh → tên → giá → NÚT ────────
   ĐO TRƯỚC (card #hmptab1_1, CDP 1440x900): y ảnh 1875.6 → NÚT 2190.3
   → tên 2238.3 → giá 2306.3  ⇒ nút nằm GIỮA, sai.
   ROOT CAUSE: markup index.html:1024-1044 đặt .product-actions BÊN TRONG
   .product-img, nên `order` của flexbox không với tới được (khác cha).
   FIX: .product-img{display:contents} → 3 con của nó (a.ảnh, .tag-saleoff,
   .product-actions) trở thành flex-item TRỰC TIẾP của .product-item
   ⇒ sắp lại bằng `order`, KHÔNG phải sửa DOM, KHÔNG vỡ selector cũ.
   BADGE: .tag-saleoff là position:absolute; containing block chuyển từ
   .product-img sang .product-item (đã có position:relative ở :375)
   → vẫn neo top:0 left:0 = đúng góc trên-trái của ảnh (ảnh là item đầu,
   card padding-top:0) ⇒ toạ độ badge KHÔNG đổi. */
.product-item{ display:flex !important; flex-direction:column !important; }
.product-item .product-img{ display:contents !important; }
/* bo góc + cắt tràn dời từ .product-img (nay display:contents) sang chính thẻ <a> ảnh */
.product-item .product-img > a{
  order:1 !important; display:block !important; aspect-ratio:1/1;
  border-radius:var(--lc-radius-card) var(--lc-radius-card) 0 0; overflow:hidden;
}
.product-item .product-item-info{ order:2 !important; }
.product-item .product-img .product-actions{
  order:3 !important; margin-top:auto !important; width:100% !important;
  padding:12px 12px 0 !important;
}
/* Long Châu chỉ có 1 CTA duy nhất → ẩn "Mua ngay" ở MỌI card, "Chọn mua" full-width */
.product-item .product-img .product-actions > div > button.btnBuyNow.buy-now{ display:none !important; }
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart{
  flex:1 1 100% !important; width:100% !important;
}

/* ── (FIX3-2) CHIỀU CAO LOGO = LOGO LONG CHÂU ─────────────────────────────
   ĐO THẬT bằng PIL trên docs/nhathuocbenhvien/longchau-shots/02-header.png
   (ảnh này rộng ĐÚNG 1440px → không cần quy đổi) : bbox pixel trắng của
   lockup "FPT Retail / NHÀ THUỐC LONG CHÂU" = y 57..101 ⇒ CAO 45px.
   Đối chiếu 01-home.png (rộng 1432px): y 57..101 = 45px, quy đổi
   ×1440/1432 = 1.00559 → 45.25px  ⇒ CHỐT 45px.
   ĐO TRƯỚC ở site ta: logo render 72x72 (computed max-height 72px).
   Vẫn phải đối chọi specificity (1,3,3) của suplo-style.scss.css
   + inline style="max-height:60px" ở index.html:307 → dùng !important. */
#header .desktop-header .desktop-header-center .hd-logo h1 > a img,
#header .desktop-header .desktop-header-center .hd-logo h1 img,
#header .desktop-header .desktop-header-center .hd-logo a img{
  /* (FIX4) Founder chốt 64px: logo ta là ảnh VUÔNG (1:1), đặt 45px theo
     lockup chữ-nhật của Long Châu nhìn hụt → nâng lên 64px. */
  max-height:64px !important; height:64px !important; width:auto !important; max-width:100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LỚP FIX-4 (2026-08-23) — RESPONSIVE (1440 · 1024 · 768 · 390)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (FIX4-R1) VẠCH TRẮNG 1px Ở ĐẦU TRANG TRÊN TABLET/MOBILE ──────────────
   ĐO THẬT (CDP): ở 1024/768/390 → .lc-navbar-strip getBoundingClientRect()
   = {top:0, height:1}, .desktop-header-navbar computed display:none
   (bị index.html:216 @media(max-width:1024px) ẩn) ⇒ dải nav rỗng chỉ còn
   border-bottom 1px #e7ecf0 nằm ĐÈ LÊN đầu trang, đẩy header xuống 1px.
   BASELINE index.html.bak-redesign cùng 390px: KHÔNG có .lc-navbar-strip
   ⇒ lỗi DO REDESIGN gây ra (dải nav là khối mới) ⇒ SỬA.  */
@media (max-width:1024px){
  .lc-navbar-strip{ display:none !important; }
}

/* ── (FIX4-R2) HERO: MŨI TÊN ĐÈ CHỮ + DOTS ĐÈ NÚT CTA ─────────────────────
   ĐO THẬT (CDP, cả 4 slide, .slick-prev vs .hero-content):
     1440 → không chồng (chữ l=96, mũi tên r=64)
     1024 → chồng 40x40 px  (4/4 slide)   + dots chồng nút 130.3x10.4
      768 → chồng 40x40 px  (4/4 slide)   + dots chồng nút 130.3x18.6 (slide 1)
      390 → chồng 40x40 px  (4/4 slide)   + dots chồng nút 130.3x8.9  (slide 0,1)
   ROOT CAUSE:
   (a) redesign:664-667 đổi .hero-content sang text-align:left + margin:0
       (bản gốc căn giữa) ⇒ chữ bắt đầu ở x=16, mà redesign:691 đặt
       .slick-prev{left:24px;width:40px} ⇒ đè nhau khi wrapper 1280px
       chạm mép (vw < ~1392px).
   (b) SAI ĐỘ ƯU TIÊN: redesign:796 & 801 viết "#hero-slider .hero-content"
       (1,1,1) nhưng luật gốc :664 có nhánh "#hero-slider .hero-content
       .lc-hero-left" (1,2,1) → 2 media query CHẾT, computed max-width vẫn
       46% ở cả 1024/768/390 (đo được maxWidth:"46%").
   ⇒ Cả 2 đều DO REDESIGN gây ra (baseline index.html.bak-redesign không có
     class lc-hero-left, grep = 0) ⇒ SỬA. */
@media (max-width:1392px){
  /* chừa chỗ cho 2 mũi tên (24 + 40 + 12 = 76px) */
  #hero-slider .hero-slide .hero-slide-content > .wrapper{ padding:0 76px !important; }
}
@media (max-width:1024px){
  /* ĐO 1024 TRƯỚC: chữ h4 chạy tới x=686 trong khi lớp phủ xanh tắt hẳn ở
     66% = x=676 và ảnh dược sĩ bắt đầu ở x≈618 ⇒ đuôi "và dịch vụ" nằm
     TRẦN trên kệ thuốc (ảnh chrome-1024-hero.png). Thu chữ + kéo dài lớp phủ. */
  #hero-slider .hero-content.lc-hero-left,
  #hero-slider .hero-content{ max-width:62% !important; }
  /* GIẢM ÁM XANH (2026-08-24): bản cũ đặc kín tới 34% + .94 tại 50%
     (PRE-HERO-20260824:1073). Bản mới giữ .70 tới 66% — mép phải dải chữ ở
     tablet là 61,6% (max-width 62%) và ở mobile là 64,8% (max-width 66%), nên
     66% bao trọn chữ — rồi tụt nhanh, tắt hẳn ở 92% thay vì 94%.
     Alpha TB trên vùng ảnh: 430px 0,699 → 0,546 (−22%); 1024px 0,404 → 0,367. */
  #hero-slider .hero-slide .hero-slide-overlay{
    background:linear-gradient(90deg,
        rgba(0,43,82,.74) 0%, rgba(0,45,86,.70) 66%, rgba(0,55,100,.38) 74%,
        rgba(0,70,128,.10) 84%, rgba(0,85,154,0) 92%) !important;
  }
  /* đẩy nội dung lên để không chạm dải .slick-dots (cao 27.5px, bottom:12px) */
  /* phải dùng ĐÚNG selector (1,2,0) của luật :?? "padding:0!important", nếu
     viết "#hero-slider .hero-slide-content" (1,1,0) sẽ THUA và không có tác dụng */
  #hero-slider .hero-slide .hero-slide-content{ padding:0 0 52px !important; box-sizing:border-box !important; }
}
@media (max-width:767px){
  /* mobile: bỏ mũi tên (vuốt tay), chữ full bề ngang như Long Châu */
  #hero-slider .slick-prev, #hero-slider .slick-next{ display:none !important; }
  #hero-slider .hero-slide .hero-slide-content > .wrapper{ padding:0 16px !important; }
  /* max-width 100% (bản cũ) cho chữ chạy hết bề ngang, tức thò sang dải lớp
     phủ đã trong suốt → đo được 1,59:1 (trượt WCAG AA) ở slide "Chuẩn mực về
     chất lượng sản phẩm và dịch vụ". Thu về 66% = nằm gọn trong dải alpha ≥.68. */
  #hero-slider .hero-content.lc-hero-left,
  #hero-slider .hero-content{ max-width:66% !important; }
  #hero-slider .hero-slide .hero-slide-content{ padding:0 0 44px !important; }
  #hero-slider .hero-content .slide-message p{ -webkit-line-clamp:2 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LỚP FIX-5 (2026-08-23) — VÙNG TRUNG GIAN 769–1391px + DƯ ĐỊA HERO TABLET
   ══════════════════════════════════════════════════════════════════════════

   ĐO THẬT (CDP, 4/4 slide, đã chờ animate.css fadeInUp chạy xong mới đo —
   nếu đo ngay sau slickGoTo thì bbox nút CTA sai +20px):

   (a) DOTS ĐÈ NÚT CTA "Xem thêm"  — .slick-dots vs .slide-button a
         1440 hở 19.8px OK · 1366 hở 12.8 OK · 1280 hở 7.3 OK · 1200 hở 2.2 OK
         1100 ĐÈ 130.3×4.1 · 1040 ĐÈ 130.3×9.0
   (b) CHỮ TRÀN RA NGOÀI SLIDE ở dải 769–1023 (khoảng hở trên ÂM):
         1023 gapTop=+3.0 · 900 gapTop=-7.6 · 800 gapTop=-16.2
       ROOT CAUSE: <p> hero mang class .medium--hide .small--hide nhưng
       timber chỉ ẩn .medium--hide trong (min-width:481px)and(max-width:768px)
       ⇒ từ 769px trở lên đoạn mô tả 3 dòng LẠI HIỆN, trong khi chiều cao
       hero = clamp(180px,23vw,360px) vẫn tụt theo vw (800px → 184px) ⇒
       khối chữ 164.5px + nút không còn chỗ ⇒ tràn.
   (c) 1024: gapTop chỉ 3.1px (slide 0,1) / 11.5px (slide 2,3) — thêm 1 chữ là vỡ.

   CÁCH SỬA (giữ nguyên >1392px để không đụng hồi quy 1440):
   1. chừa dải đáy 24px cho .slick-dots trên toàn dải 768–1392
      (mobile ≤767 vẫn giữ 44px đã verify ở FIX-4)
   2. sàn chiều cao hero 272px cho dải 769–1240 (max() nên KHÔNG tạo bước
      nhảy ở 1240: 23vw=285.2 > 272 nên vẫn chạy theo vw)
   Kiểm lại toàn bộ bằng getComputedStyle + getBoundingClientRect sau khi sửa. */

@media (min-width:768px) and (max-width:1392px){
  /* (1,2,0) — phải đứng SAU luật cùng specificity ở @media(max-width:1024px) mới thắng */
  #hero-slider .hero-slide .hero-slide-content{
    padding:0 0 24px !important; box-sizing:border-box !important;
  }
}
@media (min-width:769px) and (max-width:1240px){
  #hero-slider, #hero-slider .hero-slide,
  #hero-slider .slick-list, #hero-slider .slick-track{
    height:max(272px, 23vw) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LỚP FIX-6 (2026-08-24) — WIDGET LIÊN HỆ NỔI + MŨI TÊN HERO LANDSCAPE
   ══════════════════════════════════════════════════════════════════════════

   ĐO THẬT (CDP, scroll top, đếm cặp chồng lấn text-node/img/svg/button với
   từng nút .nc):
     1440 → 0   (widget 1372..1424 nằm trong lề phải 96px ngoài container 1248)
     1024 → 3   (nc-call×svg.fa-truck 18×52 · nc-mess×svg.fa-heartbeat 36×47.8
                 · nc-fb×svg.fa-headphones 36×17 — 3 icon minh hoạ banner phụ)
      844×390 → 1 (nc-mess × button.slick-next 40×31 — che KÍN mũi tên hero)
      390 → 5   (nc-fb 780..826 đè #mobile-bottom-navigation 776..844:
                 chữ "Giỏ hàng" 46×8.5 + badge .number 8.8×17, + 3 icon nội dung)

   CÁCH SỬA
   1. <1384px: cụm 4 nút THU GỌN thành 1 nút toggle 48px (CSS-only,
      input.ntbv-chk + label.nc-toggle trong index.html) → diện tích che giảm
      52×244=12688px² → 48×48=2304px² (-82%). Bấm mới bung 4 nút.
   2. ≤767px (mobile dọc): nâng lên TRÊN bottom nav (cao 68px) + safe-area.
   3. landscape thấp (max-height:480): cụm nằm NGANG sát đáy → không còn
      chạm dải header (nút GIỎ HÀNG) lẫn mũi tên hero.
   4. ≥1384px giữ nguyên cột dọc 4 nút — hồi quy 1440 không đổi.

   Specificity: block <style id="ntbv-contact-css"> nằm CUỐI <body>, tức SAU
   file này, nên `.ntbv-contact` (0,1,0) ở đó THẮNG nếu ta viết cùng cấp.
   → mọi luật dưới đây dùng `.ntbv-contact.ntbv-contact` (0,2,0) trở lên. */

.ntbv-contact .ntbv-chk{
  position:absolute; width:0; height:0; opacity:0; margin:0; padding:0;
  border:0; pointer-events:none; appearance:none; -webkit-appearance:none;
}
.ntbv-contact.ntbv-contact .ntbv-list{ display:flex; flex-direction:column; gap:12px; }
.ntbv-contact.ntbv-contact .nc-toggle{ display:none; }

@media (max-width:1383px){
  .ntbv-contact.ntbv-contact{ right:12px; bottom:12px; gap:10px; align-items:flex-end; }
  .ntbv-contact.ntbv-contact .ntbv-list{ display:none; gap:10px; }
  .ntbv-contact.ntbv-contact .ntbv-chk:checked ~ .ntbv-list{ display:flex; }
  .ntbv-contact.ntbv-contact .nc{ width:46px; height:46px; font-size:19px; }
  /* nút toggle: vùng chạm 48px ≥ 40px yêu cầu */
  .ntbv-contact.ntbv-contact .nc-toggle{
    display:flex; width:48px; height:48px; background:#00559A; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .ntbv-contact.ntbv-contact .ntbv-chk:checked ~ .nc-toggle{ background:#E53935; }
  .ntbv-contact.ntbv-contact .ntbv-chk:checked ~ .nc-toggle .ntbv-ic{ transform:rotate(180deg); }
  .ntbv-contact.ntbv-contact .nc-toggle .ntbv-ic{ transition:transform .2s var(--lc-ease,ease); }
  /* tắt vòng pulse: inset:-6px + scale(1.5) phình vùng che thêm ~26px mỗi chiều */
  .ntbv-contact.ntbv-contact .nc-call:after{ display:none !important; }
}

/* mobile dọc: ngồi TRÊN thanh nav dưới (68px) + chừa safe-area */
@media (max-width:767px){
  .ntbv-contact.ntbv-contact{
    right:calc(10px + env(safe-area-inset-right,0px));
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
  }
}

/* landscape mobile (iPhone ngang): cụm nằm NGANG sát đáy, KHÔNG chạm header */
@media (max-height:480px) and (orientation:landscape){
  .ntbv-contact.ntbv-contact{
    right:calc(10px + env(safe-area-inset-right,0px));
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    /* row (KHÔNG row-reverse): DOM là [list, label] nên label luôn ở mép phải,
       cụm 4 nút bung sang TRÁI — nút toggle không nhảy chỗ khi mở/đóng */
    flex-direction:row; align-items:center; gap:10px;
  }
  .ntbv-contact.ntbv-contact .ntbv-list{ flex-direction:row; gap:10px; }
  .ntbv-contact.ntbv-contact .nc{ width:44px; height:44px; font-size:18px; }
  .ntbv-contact.ntbv-contact .nc-toggle{ width:44px; height:44px; }

  /* VIỆC 2 — màn thấp: bỏ mũi tên hero (chật + hay bị widget che), giữ dots */
  #hero-slider .slick-prev, #hero-slider .slick-next{ display:none !important; }
}

/* FIX-6 (phụ) — hoạ tiết icon của 2 banner nhỏ đang chạm mép phải (right:16px,
   edge = vw-32) nên luôn nằm dưới nút nổi (x từ vw-60). Lùi vào 56px ở dải
   <1384 để chừa hẳn 12px cho cụm liên hệ. Banner lớn không cần: icon của nó
   nằm ở y 500..620, không chạm dải nút nổi ở đáy. */
@media (max-width:1383px){
  .lc-subbanners .lc-sb-sm .lc-sb-icon{ right:56px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HERO — VÒNG 2 (2026-08-25): ĐỔI SANG ẢNH MỚI + DẢI CHỮ CHẠY DỌC ĐÁY
   ──────────────────────────────────────────────────────────────────────────
   ROOT CAUSE "đã đổi ảnh mới mà banner vẫn ra ảnh cũ":
     Ngày 23-08-2026 sếp gửi 3 ảnh mới (thư mục Zalo
     "Nguyễn Quốc Thưởng [23-08-2026 21_12]", 3 tệp 276715 / 268454 / 307518
     byte) → được cài thành /site-assets/hero-1..3.jpg và CHỈ dùng cho slider
     TRANG CHỦ (site/index.html:843,874,905,936).
     Biến --page-hero-img của banner trang trong thì KHÔNG AI SỬA, vẫn trỏ
     breadcrumb_bg1.png — ảnh kho của theme Long Châu tải về 09-08-2026.
     Bằng chứng không phải lỗi cache: prod trả
     `last-modified: Sun, 09 Aug 2026 06:31:20 GMT` cho breadcrumb_bg1.png và
     md5 trùng y hệt bản trong repo ⇒ tệp CHƯA TỪNG bị thay, max-age=604800
     không liên quan. CSS thì mọi trang live đều dùng cùng một chuỗi ?v=.
     ⇒ Sửa đúng 1 dòng --page-hero-img bên dưới là 6891 trang đổi hết.

   VÌ SAO CÓ ?v= TRONG ĐƯỜNG DẪN ẢNH:
     Host trả `cache-control: public, max-age=604800` cho ảnh. Nếu sau này
     GHI ĐÈ hero-1.jpg bằng ảnh khác mà giữ nguyên tên, trình duyệt sẽ dùng
     bản cũ tới 7 ngày. Nên: thay ảnh xong PHẢI bump chuỗi ?v= ở dòng dưới.

   BỐ CỤC MỚI — "dải chạy dọc chiều dài banner, đặt chỗ không có mặt người":
     Trước đây .breadcrumb-overlay phủ navy .46→.72→.52 KÍN cả banner và
     .breadcrumb-content nằm giữa ⇒ chữ đè thẳng lên mặt người (ảnh sếp gửi).
     Nay:
       • .breadcrumb-overlay chỉ còn màn rất mỏng (.20 ở mép trên tách banner
         khỏi header xanh, tụt còn .03 ở giữa) ⇒ NHÌN RÕ ẢNH.
       • Nền navy dày chuyển sang chính .breadcrumb-content, neo BOTTOM, kéo
         hết bề ngang ⇒ đúng "một dải chạy dọc theo chiều dài banner".
     VÌ SAO CHỌN ĐÁY: đo trên chính ảnh mới, crop cover ở 1920/1440/1024/768/
     430/390px (script mô phỏng cover + background-position, ảnh đối chứng
     backup-live/banner-20260825/): mặt người luôn nằm ở nửa TRÊN khung; dải
     đáy cao tối đa 110px (desktop) / 87px (mobile) rơi trọn vào vùng áo blouse
     + quầy, không chạm mặt ai ở bất kỳ bề rộng nào. Mép trên banner thì KHÔNG
     an toàn: ở >=1440px đỉnh đầu chạm sát mép.
     background-position đổi center center → center 60%: đẩy khung crop xuống
     ⇒ đầu người không bị cắt ở màn rộng và vùng trống dưới rộng thêm.

   VÌ SAO NỀN DẢI ĐẶT TRÊN .breadcrumb-content CHỨ KHÔNG PHẢI CHIỀU CAO CỐ ĐỊNH:
     Tiêu đề dài nhất site là 133 ký tự (products/combo-10-hop-nuoc-yen-sao...).
     Dải cố định sẽ bị chữ TRÀN RA NGOÀI. Đặt nền lên chính hộp chữ ⇒ dải luôn
     ôm khít chữ, không bao giờ tràn; và h2 kẹp 2 dòng (-webkit-line-clamp),
     breadcrumb kẹp 1 dòng có "…" ⇒ chiều cao dải có TRẦN, không nuốt banner.
     Cắt chữ ở banner không mất nội dung: trang bài viết và trang sản phẩm đều
     lặp lại tiêu đề đầy đủ ở <h1> ngay bên dưới (vd blogs/news/...:843).

   TƯƠNG PHẢN (chữ #fff trên dải, đo bằng scratchpad/do_contrast_band.py):
     xem số thật in trong báo cáo — mọi bề rộng đều vượt xa ngưỡng AA 4,5:1.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ĐỔI BANNER TOÀN SITE: sửa đúng 1 dòng này (đổi ảnh thì bump luôn ?v=) */
  --page-hero-img: url("/site-assets/hero-1.jpg?v=20260825");
  /* Màu nền chờ trong lúc ảnh chưa tải xong — không bao giờ để lộ xám trơn */
  --page-hero-fallback: #0E2A44;
  --page-hero-h: 300px;
  /* Dải chữ: mép trên fade trong suốt -> đặc, rồi đặc tới đáy */
  --page-hero-band-fade: 14px;
  --page-hero-band-a1: .88;
  --page-hero-band-a2: .93;
}

#breadcrumb-wrapper.breadcrumb-w-img,
#breadcrumb-wrapper2.breadcrumb-w-img,
#breadcrumb-wrapper3.breadcrumb-w-img,
#breadcrumb-wrapper4.breadcrumb-w-img,
#breadcrumb-wrapper5.breadcrumb-w-img{
  background-image: var(--page-hero-img) !important;
  background-color: var(--page-hero-fallback) !important;
  /* scroll, KHÔNG fixed: xem WHY 1 */
  background-attachment: scroll !important;
  /* 60% chứ không center: đẩy khung crop xuống, chừa đỉnh đầu + rộng vùng đáy */
  background-position: center 60% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;   /* phủ kín, không kéo lệch tỉ lệ */
  height: var(--page-hero-h) !important;
  position: relative;
  overflow: hidden;
}

/* Lớp phủ giờ CHỈ là màn rất mỏng để ảnh hiện rõ — độ đậm dồn hết vào dải chữ */
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-overlay,
#breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-overlay,
#breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-overlay,
#breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-overlay,
#breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-overlay{
  background: linear-gradient(180deg,
      rgba(14,42,68,.20) 0%,
      rgba(14,42,68,.06) 34%,
      rgba(14,42,68,.03) 100%) !important;
  z-index: 1 !important;
}

/* DẢI CHỮ: neo đáy, kéo hết bề ngang, nền navy nằm trên chính hộp chữ */
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content,
#breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content,
#breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content,
#breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content,
#breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content{
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  -webkit-transform: none !important;
          transform: none !important;
  width: 100% !important;
  z-index: 2 !important;
  padding: 16px 0 18px !important;
  background: linear-gradient(180deg,
      rgba(14,42,68,0) 0,
      rgba(14,42,68,var(--page-hero-band-a1)) var(--page-hero-band-fade),
      rgba(14,42,68,var(--page-hero-band-a2)) 100%) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* Tiêu đề: tối đa 2 dòng, không bao giờ đẩy dải cao quá vùng không có mặt */
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2{
  font-size: 24px !important;
  line-height: 1.28 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  color: #fff !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Breadcrumb: đúng 1 dòng, dài quá thì "…" — không bao giờ bị tiêu đề đè */
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content .breadcrumb-small{
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Màn nhỏ: banner thấp hơn, chữ nhỏ hơn ⇒ dải mỏng lại, ảnh vẫn thoáng */
@media (max-width: 767px){
  :root{
    --page-hero-h: 220px;
    /* fade ngắn lại: padding-top mobile chỉ 11px, fade 14px sẽ khiến dòng chữ
       đầu rơi vào chỗ dải chưa đủ đặc -> tụt tương phản (đo được 5,70:1).
       Rút còn 10px thì dòng đầu nằm trên phần dải đã đặc hoàn toàn. */
    --page-hero-band-fade: 10px;
  }
  #breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content{
    padding: 11px 0 13px !important;
  }
  #breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
  #breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
  #breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
  #breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
  #breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2{
    font-size: 17px !important;
    line-height: 1.26 !important;
  }
  #breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
  #breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
  #breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
  #breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
  #breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content .breadcrumb-small{
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   (FIX-HEADER-20260825) LƯỚI AN TOÀN CHO ĐẦU TRANG DESKTOP
   ─────────────────────────────────────────────────────────────────────────
   ROOT CAUSE (đo thật bằng CDP trên prod /danh-muc/thuoc/ @1280, KHÔNG suy đoán):

   A) ĐÈ CHỮ — suplo-style.scss.css khai báo
        #header .desktop-header .desktop-header-top{ height:37px }   (spec 1,3,0)
      còn longchau-redesign.css:62 chỉ ghi `.desktop-header-top{padding/background}`
      (spec 0,1,0) ⇒ KHÔNG có override chiều cao ⇒ tầng TOP bị KHOÁ ở 37px.
      Trên 7052/7053 trang, tầng TOP chứa CẢ ô search (680x69) LẪN
      .hdt-account (float:right, 37) xếp CHỒNG DỌC = 106px ⇒ TRÀN 69px xuống dưới.
      Số đo: .desktop-header-top {t:0,b:37} vs .hdt-account {t:77,b:114};
             .desktop-header-center bắt đầu t:37 nên "Đăng nhập / Đăng ký" (t:77)
             rơi đúng hàng menu (.ntv-top t:77) ⇒ ĐÈ 66px lên "Góc sức khỏe".
   B) GIỎ HÀNG TRÀN MÀN — .grid__item.large--ten-twelfths là flex nowrap chứa
      [.desktop-header-navbar 919px][.desktop-cart-wrapper 240px] = 1159px nhồi
      vào ô rộng 980px; .ntv-nav{flex-wrap:nowrap} nên nav không co được ⇒ đẩy
      giỏ hàng ra right=1429 > viewport 1280 (tràn 149px, scrollWidth 1444).
   C) VÌ SAO TRANG CHỦ KHÔNG LỖI: chỉ site/index.html có markup 3 tầng
      (.lc-header-search-cell + .lc-navbar-strip). Bằng chứng bản sao lưu:
        backup-live/prod-20260824-deploy/  → 13/14 tệp có 0 lần "lc-navbar-strip",
                                             riêng index.html có 1
        backup-live/domain-fix-20260825/site-html-pre.tar.gz (chụp 10:31 hôm nay)
                                           → danh-muc/thuoc, products/* đều = 0
      ⇒ KHÔNG PHẢI worker hôm nay đè CSS của nhau; lỗi có từ trước, chỉ là 7052
        trang con CHƯA BAO GIỜ được áp header 3 tầng của trang chủ.

   ĐÃ SỬA GỐC bằng clone-src/apply-home-header.py (áp markup 3 tầng cho mọi
   trang) + assemble.py:restructure_header() để build sau không tái phát.
   Khối CSS dưới đây là LƯỚI AN TOÀN: nếu còn trang nào sót markup cũ thì header
   vẫn không đè chữ, không tràn màn.

   PHẠM VI: chỉ .desktop-header* (có class medium--hide small--hide) và
   .lc-navbar-strip (đã bị @media(max-width:1024px){display:none} ở trên)
   ⇒ KHÔNG chạm mobile / drawer / banner.
   ══════════════════════════════════════════════════════════════════════════ */

/* (A1) Gỡ khoá chiều cao 37px của suplo — thắng đúng specificity (1,3,0) */
#header .desktop-header .desktop-header-top{
  height:auto !important; min-height:37px !important; overflow:visible !important;
}

/* (A2) Nếu trang nào còn để ô search chung ô với "Đăng nhập / Đăng ký" thì
        cho 2 khối nằm CÙNG 1 DÒNG (gỡ float:right của suplo) thay vì chồng dọc. */
#header .desktop-header .desktop-header-top .grid__item.large--one-half:last-child{
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  gap:18px !important; min-width:0 !important;
}
#header .desktop-header .desktop-header-top .grid__item.large--one-half:last-child .hdt-right-search{
  flex:1 1 auto !important; min-width:0 !important; margin:0 !important;
}
#header .desktop-header .desktop-header-top .grid__item.large--one-half:last-child .hdt-account{
  flex:0 0 auto !important; float:none !important; white-space:nowrap !important;
}
#header .desktop-header .desktop-header-top .hdt-account > a{
  color:#fff !important; white-space:nowrap !important; margin-right:0 !important;
}

/* (B1) Tầng CENTER được xuống dòng; menu (nếu còn sót ở tầng này) chiếm trọn
        1 dòng riêng, giỏ hàng luôn dính mép phải và KHÔNG vượt viewport. */
#header .desktop-header .desktop-header-center .grid__item.large--ten-twelfths{
  flex-wrap:wrap !important; align-items:center !important; row-gap:2px !important; min-width:0 !important;
}
#header .desktop-header .desktop-header-center .desktop-header-navbar{
  order:2 !important; flex:1 1 100% !important; width:100% !important; min-width:0 !important;
}
#header .desktop-header .desktop-header-center .lc-header-search-cell{ order:1 !important; min-width:0 !important; }
#header .desktop-header .desktop-header-center .desktop-cart-wrapper{
  order:1 !important; flex:0 0 auto !important; width:auto !important; max-width:100% !important;
  margin-left:auto !important; margin-right:0 !important;
}

/* (B2) Menu không bao giờ tràn: cho phép xuống dòng */
#header .desktop-header .desktop-header-center .ntv-nav{
  flex-wrap:wrap !important; justify-content:flex-start !important;
  gap:2px 10px !important; width:100% !important;
}
.lc-navbar-strip .ntv-nav{ flex-wrap:wrap !important; }

/* (C1) Menu chính khi LỠ nằm trên nền XANH (trang sót markup cũ) thì phải là
        CHỮ TRẮNG, không dùng --lc-ink #222244 (chỉ 1.40-2.63:1 trên xanh).
        Dải nav TRẮNG .lc-navbar-strip GIỮ NGUYÊN chữ xám đậm như trang chủ. */
#header .desktop-header .desktop-header-center .ntv-top{ color:#fff !important; }
#header .desktop-header .desktop-header-center .ntv-top i{ color:#fff !important; opacity:1 !important; }
#header .desktop-header .desktop-header-center .ntv-item:hover > .ntv-top,
#header .desktop-header .desktop-header-center .ntv-top:hover{
  color:#fff !important; background:rgba(0,26,51,.30) !important;
  box-shadow:inset 0 -3px 0 #7BE38F !important;
}

/* (C2) DẢI NAV TRẮNG (trang chủ + mọi trang sau khi áp header 3 tầng):
        chữ #222244 trên #fff = 15.21:1 — ĐẠT AA thoải mái, GIỮ NGUYÊN.
        Chỉ sửa HOVER: trước là #39B54A trên #fff = 2.66:1 (TRƯỢT AA)
        → đổi sang #00447C = 9.92:1. Mũi tên xổ cùng màu chữ, bỏ opacity .7
        (opacity .7 kéo #222244 xuống ~7.6:1 — vẫn đạt nhưng mờ, làm rõ luôn). */
.lc-navbar-strip .ntv-top i{ opacity:1 !important; color:inherit !important; }
.lc-navbar-strip .ntv-item:hover > .ntv-top,
.lc-navbar-strip .ntv-top:hover,
.lc-navbar-strip .ntv-top:focus-visible{
  color:#00447C !important; background:transparent !important;
  box-shadow:inset 0 -3px 0 var(--lc-green) !important;
}

/* (C3) NÚT GIỎ HÀNG — GIỮ ĐÚNG SẮC XANH LÁ CỦA BẢN ĐẸP, chỉ đậm 1 nấc.
        ĐO THẬT: nhãn "GIỎ HÀNG" là font-size 24px / weight 600-700 ⇒ WCAG xếp
        loại LARGE TEXT, ngưỡng AA = 3:1 (không phải 4.5:1).
        Trước: #39B54A→#2FA35A = 2.66 / 3.23:1 ⇒ chặng đầu TRƯỢT.
        Sau : #2FA35A→#279247 = 3.23 / 3.97:1 ⇒ ĐẠT AA-large ở cả 2 chặng,
        mà mắt thường gần như không phân biệt được với ảnh bản đẹp. */
#header .desktop-header .desktop-cart-wrapper > .hd-cart{
  background:linear-gradient(135deg,#2FA35A 0%,#279247 100%) !important;
  color:#fff !important;
}
#header .desktop-header .desktop-cart-wrapper > .hd-cart:hover{
  background:linear-gradient(135deg,#279247 0%,#20803D 100%) !important;
}

/* (C4) Menu xổ xuống: hover cũ là #39B54A trên nền #F4F9F6 = 2.50:1 (TRƯỢT)
        → #00447C = 9.31:1 trên nền đó. */
#header .ntv-drop a:hover,
.lc-navbar-strip .ntv-drop a:hover{ color:#00447C !important; }

/* (E) CHỐNG TÁI PHÁT: không khối nào trong header được vượt mép phải wrapper */
#header .desktop-header .wrapper,
.lc-navbar-strip > .wrapper{ overflow-x:clip; }

/* ── (FIX-HEADER-20260825-b) DẢI 769-1024px BỊ MẤT HẲN MENU CHÍNH ──────────
   ĐO THẬT: suplo dùng ngưỡng .large--hide{display:none} từ min-width:769px
   ⇒ .mobile-header (large--hide) TẮT từ 769px, .desktop-header (medium--hide
   small--hide) BẬT từ 769px. Nhưng style inline trong từng trang
   (index.html:150) có @media(max-width:1024px){.desktop-header-navbar{display:none}}
   ⇒ khoảng 769-1024px KHÔNG CÒN menu chính nào: menu desktop bị ẩn mà menu
   mobile cũng chưa hiện. (Lỗi có sẵn từ trước, không do đợt sửa này.)
   Trước đây .lc-navbar-strip cũng bị ẩn ở <=1024 vì dải rỗng để lại vạch 1px;
   nay dải đã có nội dung nên bật lại đúng khoảng 769-1024 và cho xuống dòng. */
@media (min-width:769px) and (max-width:1024px){
  .lc-navbar-strip{ display:block !important; }
  .lc-navbar-strip .desktop-header-navbar{ display:block !important; }
  .lc-navbar-strip .ntv-nav{ flex-wrap:wrap !important; gap:0 18px !important; }
  .lc-navbar-strip .ntv-top{ padding:10px 0 !important; font-size:14px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   W121 (08/10/2026) — SỬA GIAO DIỆN ĐIỆN THOẠI THEO BẢNG DoD (ui-ux-pro-max)
   Đo trước bằng WebKit iPhone 13 390×844 (chatbot-host/w121-anh/truoc-so-do.json).
   ══════════════════════════════════════════════════════════════════════════ */

/* B11 — ô Sắp xếp 14px làm iOS tự phóng to khi chạm (readable-font-size: ≥16px) */
#SortBy, select#SortBy{ font-size:16px !important; min-height:44px; }

/* B12 — "gạch chân" dưới chữ Chọn mua thật ra là icon fa-cart-plus mà FontAwesome JS đổi
   <i> thành <svg>: luật cũ chỉ ẩn <i> + font-size:0 nên svg bị ép dẹt thành 1 vạch ngang
   đè lên dấu chữ "ọ". Ẩn hẳn svg; chữ ::after giữ nguyên. Nút cao 44px (touch-target). */
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span > i,
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span > svg,
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span::before{ display:none !important; content:none !important; }
.product-item .product-img .product-actions > div > button.btnAddToCart.add-to-cart span{
  font-size:14px !important; line-height:1.2 !important; display:inline-block !important; text-decoration:none !important;
}
.product-item .product-img .product-actions > div > button{ height:44px !important; }
.product-item .product-price a, .product-item .product-price a:hover{ text-decoration:none !important; }
/* Tên sản phẩm: ô cũ cao cứng 44px mà kẹp 3 dòng 20px (=60px) nên dòng 3 bị xén còn lòi dấu.
   Kẹp đúng 2 dòng có "…", tên đầy đủ vẫn ở trang chi tiết + thuộc tính alt của ảnh. */
.product-item .product-title{ min-height:0 !important; }
.product-item .product-title a{
  height:auto !important; max-height:none !important; display:-webkit-box !important;
  -webkit-line-clamp:2 !important; line-clamp:2; -webkit-box-orient:vertical !important; overflow:hidden !important;
}

/* B13 — vùng chạm ≥44px: chấm banner (9×9), nút giỏ hàng đầu trang (21×27), đường dẫn (17px) */
#hero-slider .slick-dots li{ margin:0 !important; }
#hero-slider .slick-dots li button,
#hero-slider .slick-dots li.slick-active button{
  width:44px !important; height:44px !important; border:0 !important; background:transparent !important;
  position:relative; padding:0 !important;
}
#hero-slider .slick-dots li button::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; transform:translate(-50%,-50%);
  box-sizing:border-box; border:1.5px solid rgba(255,255,255,.85); border-radius:999px; transition:width .3s ease, background .3s ease;
}
#hero-slider .slick-dots li.slick-active button::after{ width:22px; background:#fff; border-color:#fff; }
#hero-slider .slick-dots{ bottom:0 !important; }
.desktop-cart-wrapper1 > a.hd-cart{ display:inline-flex !important; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content .breadcrumb-small,
#breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content .breadcrumb-small{ line-height:44px !important; }
.breadcrumb-small a{ display:inline-block; min-height:44px; }

/* B15 — tiêu đề banner in hoa mất dấu ("SẢN PHÂM", "KEM CHÔNG NĂNG"): line-height 1.26 + overflow:hidden
   của khối kẹp 2 dòng xén mất dấu chồng trên chữ hoa (Ẩ, Ố, Ắ). Nới dòng + đệm trên để dấu nằm trong khung. */
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2,
#breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2{
  line-height:1.5 !important; padding-top:.12em !important;
}
@media (max-width:767px){
  #breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper2.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper3.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper4.breadcrumb-w-img .breadcrumb-content,
  #breadcrumb-wrapper5.breadcrumb-w-img .breadcrumb-content{ padding:8px 0 0 !important; }
}
/* W121 (soát lại theo skill ui-ux G2: vùng chạm ≥44px VÀ cách nhau ≥8px) — chấm banner tách 8px,
   nút mở menu ☰ đầu trang điện thoại (đo 21×24) nới lên 44×44. */
#hero-slider .slick-dots li{ margin:0 4px !important; }
a.icon-fallback-text.site-nav__link.js-drawer-open-right{ display:inline-flex !important; align-items:center; justify-content:center; min-width:44px; min-height:44px; }

/* ══════════════════════════════════════════════════════════════════════════
   W132 (08/10/2026) — TƯƠNG PHẢN AA + VÙNG CHẠM (DoD B15). Token: DESIGN.md §1.3.
   Đo trước (WebKit 390×844, chatbot-host/w132-anh/truoc-dt-so-do.json): chữ trắng trên
   #39B54A→#2FA35A 2,66–3,23:1; giá #E53935 trên #F9F9F9 4,01:1; nút mua cao 40,
   −/+ 31×38, "Khác"/"Chống nắng"/hotline cao 24, logo 48×19, nhãn "-21%" rớt "%" xuống dòng.
   ══════════════════════════════════════════════════════════════════════════ */
/* Đổi token ở cả 2 hệ (suplo --color-primary + lớp này --lc-green): mọi luật cũ dùng var() tự ăn theo.
   Khối này nằm SAU suplo-style trong <head> nên :root ở đây thắng. */
:root{
  --lc-green:#1F7A2C; --lc-green-2:#17611F; --lc-red-txt:#C62828;
  --color-primary:#1F7A2C; --color-primary-hover:#17611F;
}
/* Mấy chỗ ghi cứng mã màu cũ (không qua var) */
.lc-sb-sm-1{ background:linear-gradient(120deg,var(--lc-green) 0%,var(--lc-green-2) 100%) !important; }
.ntbv-contact .nc-call{ background:var(--lc-green) !important; }
.ntbv-contact .nc-call:after{ border-color:var(--lc-green) !important; }
/* "Mua ngay" trang sản phẩm: suplo tô nền xanh lá chữ trắng bằng bộ chọn mạnh hơn luật nền trắng ở 5c */
#product-wrapper .product-single .product-content .product-actions button.btnBuyNow,
#product-wrapper .product-single .product-content .product-actions button.btnAddToCart,
button#AddToCart, button#buy-now{ background:var(--lc-green) !important; border-color:var(--lc-green) !important; color:#fff !important; }
#product-wrapper .product-single .product-content .product-actions button:hover,
button#AddToCart:hover, button#buy-now:hover{ background:var(--lc-green-2) !important; border-color:var(--lc-green-2) !important; }

/* Giá đỏ: chữ đỏ đậm (5,34:1 trên #F9F9F9). Nhãn % giảm: nền đỏ đậm cho chữ trắng 5,62:1 */
.product-item .current-price, .product-single .current-price, .product-single .current-price.ProductPrice,
#product-wrapper .product-single .product-content .pro-price .current-price{ color:var(--lc-red-txt) !important; }
.product-item .tag-saleoff, .product-item .product-img .tag-saleoff{
  background:var(--lc-red-txt) !important; width:auto !important; min-width:34px; height:auto !important;
  line-height:1.2 !important; white-space:nowrap !important; padding:6px 9px !important; overflow:visible !important;
  right:auto !important; /* suplo đặt right:5px, cộng left:0 thì width:auto kéo dài hết thẻ */
}

/* Vùng chạm ≥44px (ui-ux-pro-max touch-target-size) */
#product-wrapper .product-single .product-content .product-actions button{ height:44px !important; line-height:44px !important; }
.js-qty .js-qty__num, .js-qty input{ min-height:44px; padding-left:44px !important; padding-right:44px !important; }
.js-qty .js-qty__adjust{ min-width:44px; padding:0 !important; display:flex !important; align-items:center; justify-content:center; }
#product-wrapper .product-single .product-content .pro-content-head .pro-brand a,
#product-wrapper .product-single .product-content .pro-content-head .pro-type a,
#product-wrapper .product-single .product-content .product-size-hotline .product-hotline > a{
  display:inline-flex !important; align-items:center; min-height:44px; min-width:44px; justify-content:center;
}
.product-item .product-title a{ min-height:44px; }
.mobile-header .hd-logo a{ display:inline-flex !important; align-items:center; min-height:44px; min-width:44px; }
/* W135 (gộp phần W132 để lại): nút "GIỎ HÀNG" đầu trang máy bàn còn ghi cứng #2FA35A→#279247 (khối C3, 3,23/3,97:1)
   và huy hiệu số giỏ ở thanh dưới điện thoại nền #92c947 của suplo (chữ trắng ~2,1:1) -> theo token W132. */
#header .desktop-header .desktop-cart-wrapper > .hd-cart{
  background:linear-gradient(135deg,var(--lc-green) 0%,var(--lc-green-2) 100%) !important; color:#fff !important;
  box-shadow:0 3px 10px rgba(31,122,44,.28);
}
#header .desktop-header .desktop-cart-wrapper > .hd-cart:hover{
  background:linear-gradient(135deg,var(--lc-green-2) 0%,var(--lc-green-2) 100%) !important;
}
#mobile-bottom-navigation .mobile-nav-item > a span.number{ background:var(--lc-green) !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   W137 (08/10/2026) — VÙNG CHẠM + TƯƠNG PHẢN NGOÀI KHUNG CHAT (DoD B15, W118 lần 3). Token: DESIGN.md §1.3.
   Đo trước (WebKit 390×844 + 1440, scratchpad/w137/do-live-truoc.json): "Liên hệ" thẻ SP 68×19, "Liên hệ báo giá"
   trang SP 175×29, "Xem tất cả …" 4,35:1 cao 36, "Xem tất cả" Góc sức khỏe 82×24, 5 tab Góc sức khỏe cao 38,
   "Hotline … hỗ trợ" trắng 90% trên #3977BC 4,07:1; cùng loại: tab SP 40, nút danh mục 42/43, phân trang 40 (điện thoại),
   chữ #3977BC trên #F4F9F6 4,35:1, Flashsale trắng trên #FF6B5E 2,79:1, đếm ngược 4,23:1, giá "Liên hệ báo giá" danh mục
   #E53935 4,23:1, "…" phân trang 2,54:1, "Xem tất cả bài viết" #39B54A 2,66:1 (style nội tuyến), chân trang 16–40px.
   ══════════════════════════════════════════════════════════════════════════ */
/* Vùng chạm ≥44px — mục W118 */
.product-item .product-price > a,
.pro-price .current-price.ProductPrice > a,
.lc-health-head .lc-health-all{
  display:inline-flex !important; align-items:center; min-height:44px; min-width:44px;
}
a.hmp-viewmore{
  display:inline-flex !important; align-items:center; justify-content:center; min-height:44px;
  padding:0 16px !important; color:var(--lc-blue) !important;
}
.lc-health-tabs a{ display:inline-flex; align-items:center; min-height:44px; }
/* span giá bọc link là inline -> dòng không cao theo link 44px, viền dưới khung giá cắt ngang link */
.pro-price .current-price.ProductPrice{ display:inline-flex !important; align-items:center; }
/* khung giá mọi thẻ cao ≥44 như link "Liên hệ" để nút "Chọn mua" các thẻ cạnh nhau vẫn thẳng hàng */
.product-item .product-price{ display:flex !important; flex-wrap:wrap; align-items:center; column-gap:6px; min-height:44px; }
/* "Hotline … hỗ trợ": trắng đặc trên #3977BC = 4,63:1 (90% chỉ còn 4,07:1) */
.lc-sb .lc-sb-desc{ color:#fff !important; }

/* Vùng chạm ≥44px — cùng loại */
.tab .hmp-tablinks1{ min-height:44px; }
.pc-btn{ min-height:44px; }
.pgr a, .pgr span{ min-height:44px !important; height:auto !important; min-width:44px !important; }
.breadcrumb-small > a{ display:inline-flex !important; align-items:center; justify-content:center; min-width:44px; }
#hero-slider .slick-arrow{ width:44px !important; height:44px !important; }
.hservice-title > a{ display:inline-block; padding:10px 0; }
.hsmallcol-title > a{ display:block; min-height:44px; }
.hsmallcol-img > a{ display:flex !important; align-items:center; justify-content:center; min-height:44px; }
.cat-wrap p > a[href="/blogs/news"]{ display:inline-flex; align-items:center; min-height:44px; color:var(--lc-green) !important; }
#footer .ft-contact-detail a, #footer .ft-copyrights-link li > a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
#footer .ft-nav li > a{ min-height:44px; display:flex !important; align-items:center; }
#footer .footer-content .ft-social > a, #footer .ft-social a{ width:44px !important; height:44px !important; line-height:44px !important; }
#footer .ft-sub-wrapper input[type=email], #footer #subscribe{ min-height:44px; }
#footer #subscribe{ min-width:44px; }
/* Đầu trang máy bàn: nới vùng chạm mà giữ nguyên chiều cao dòng (lề âm bù phần nới, nền nút tìm cắt về 38px như cũ) */
.hdt-left-contact a{ display:inline-block !important; min-height:44px; line-height:44px; margin-top:-3.5px !important; margin-bottom:-3.5px !important; }
/* link chỉ có biểu tượng điện thoại rộng 12px: nới 44 rồi kéo lề trái âm cho biểu tượng đứng yên chỗ cũ */
.hdt-left-contact a[href="tel:0977987759"]{ min-width:44px; text-align:center; margin-left:-16px !important; margin-right:-16px !important; }
.hdt-account > a{ display:inline-flex !important; align-items:center; min-height:44px; margin:-3.5px 0 !important; }
.lc-keywords a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; margin:-14px 0; }
/* Khung kết quả tìm nhanh rỗng vẫn là dải trong suốt 12px z-index 99999 đè lên nửa dưới từ khoá -> cho bấm xuyên, chỉ con (kết quả) nhận bấm */
.search-form-wrapper .smart-search-wrapper{ pointer-events:none; }
.search-form-wrapper .smart-search-wrapper > *{ pointer-events:auto; }
#header .desktop-header .desktop-header-top .hdt-right-search .input-group span.input-group-btn button,
#header .desktop-header .hdt-right-search .input-group span.input-group-btn button,
.ultimate-search #searchsubmit{ width:44px !important; height:44px !important; padding:4px !important; margin:-4px !important; background-clip:content-box !important; }
#header .desktop-header .desktop-cart-wrapper > .hd-cart{ min-height:44px; }

/* Tương phản AA — cùng loại */
#home-policy .hservice-title a, .hservice-title > a,
.article-item .article-title a,
.hsmallcol-price .current-price,
.product-buynow-sidebar > h3{ color:var(--lc-blue) !important; }
#index-sidebar-flashsale > h3{ background:linear-gradient(135deg,var(--lc-red-txt) 0%,#B71C1C 100%) !important; }
.lc-fs-count b{ background:var(--lc-red-txt); }
.lc-fs-count .lc-fs-sep{ color:var(--lc-red-txt); }
.pc-p{ color:var(--lc-red-txt) !important; }
.pgr .gap{ color:var(--lc-sub) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   W138 (09/10/2026) — "Liên hệ báo giá" trang SP (DoD C5, W118 lần 4).
   timber.js dựng <a><span class="pro-price"> lồng trong khung .pro-price → span con ăn luôn luật của khung
   (suplo: padding-bottom 10 + margin-bottom 10 + viền dưới 1px #F1F1F1) thành đoạn kẻ cụt 175px ngay dưới chữ.
   ══════════════════════════════════════════════════════════════════════════ */
.pro-price .current-price.ProductPrice > a > .pro-price{ padding:0 !important; margin:0 !important; border:0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   W140 (09/10/2026) — nút nổi đè chữ + trang khung "Đang cập nhật" (DoD B15, W118 lần 6).
   Cột nút nổi (chat + Gọi/Zalo) cố định ở mép phải: ≤767px chiếm từ (rộng màn − 60px), ≥768px từ (rộng màn − 68px).
   Lưới thẻ danh mục/tìm kiếm chạy sát mép (lề 16px) nên tên SP + "Liên hệ báo giá" + nút cột phải bị đè ("viên" → "viê").
   Chừa lề phải đúng bằng bề rộng cột → mép phải chữ cách cột ≥ 9px (lề trong thẻ). Từ 1400px khung 1280 đã tự chừa đủ.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){ .cat-wrap{ padding-right:60px !important; } .w140-le{ padding-right:56px; } }
@media (min-width:768px) and (max-width:1399px){ .cat-wrap{ padding-right:68px !important; } .w140-le{ padding-right:64px; } }
/* Tên SP có cụm dài không có chỗ ngắt ("10Mg/160Mg/12.5Mg", "Levomepromazin") tràn ra ngoài khung tên và bị cắt mất đuôi → cho ngắt giữa cụm. */
.pc-t{ overflow-wrap:anywhere; }
/* 768–1023px lưới 4 cột: thẻ 156–220px không đủ chỗ cho "Thêm giỏ" + "Mua ngay" trên 1 hàng, "Mua ngay" bị thẻ cắt mép phải (có từ trước W140) → cho xuống hàng, mỗi nút giãn đủ ngang. */
@media (min-width:768px) and (max-width:1023px){ .pc-btns{ flex-wrap:wrap; } .pc-btn.pc-buy{ flex:1 1 auto; } }

/* ══════════════════════════════════════════════════════════════════════════
   W142 (09/10/2026) — đánh bóng sau DoD lần 7 (B14/B15 "nên làm", không chặn Done).
   Cột nút nổi (chat + Gọi/Zalo) cố định mép phải, lúc đứng yên chiếm từ (rộng màn − 60px) khi ≤767px,
   (rộng màn − 68px) khi ≥768px. W140 mới chừa lề cho lưới danh mục + trang khung; các trang dùng .wrapper
   (Giới thiệu, chính sách, sản phẩm, bài viết, trang chủ) và chân trang vẫn chạy chữ tới sát mép → bị đè.
   Chừa lề ở khung .wrapper (chữ cách cột 8px), ảnh banner trang chủ được kéo lại sát mép như cũ.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  main.main-content .wrapper, #index-wrapper .wrapper, #footer .wrapper{ padding-right:68px !important; }
  .w140-le{ padding-right:0; }
  #home-banner{ margin-right:-52px; }
  section.lc-health{ padding-right:68px !important; }
  #index-sidebar-flashsale{ padding-right:68px; }
  .lc-shortcuts{ margin-right:52px; }
}
@media (min-width:768px) and (max-width:1399px){
  main.main-content .wrapper, #index-wrapper .wrapper, #footer .wrapper{ padding-right:76px !important; }
  .w140-le{ padding-right:0; }
  #home-banner{ margin-right:-60px; }
  section.lc-health{ padding-right:76px !important; }
  #index-sidebar-flashsale{ padding-right:76px; }
  .lc-shortcuts{ margin-right:60px; }
}
/* Dòng "NHÀ THUỐC BỆNH VIỆN" trên thẻ "Giao thuốc tận nơi": trắng 85% chỉ 4,37–4,56:1 trên gradient xanh lá → trắng đặc. */
.lc-sb .lc-sb-kicker{ color:#fff; }
/* "Copyrights © 2018 by" #90A2BC trên #2C394C = 4,50:1 (làm tròn, thực tế < 4,5) → cùng màu link cuối trang #B9C7D6 (6,79:1). */
#footer .footer-copyrights .ft-copyrights-content{ color:#B9C7D6; }
/* Giá khung "mua nhanh" bên phải trang SP máy bàn còn #3977BC (4,39:1 trên nền khung) → --lc-blue như các giá danh sách khác (W137). */
.product-buynow-price .current-price.ProductPrice{ color:var(--lc-blue) !important; }
/* Vùng chạm ≥44px còn sót: "Liên hệ báo giá" khung mua nhanh (131×22), link dự phòng "Facebook" của khung Fanpage (84×22),
   nút chọn quy cách "Hộp" (35px), bài viết liên quan (24px), nhãn "Sắp xếp" (19px). */
.product-buynow-price .current-price.ProductPrice > a,
.fb-xfbml-parse-ignore a,
.collection-sorting-wrapper label{ display:inline-flex !important; align-items:center; min-height:44px; }
.swatch .swatch-element label.sd{ height:44px !important; line-height:44px; min-width:44px !important; }
.related-articles-body ul li > a{ display:inline-flex; align-items:center; min-height:44px; }
/* Giỏ trống: clone-cart.js chỉ in link giữa câu "Tiếp tục mua sắm" (135×19) → nút xanh 44px trên dòng riêng.
   Cùng kiểu cho "Về trang chủ" sau khi gửi đơn. Làm bằng CSS để khỏi đổi clone-cart.js (?v= riêng). */
.template-cart main.main-content > div > p > a[href="/"],
.template-cart main.main-content > div > a[href="/"]{
  display:flex; width:max-content; align-items:center; justify-content:center; min-height:44px; margin-top:12px;
  padding:0 20px; border-radius:10px; background:var(--lc-green); color:#fff !important; font-weight:600; text-decoration:none;
}
.template-cart main.main-content > div > p > a[href="/"]:hover,
.template-cart main.main-content > div > a[href="/"]:hover{ background:var(--lc-green-2); }
/* Lề mới làm hẹp khung → "Xem tất cả" (Góc sức khỏe) bị bó còn 60px, chữ tràn ra 11px dưới cột nút nổi (320px) → khung ôm vừa chữ.
   Đoạn chính sách có "nhathuocbenhvien.com.vn&nbsp;như" không có chỗ ngắt, tràn 50px qua lề → cho ngắt khi không vừa. */
.lc-health-head .lc-health-all{ flex:0 0 auto; white-space:nowrap; }
main .rte{ overflow-wrap:break-word; }
/* Ảnh SP khối "sản phẩm nhỏ" trang chủ chiếm 1/3 thẻ = 34–42px ở 320–360px → cột ảnh cố định 44px + lề 5, chữ lấy phần còn lại. */
@media (max-width:767px){
  .hsmallcol-item > .grid{ display:flex; }
  .hsmallcol-item > .grid > .grid__item:first-child{ flex:0 0 49px; width:49px; }
  .hsmallcol-item > .grid > .grid__item:last-child{ flex:1 1 0; width:auto; min-width:0; }
}
/* ≤479px khối "sản phẩm nhỏ" 2 thẻ/hàng chỉ còn ~84px cho chữ → giá dài "6,900,000₫" (16px, không có chỗ ngắt) tràn qua lề tới dưới cột nút nổi (360px) → 1 thẻ/hàng. */
@media (max-width:479px){ .hsmallcol-wrapper .grid-uniform > .grid__item{ width:100% !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   W144 (09/10/2026) — mũi tên băng chuyền đè tên sản phẩm/bài viết (DoD B15, W118 lần 8).
   Theme đặt .owl-prev/.owl-next 34×34 tuyệt đối ở giữa chiều cao băng chuyền (top:calc(50% - 17px)),
   trên điện thoại giữa chiều cao rơi đúng dòng tên SP "Sản phẩm liên quan" / đoạn mô tả bài viết trang chủ
   → đè chữ ở 320–430px (iPhone + Android) và 768px. Máy bàn giữ nguyên (mũi tên chỉ hiện khi rê chuột).
   ≤1023px: đưa 2 mũi tên ra một hàng riêng dưới băng chuyền, căn giữa, 44×44 (vùng chạm), cùng kiểu
   nút tròn trắng viền --lc-line như băng chuyền "nổi bật" trang chủ (đã là hàng riêng) → không còn
   chồng lên nội dung nào. Băng chuyền "nổi bật" chỉ nâng 34 → 44px.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  #related-products #owl-related-products-slider .owl-controls,
  #seen-products #owl-spdx .owl-controls,
  #home-articles #owl-home-articles-slider .owl-controls{
    display:flex !important; justify-content:center; gap:12px; margin:8px 0 0 !important;
    padding:4px 0 14px; /* #related-products có overflow:hidden → chừa chỗ cho bóng nút, khỏi bị cắt mép dưới */
  }
  #related-products #owl-related-products-slider .owl-controls .owl-buttons,
  #seen-products #owl-spdx .owl-controls .owl-buttons,
  #home-articles #owl-home-articles-slider .owl-controls .owl-buttons{ display:flex; gap:12px; }
  #related-products #owl-related-products-slider .owl-controls .owl-buttons > div,
  #seen-products #owl-spdx .owl-controls .owl-buttons > div,
  #home-articles #owl-home-articles-slider .owl-controls .owl-buttons > div,
  #index-sidebar-flashsale #owl-home-featured-products-slider .owl-controls .owl-buttons > div{
    position:static !important; display:inline-flex !important; align-items:center; justify-content:center;
    width:44px !important; height:44px !important; line-height:44px; margin:0 !important; padding:0 !important;
    opacity:1 !important; border-radius:50% !important; font-size:18px;
    background:#fff !important; border:1px solid var(--lc-line) !important; color:var(--lc-blue) !important;
    box-shadow:0 3px 10px rgba(0,0,0,.12);
  }
  #index-sidebar-flashsale #owl-home-featured-products-slider .owl-controls .owl-buttons{ display:flex; justify-content:center; gap:12px; }
}