/* Safeline — web hoàn chỉnh mới (mẫu D), VÒNG 2 — 29/09/2026.
   Anh Công chê: "chói mắt, hơi AI, chưa wow, chưa tập trung vào cái cần nhìn". Đã làm lại toàn bộ:
   nền kem ấm, mực xanh navy đậm (không đen tuyền), vàng thương hiệu CHỈ ở nút chính + gạch nhấn nhỏ,
   tiêu đề Fraunces (đủ dấu tiếng Việt, tải từ /fonts của web này), thân Be Vietnam Pro, ảnh thật nền trắng đặt bằng multiply.
   Mỗi màn một tiêu điểm. Nguồn học: HOC-HOI-VONG2.md. Màu/phông/phong cách theo kỹ năng ui-ux-pro-max: quan-tri/THIET-KE-MAU.md. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bevietnam-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bevietnam-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bevietnam-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bevietnam-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Token (đặt tên có nghĩa, học shadcn/Open Props: đổi màu cả web chỉ sửa khối này) ---------- */
:root{
  --nen:#F4EFE4; --nen-2:#ECE5D5; --tile:#EAE2D0; --the:#FBF8F1; --vien:#D8CEB9;
  --muc:#1D2433; --muc-phu:#5A5548; --navy:#1B2A41; --navy-2:#2A3B57;
  --nhan:#F2B21A; --nhan-dam:#E0A00B; --nhan-nhat:#F8E7B6;
  --do:#A32B1C; --xanh:#1E6B49; --xanh-nhat:#E2EEE5; --ring:#2456C8;
  --bong:0 1px 2px rgba(60,40,10,.06),0 10px 30px -10px rgba(60,40,10,.16);
  --bong-len:0 2px 4px rgba(60,40,10,.06),0 22px 44px -12px rgba(60,40,10,.26);
  --em:cubic-bezier(.2,.7,.2,1); --nhanh:160ms; --vua:340ms;
  --cao-dau:64px; --cao-day:60px; --rong:1180px; --bo:20px; --bo-nho:14px;
  --f-tieu-de:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-than:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --chu-h1:clamp(2.05rem,1.35rem + 3.6vw,3.9rem); --chu-h2:clamp(1.65rem,1.25rem + 2vw,2.6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nen);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cao-dau) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--f-than);font-size:18px;line-height:1.6;color:var(--muc);background:var(--nen);overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:calc(var(--cao-day) + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased}
body>main{flex:1 0 auto;min-height:calc(100vh - var(--cao-dau));min-height:calc(100dvh - var(--cao-dau))}
.loc:empty{min-height:66px}
#vet:empty{min-height:56px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-tieu-de);font-weight:700;line-height:1.15;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.01em;color:var(--navy)}
h1{font-size:var(--chu-h1)} h2{font-size:var(--chu-h2)} h3{font-size:1.35rem}
p{margin:0 0 .8em}
button,input,select,textarea{font:inherit;color:inherit}
svg{flex-shrink:0}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}
.an{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.khung{max-width:var(--rong);margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.nhay-toi{position:absolute;left:8px;top:-64px;background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;z-index:300}
.nhay-toi:focus{top:8px}
.phu{color:var(--muc-phu)}
.mat-tren{font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muc-phu);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.mat-tren::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--nhan)}

/* ---------- Nút: MỘT nút chính (vàng); nút phụ chỉ là nền dịu, không viền ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 28px;border-radius:16px;border:0;font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;cursor:pointer;background:var(--nhan);color:var(--muc);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 18px -8px rgba(160,110,0,.55);transition:transform var(--nhanh) var(--em),box-shadow var(--nhanh),background var(--nhanh);-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.nut:hover{background:var(--nhan-dam)}
.nut:active{transform:scale(.97);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 3px 8px -4px rgba(160,110,0,.5)}
.nut[disabled]{opacity:.65;cursor:progress}
.nut-lon{min-height:60px;font-size:19px;padding-inline:32px}
.nut-phu{background:var(--tile);box-shadow:none;color:var(--navy)}
.nut-phu:hover{background:#DFD5BE}
.nut-tren-navy{background:var(--nhan)}
.nut-rong{width:100%}
.nut svg{transition:transform var(--vua) var(--em)}
.nut:hover svg.mui-ten{transform:translateX(4px)}
.lien-ket{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--nhan);text-decoration-thickness:3px;text-underline-offset:5px}
.lien-ket:hover{text-decoration-color:var(--navy)}
.hang-nut{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Đầu trang ---------- */
.dau{position:sticky;top:0;z-index:50;background:rgba(244,239,228,.92);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(216,206,185,.7)}
.dau .khung{display:flex;align-items:center;gap:8px;min-height:var(--cao-dau)}
.logo{display:flex;align-items:center;min-height:48px;margin-right:auto}
.logo img{height:34px;width:auto}
.gio-dau,.bt-menu{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 10px;border-radius:14px;border:0;background:transparent;color:var(--navy);text-decoration:none;font-weight:700;font-size:17px;cursor:pointer}
.gio-dau:hover,.bt-menu:hover{background:var(--nen-2)}
.so-gio{position:absolute;top:2px;right:0;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;display:grid;place-items:center;line-height:1}
.so-gio[data-so="0"]{display:none}
.nay{animation:nay .5s var(--em)}
@keyframes nay{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.menu-may{display:none}
.menu-may a{font-weight:700;text-decoration:none;padding:10px 14px;border-radius:12px;min-height:48px;display:inline-flex;align-items:center;color:var(--muc)}
.menu-may a:hover{background:var(--nen-2)}
.menu-may a[aria-current]{background:var(--nhan-nhat)}
@media (min-width:960px){.menu-may{display:flex;gap:2px;margin-right:8px}.bt-menu{display:none}.logo{margin-right:16px}.logo img{height:40px}}

/* Menu toàn màn (điện thoại) */
.menu-phu{position:fixed;inset:0;z-index:120;background:var(--nen);display:flex;flex-direction:column;padding:0 0 calc(var(--cao-day) + env(safe-area-inset-bottom,0px));overflow-y:auto;animation:menu-vao .28s var(--em)}
.menu-phu[hidden]{display:none}
@keyframes menu-vao{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-phu .khung{width:100%}
.menu-dau{display:flex;align-items:center;justify-content:space-between;min-height:var(--cao-dau)}
.menu-phu ul{list-style:none;margin:8px 0 0;padding:0}
.menu-phu li a,.menu-phu li button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:8px 0;font-family:var(--f-tieu-de);font-size:1.75rem;font-weight:700;color:var(--navy);text-decoration:none;background:none;border:0;border-bottom:1px solid var(--vien);cursor:pointer;text-align:left}
.menu-phu li a:hover{color:var(--muc-phu)}
.menu-tim{margin-top:16px}
html.mo-menu{overflow:hidden}
@media (min-width:960px){.menu-phu{display:none!important}}

/* Ô tìm */
.tim{position:relative;display:flex}
.tim input{width:100%;height:56px;border:0;border-radius:16px;padding:0 60px 0 18px;background:var(--the);font-size:18px;box-shadow:inset 0 0 0 2px var(--vien)}
.tim input:focus{outline:none;box-shadow:inset 0 0 0 3px var(--navy)}
.tim button{position:absolute;right:4px;top:4px;width:48px;height:48px;border:0;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer}

/* ---------- Thanh liên hệ cố định: Sản phẩm · Gọi · Zalo · Facebook ---------- */
.day{position:fixed;left:0;right:0;bottom:0;z-index:130;background:rgba(251,248,241,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--vien);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
.day a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--cao-day);font-size:16px;font-weight:700;line-height:1.1;text-decoration:none;color:var(--navy);padding:4px 2px;text-align:center;min-width:0;-webkit-tap-highlight-color:transparent}
.day a:active{background:var(--nen-2)}
.day a[aria-current]{color:var(--muc)}
.day a[aria-current]::before{content:"";position:absolute;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--nhan)}
.day a{position:relative}
.day svg{width:24px;height:24px}
@media (max-width:359px){.day a{font-size:16px;letter-spacing:-.02em}}
/* Máy tính: ba nút nổi góc phải dưới, có biểu tượng + chữ */
@media (min-width:960px){
  body{padding-bottom:0}
  .day{left:auto;right:20px;bottom:20px;top:auto;width:auto;display:flex;flex-direction:column;gap:10px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
  .day a{flex-direction:row;gap:10px;min-height:52px;padding:0 20px;border-radius:26px;background:var(--navy);color:#fff;box-shadow:var(--bong-len);font-size:17px}
  .day a:hover{background:var(--navy-2)}
  .day a:first-child{display:none}
  .day a[aria-current]::before{display:none}
}

/* ---------- Trang chủ: hero MỘT tiêu điểm ---------- */
.hero{padding-block:clamp(20px,4vw,56px) clamp(36px,7vw,88px);overflow:hidden}
.hero .khung{display:grid;gap:12px}
.hero h1{font-size:clamp(2.1rem,1.3rem + 4vw,4.3rem);line-height:1.08;max-width:15ch;margin-bottom:.15em}
.hero h1 em{font-style:italic;font-weight:500;position:relative;white-space:nowrap}
.hero-phu{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:var(--muc-phu);max-width:34ch;margin:8px 0 20px}
.hero-anh{position:relative;margin:4px -8px 0;aspect-ratio:3/2}
.hero-anh .vong{position:absolute;inset:6% 12% 4%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F1E6CB 0,#E9DDC0 70%);box-shadow:0 0 0 1px rgba(226,178,26,.35) inset}
.hero-anh img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(70,45,10,.18))}
@media (min-width:860px){
  .hero .khung{grid-template-columns:.95fr 1.05fr;grid-template-areas:"a c" "b c";column-gap:32px;row-gap:0}
  .hero-a{grid-area:a;align-self:end}.hero-b{grid-area:b;align-self:start}
  .hero-anh{grid-area:c;margin:0;align-self:center}
}
/* Khoảnh khắc chuyển động duy nhất: chữ vào lần lượt, ảnh mở ra — chỉ transform/clip-path, không làm chậm ảnh chính */
@media (prefers-reduced-motion:no-preference){
  .hero .mat-tren,.hero-phu,.hero .nut{animation:len-nhe .6s var(--em) both}
  .hero h1{animation:len-h1 .6s var(--em) both}
  .hero-phu{animation-delay:.1s}.hero .nut{animation-delay:.18s}
  .hero-anh .vong{animation:vong-no .9s var(--em) both}
  .hero-anh img{animation:mo-ra .7s var(--em) both}
  @keyframes len-nhe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes vong-no{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
  @keyframes mo-ra{from{transform:translateY(22px) scale(.95)}to{transform:none}}
  @keyframes len-h1{from{transform:translateY(14px)}to{transform:none}}
}
/* Ảnh nghiêng nhẹ khi cuộn (CSS gốc; trình duyệt cũ không hỗ trợ thì đứng yên) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-anh{animation:nghieng linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes nghieng{to{transform:translateY(26px) rotate(-2.5deg) scale(1.03)}}
  }
}

/* ---------- Khối chung ---------- */
.muc{padding-block:clamp(52px,10vw,96px)}
.muc-dau{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vw,32px)}
.muc-dau h2{margin:0}
.nhan-nho{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;padding:4px 12px;border-radius:20px;background:var(--xanh-nhat);color:var(--xanh)}
.vet{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:16px;color:var(--muc-phu);margin:6px 0 10px;align-items:center}
.vet a{min-height:44px;display:inline-flex;align-items:center}
.bao-loi{background:#F6E2DC;color:#7A1F13;border-radius:14px;padding:14px 16px;font-weight:700}
.bao-ok{background:var(--xanh-nhat);color:#144D34;border-radius:14px;padding:14px 16px;font-weight:700}
.the{background:var(--the);border-radius:var(--bo);box-shadow:var(--bong);padding:22px}
.the+.the{margin-top:16px}

/* "Bạn cần làm gì": danh sách chữ lớn có số, không phải lưới thẻ */
.viec{list-style:none;margin:0;padding:0;border-top:1px solid var(--vien)}
.viec a{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;min-height:96px;padding:14px 0;border-bottom:1px solid var(--vien);text-decoration:none;position:relative}
.viec .so{font-family:var(--f-tieu-de);font-size:1.1rem;font-weight:500;color:var(--muc-phu);grid-row:1/3;align-self:center;min-width:2ch}
.viec .ten{font-family:var(--f-tieu-de);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);color:var(--navy);line-height:1.15}
.viec .mo{grid-column:2;font-size:16px;color:var(--muc-phu);line-height:1.4}
.viec .tn{grid-row:1/3;grid-column:3;width:84px;height:84px;border-radius:50%;background:var(--tile);overflow:hidden;transition:transform var(--vua) var(--em)}
.viec .tn img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6px}
.viec a::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--nhan);transition:width var(--vua) var(--em)}
@media (hover:hover){.viec a:hover::after{width:100%}.viec a:hover .tn{transform:scale(1.06) rotate(-3deg)}}
.viec a:active .tn{transform:scale(.95)}

/* Món nổi bật: MỘT thẻ lớn, không phải lưới */
.noi-bat{display:grid;gap:20px;background:var(--the);border-radius:28px;box-shadow:var(--bong);overflow:hidden}
.noi-bat .anh{background:var(--tile);aspect-ratio:1/1;position:relative}
.noi-bat .anh img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.noi-bat .chu{padding:4px 24px 28px;display:flex;flex-direction:column;gap:6px}
.noi-bat h3{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);margin:0}
.noi-bat .qc{color:var(--muc-phu);font-size:17px}
.noi-bat .hang-nut{margin-top:14px}
@media (min-width:800px){.noi-bat{grid-template-columns:1fr 1fr;gap:0;align-items:stretch}.noi-bat .chu{justify-content:center;padding:36px 44px}}

/* Dải số liệu */
.so-lieu{background:var(--navy);color:#EFE8D8;border-radius:28px;padding:clamp(28px,5vw,56px);display:grid;gap:28px}
.so-lieu h2{color:#fff;margin:0;max-width:16ch}
.so-lieu .day-so{display:grid;gap:22px}
.so-lieu .s{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(239,232,216,.22);padding-top:16px}
.so-lieu .s b{font-family:var(--f-tieu-de);font-size:clamp(2.6rem,2rem + 3vw,4rem);line-height:1;font-weight:700;color:var(--nhan);font-variant-numeric:tabular-nums;min-width:3ch}
.so-lieu .s span{font-size:18px;max-width:26ch}
@media (min-width:820px){.so-lieu{grid-template-columns:1fr 1.3fr;align-items:center}}

/* Khối đại lý */
.dai-ly-khoi{display:grid;gap:16px}
.dai-ly-khoi h2{margin:0}
@media (min-width:820px){.dai-ly-khoi{grid-template-columns:1fr auto;align-items:center}}

/* ---------- Danh mục ---------- */
.trang-dau{padding-top:clamp(18px,4vw,44px)}
.trang-dau h1{margin-bottom:6px}
.loc{display:flex;gap:8px;overflow-x:auto;padding:6px 0 14px;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;-webkit-overflow-scrolling:touch}
.loc::-webkit-scrollbar{display:none}
.loc button{flex-shrink:0;min-height:48px;padding:0 20px;border-radius:24px;border:0;background:var(--nen-2);font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--nhanh),color var(--nhanh)}
.loc button[aria-pressed="true"]{background:var(--navy);color:#fff}
.luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@media (max-width:359px){.luoi{grid-template-columns:1fr}}
@media (min-width:700px){.luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}}
@media (min-width:1040px){.luoi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sp{display:flex;flex-direction:column;gap:0;min-width:0}
.sp-anh{display:block;aspect-ratio:1;background:var(--tile);border-radius:22px;overflow:hidden;position:relative;transition:transform var(--vua) var(--em)}
.sp-anh img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--vua) var(--em)}
@media (hover:hover){.sp:hover .sp-anh img{transform:scale(1.05)}}
.sp-nhan{position:absolute;left:10px;top:10px;background:var(--the);color:var(--navy);font-size:16px;font-weight:700;padding:2px 10px;border-radius:14px;white-space:nowrap}
.sp-than{padding:12px 2px 0;display:flex;flex-direction:column;gap:2px;flex:1}
.sp-ten{min-height:44px;font-family:var(--f-tieu-de);font-size:1.18rem;font-weight:700;line-height:1.25;text-decoration:none;color:var(--navy);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-qc{font-size:16px;color:var(--muc-phu)}
.gia{font-family:var(--f-tieu-de);font-size:1.3rem;font-weight:700;color:var(--muc);font-variant-numeric:lining-nums}
.gia-lh{font-size:17px;font-weight:700;color:var(--muc-phu)}
.sp .gia,.sp .gia-lh{margin-bottom:12px}
.sp .nut{margin-top:auto;min-height:52px;font-size:17px;padding-inline:14px}

/* ---------- Chi tiết ---------- */
.ct{display:grid;gap:22px}
@media (min-width:900px){.ct{grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}.ct .cot-anh{position:sticky;top:calc(var(--cao-dau) + 20px)}}
.ct>div{min-width:0}
.anh-chinh{background:var(--tile);border-radius:28px;aspect-ratio:1;overflow:hidden}
.anh-chinh img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.anh-nho{display:flex;gap:10px;overflow-x:auto;padding-top:12px}
.anh-nho button{flex-shrink:0;width:72px;height:72px;border-radius:16px;border:0;background:var(--tile);padding:2px;cursor:pointer;box-shadow:none;transition:box-shadow var(--nhanh)}
.anh-nho button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--navy)}
.anh-nho img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;border-radius:14px}
.ct h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.9rem);margin-bottom:8px}
.gia-to{font-family:var(--f-tieu-de);font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);font-weight:700;color:var(--muc);line-height:1.1}
.chon-qc{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.chon-qc button{min-height:52px;padding:8px 18px;border-radius:14px;border:0;background:var(--nen-2);font-weight:700;cursor:pointer;text-align:left;transition:background var(--nhanh),box-shadow var(--nhanh)}
.chon-qc button[aria-pressed="true"]{background:var(--nhan-nhat);box-shadow:0 0 0 3px var(--navy)}
.nhan-o{font-weight:700;display:block;margin-bottom:8px}
.so-luong{display:inline-flex;align-items:center;background:var(--nen-2);border-radius:16px;overflow:hidden}
.so-luong button{width:56px;height:56px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;color:var(--navy)}
.so-luong button:active{background:var(--tile)}
.so-luong button[disabled]{opacity:.35}
.so-luong output,.so-luong span{min-width:48px;text-align:center;font-family:var(--f-tieu-de);font-size:1.5rem;font-weight:700}
.so-luong.nho button{width:48px;height:48px}.so-luong.nho span{min-width:34px;font-size:1.25rem}
.ds{padding-left:22px;margin:0 0 12px}.ds li{margin-bottom:8px}
.ti-le{display:flex;align-items:baseline;gap:14px;background:var(--navy);color:#EFE8D8;border-radius:22px;padding:18px 24px;margin:22px 0}
.ti-le b{font-family:var(--f-tieu-de);font-size:clamp(2.4rem,2rem + 2vw,3.4rem);line-height:1;color:var(--nhan)}
.thanh-mua{position:fixed;left:0;right:0;bottom:calc(var(--cao-day) + env(safe-area-inset-bottom,0px));z-index:55;background:rgba(251,248,241,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--vien);padding:10px 16px;display:flex;gap:10px;align-items:center}
.thanh-mua .gia-tm{flex:1;min-width:0;line-height:1.15}
.thanh-mua .gia-tm small{display:block;font-size:16px;color:var(--muc-phu)}
.thanh-mua .gia-tm b{font-family:var(--f-tieu-de);font-size:clamp(1.15rem,1rem + 1.2vw,1.5rem);white-space:nowrap}
.thanh-mua .nut{min-height:56px;padding-inline:20px}
.thanh-mua #nut-gio{padding-inline:0;width:56px;flex:none}
body.co-thanh-mua{padding-bottom:calc(var(--cao-day) + 78px + env(safe-area-inset-bottom,0px))}
@media (min-width:960px){.thanh-mua{position:static;background:none;border:0;padding:0;margin:18px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}.thanh-mua .gia-tm{display:none}body.co-thanh-mua{padding-bottom:0}}
.thong-so{margin-top:26px}
.thong-so h2{font-size:1.45rem;margin-top:26px}

/* ---------- Tiến độ đặt hàng ---------- */
.tien-do{display:flex;align-items:center;margin:2px 0 20px;list-style:none;padding:0}
.tien-do li{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--muc-phu);flex:0 0 auto}
.tien-do li+li{flex:1 1 auto}
.tien-do li+li::before{content:"";display:block;flex:1 1 auto;min-width:10px;height:3px;border-radius:2px;background:var(--vien);margin-inline:8px}
.tien-do .d{width:28px;height:28px;border-radius:50%;background:var(--nen-2);display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--muc-phu)}
.tien-do li[data-x="xong"]{color:var(--navy)}
.tien-do li[data-x="xong"] .d{background:var(--navy);color:#fff}
.tien-do li[data-x="dang"]{color:var(--muc)}
.tien-do li[data-x="dang"] .d{background:var(--nhan);color:var(--muc);box-shadow:0 0 0 4px var(--nhan-nhat)}
.tien-do li[data-x="xong"]+li::before{background:var(--navy)}
@media (max-width:520px){.tien-do li span.t{display:none}.tien-do li[data-x="dang"] span.t{display:inline}}

/* ---------- Giỏ + đặt hàng ---------- */
.mon{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--vien)}
.mon:last-child{border-bottom:0}
.mon .tn{width:76px;height:76px;border-radius:16px;background:var(--tile);overflow:hidden}
.mon img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mon-ten{font-weight:700;line-height:1.35}
.mon-dong{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:8px}
.xoa{min-height:48px;min-width:48px;border:0;background:none;color:var(--muc-phu);font-weight:700;text-decoration:underline;cursor:pointer;padding:0 6px}
.tong{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:18px;padding-top:12px}
.tong b{font-family:var(--f-tieu-de);font-size:1.5rem;font-weight:700}
.tong.lon{border-top:2px solid var(--navy);margin-top:10px}
.tong.lon b{font-size:1.9rem}
.dat{display:grid;gap:16px}
@media (min-width:900px){.dat{grid-template-columns:1.2fr .8fr;align-items:start;gap:28px}.dat .cot-phai{position:sticky;top:calc(var(--cao-dau) + 20px)}}
.o-nhap{margin-bottom:18px}
.o-nhap label{display:block;font-weight:700;margin-bottom:6px}
.o-nhap input,.o-nhap select,.o-nhap textarea{width:100%;min-height:58px;border:0;border-radius:14px;padding:12px 16px;background:#fff;font-size:18px;box-shadow:inset 0 0 0 2px var(--vien);transition:box-shadow var(--nhanh)}
.o-nhap select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231B2A41' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.o-nhap input:focus,.o-nhap select:focus,.o-nhap textarea:focus{box-shadow:inset 0 0 0 3px var(--navy),0 0 0 5px rgba(242,178,26,.5);outline:none}
.o-nhap.sai input,.o-nhap.sai select{box-shadow:inset 0 0 0 3px var(--do)}
.o-nhap .loi-o{color:var(--do);font-weight:700;font-size:16px;margin-top:6px}
.hai-o{display:grid;gap:0 14px}
@media (min-width:600px){.hai-o{grid-template-columns:1fr 1fr}}
.bay{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.giao-toi{display:flex;gap:12px;align-items:center;background:var(--nhan-nhat);border-radius:16px;padding:14px 16px}
.giao-toi div{flex:1;min-width:0;overflow-wrap:anywhere}
.giao-toi button{min-height:48px;padding:0 16px;border-radius:12px;border:0;background:var(--the);font-weight:700;cursor:pointer}
.cach-tra{display:grid;gap:10px}
.cach-tra label{display:flex;gap:12px;align-items:center;min-height:60px;padding:10px 16px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--vien);cursor:pointer;font-weight:700}
.cach-tra input{appearance:none;-webkit-appearance:none;width:44px;height:44px;margin:0 -6px 0 -10px;border:0;border-radius:50%;flex-shrink:0;cursor:pointer;background:radial-gradient(circle,#fff 0 9px,var(--navy) 10px 12px,transparent 13px)}
.cach-tra input:checked{background:radial-gradient(circle,var(--navy) 0 5px,#fff 6px 9px,var(--navy) 10px 12px,transparent 13px)}
.cach-tra input:focus-visible{outline:3px solid var(--ring);outline-offset:-2px}
.cach-tra label:has(input:checked){box-shadow:inset 0 0 0 3px var(--navy);background:var(--nhan-nhat)}
.cach-giao .cg-chu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cach-giao .cg-chu small{font-size:16px;font-weight:500;color:var(--muc-phu)}
.cach-giao .cg-dong{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px}
.cach-giao .cg-phi{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto}
.mot-cach{display:flex;gap:12px;align-items:center;font-weight:700}
.mo-them{background:none;border:0;min-height:48px;font-weight:700;text-decoration:underline;text-decoration-color:var(--nhan);text-decoration-thickness:3px;text-underline-offset:5px;cursor:pointer;padding:0}
.nut-dat{position:sticky;bottom:calc(var(--cao-day) + env(safe-area-inset-bottom,0px) + 10px);z-index:40;flex-direction:column;gap:0;line-height:1.2}
.nut-dat small{font-size:16px;font-weight:700}
@media (max-width:899px){
  body[data-trang="dat"]{padding-bottom:calc(var(--cao-day) + 96px + env(safe-area-inset-bottom,0px))}
  .nut-dat{position:fixed;left:14px;right:14px;width:auto;bottom:calc(var(--cao-day) + env(safe-area-inset-bottom,0px) + 10px);margin:0!important;z-index:58}
}
@media (min-width:900px){.nut-dat{position:static}}
.dang-gui::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:cham 1s steps(4,end) infinite}
@keyframes cham{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* Đặt xong: dấu tích vẽ nét + vòng sáng lan nhẹ */
.xong{text-align:center;padding:clamp(28px,6vw,56px) 22px}
.dau-tich{position:relative;width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.dau-tich::before,.dau-tich::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--nhan);opacity:0}
.dau-tich path{stroke-dasharray:40;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .co-js .dau-tich{animation:no-ra .55s var(--em) both}
  .co-js .dau-tich path{stroke-dashoffset:40;animation:ve-tich .55s .3s var(--em) forwards}
  .co-js .dau-tich::before{animation:vong-sang 1.5s .5s ease-out both}
  .co-js .dau-tich::after{animation:vong-sang 1.5s .95s ease-out both}
  @keyframes no-ra{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes ve-tich{to{stroke-dashoffset:0}}
  @keyframes vong-sang{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
}
.ma-don{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-tieu-de);font-size:1.9rem;font-weight:700;letter-spacing:.03em;background:var(--nhan-nhat);padding:6px 18px;border-radius:14px;margin:6px 0 12px}
.qr{max-width:320px;margin:0 auto;background:#fff;border-radius:var(--bo);padding:14px;box-shadow:var(--bong)}
.qr img{width:100%;aspect-ratio:1;object-fit:contain}
.bang-ck{text-align:left;margin:14px auto 0;max-width:440px;font-size:17px}
.bang-ck div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--vien);overflow-wrap:anywhere}
.buoc-vao{animation:buoc-vao .4s var(--em)}
@keyframes buoc-vao{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Theo dõi đơn (kiểu Shopee, gọn) ---------- */
.theo-doi h1{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);margin:4px 0 4px}
.dong-thoi-gian{list-style:none;margin:8px 0 0;padding:0}
.moc{position:relative;display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding-bottom:22px}
.moc:last-child{padding-bottom:0}
.moc::before{content:"";position:absolute;left:16px;top:34px;bottom:-2px;width:3px;border-radius:2px;background:var(--vien);transform-origin:top}
.moc:last-child::before{display:none}
.moc[data-x="xong"]::before{background:var(--navy)}
.moc .cham{width:34px;height:34px;border-radius:50%;background:var(--nen-2);display:grid;place-items:center;color:var(--muc-phu);z-index:1}
.moc[data-x="xong"] .cham{background:var(--navy);color:#fff}
.moc[data-x="dang"] .cham{background:var(--nhan);color:var(--muc);box-shadow:0 0 0 5px var(--nhan-nhat)}
.moc[data-x="huy"] .cham{background:var(--do);color:#fff}
.moc b{display:block;font-size:19px;line-height:1.3}
.moc[data-x="cho"] b{color:var(--muc-phu);font-weight:700}
.moc .ghi{font-size:16px;color:var(--muc-phu)}
@media (prefers-reduced-motion:no-preference){
  .moc[data-x="dang"] .cham{animation:tho 2s ease-in-out infinite}
  @keyframes tho{0%,100%{box-shadow:0 0 0 4px var(--nhan-nhat)}50%{box-shadow:0 0 0 9px rgba(248,231,182,.35)}}
  .moc[data-x="xong"]::before{animation:noi-dai .6s var(--em) both}
  @keyframes noi-dai{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
.van-don{background:var(--nen-2);border-radius:14px;padding:12px 14px;margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.van-don .m{font-family:var(--f-tieu-de);font-size:1.25rem;font-weight:700;letter-spacing:.02em;overflow-wrap:anywhere}
.chep{min-height:48px;padding:0 16px;border-radius:12px;border:0;background:var(--the);font-weight:700;cursor:pointer}
.chep[data-da]{background:var(--xanh-nhat);color:var(--xanh)}
.dong-mon{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--vien)}
.dong-mon:last-of-type{border-bottom:0}
.dong-mon .tn{width:56px;height:56px;border-radius:12px;background:var(--tile);overflow:hidden}
.dong-mon img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.dong-mon .g{font-weight:700;white-space:nowrap}

/* Bảng giá sỉ, hỏi đáp */
.the-si{display:grid;gap:14px}
details{background:var(--the);border-radius:var(--bo-nho);box-shadow:var(--bong);margin-bottom:12px}
summary{min-height:60px;padding:14px 18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;line-height:1;color:var(--navy);transition:transform var(--nhanh)}
details[open] summary::after{transform:rotate(45deg)}
details>div{padding:0 18px 18px}
.buoc{display:grid;gap:14px;counter-reset:b;padding:0;margin:0}
.buoc li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.buoc li::before{counter-increment:b;content:counter(b);font-family:var(--f-tieu-de);font-size:2.6rem;line-height:1;color:var(--nhan);font-weight:700;min-width:1.1ch}
.buoc b{display:block;font-size:19px}
@media (min-width:860px){.buoc{grid-template-columns:repeat(3,1fr)}}

/* ---------- Dòng liên hệ (trang liên hệ, đại lý, chân trang): biểu tượng + chữ ---------- */
.lh-dong{display:flex;align-items:center;gap:16px;min-height:72px;padding:12px 18px;border-radius:18px;background:var(--the);box-shadow:var(--bong);text-decoration:none;color:var(--muc)}
.lh-dong+.lh-dong{margin-top:12px}
.lh-dong .bt{width:48px;height:48px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.lh-dong span{min-width:0;overflow-wrap:break-word}
.lh-dong b{display:block;font-size:19px;line-height:1.25}
.lh-dong small{display:block;font-size:16px;color:var(--muc-phu)}
.lh-dong:active{transform:scale(.99)}
@media (hover:hover){.lh-dong:hover{box-shadow:var(--bong-len)}}

/* ---------- Chân trang ---------- */
.chan{background:var(--navy);color:#E7E0CF;padding-block:clamp(40px,7vw,72px) 28px;font-size:17px;margin-top:clamp(40px,6vw,80px)}
.chan .khung{display:grid;gap:30px}
.chan a{color:#fff;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.chan a:hover{text-decoration:underline;text-decoration-color:var(--nhan);text-underline-offset:4px;text-decoration-thickness:3px}
.chan h2{color:var(--nhan);font-family:var(--f-than);font-size:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.chan .lh-chan{display:flex;flex-direction:column;gap:2px}
.chan .lh-chan a{gap:12px;font-weight:700;font-size:18px}
.chan .lh-chan svg{color:var(--nhan)}
.chan .phap{border-top:1px solid rgba(231,224,207,.2);padding-top:18px;color:#C9C1AE;font-size:16px}
@media (min-width:860px){.chan .khung{grid-template-columns:1.3fr 1fr 1fr}.chan .phap{grid-column:1/-1}}

/* Báo nhanh */
.bao-nhanh{position:fixed;left:50%;bottom:calc(var(--cao-day) + env(safe-area-inset-bottom,0px) + 90px);transform:translate(-50%,0);z-index:90;background:var(--navy);color:#fff;padding:10px 10px 10px 20px;border-radius:30px;display:flex;align-items:center;gap:12px;font-weight:700;box-shadow:0 14px 34px rgba(20,30,50,.38);max-width:calc(100% - 24px);width:max-content}
.bao-nhanh[hidden]{display:none}
.bao-nhanh a{background:var(--nhan);color:var(--muc);text-decoration:none;border-radius:22px;padding:0 18px;min-height:48px;display:inline-flex;align-items:center;font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.bao-nhanh{animation:truot-len .32s var(--em)}@keyframes truot-len{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}}
@media (min-width:960px){.bao-nhanh{bottom:24px}}

/* Xoay ngang điện thoại */
.xoay-doc{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .xoay-doc{display:flex;position:fixed;inset:0;z-index:1000;background:var(--nen);color:var(--navy);flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
  .xoay-doc b{font-family:var(--f-tieu-de);font-size:26px}
  .xoay-doc span{font-size:18px;color:var(--muc-phu)}
  html:has(.xoay-doc){overflow:hidden}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:no-preference){.xoay-doc svg{animation:xoay 2.2s var(--em) infinite}@keyframes xoay{0%,20%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}}

/* Nút chat nổi của Nova: điện thoại ẩn (đã có Zalo ở thanh dưới; mở từ menu) */
@media (max-width:959px){body .nvc-nut{display:none!important}}

@view-transition{navigation:auto}
/* ---------- Hiện dần khi cuộn: mặc định HIỆN; chỉ ẩn chờ khi <html class="co-js"> ---------- */
@media (prefers-reduced-motion:no-preference){
  .co-js .hien{opacity:0;transform:translateY(18px);transition:opacity .6s var(--em),transform .6s var(--em)}
  .co-js .hien.da-hien,.hien-het .hien{opacity:1!important;transform:none!important}
  .hien:nth-child(2){transition-delay:70ms}.hien:nth-child(3){transition-delay:140ms}.hien:nth-child(4){transition-delay:210ms}
  .co-js main{animation:vao .3s var(--em)}
  @keyframes vao{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  /* ảnh lớn mở ra khi cuộn tới (CSS gốc, có dự phòng) */
  @supports (animation-timeline:view()){
    .mo-khi-cuon{animation:mo-cuon linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    @keyframes mo-cuon{from{clip-path:inset(7% 5% round 28px);opacity:.4}to{clip-path:inset(0 round 28px);opacity:1}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .co-js .hien{opacity:1;transform:none}
  .dau-tich path{stroke-dashoffset:0}
  @view-transition{navigation:none}
}
/* ảnh có phông phòng chụp thật (không nền trắng): lấp đầy ô, không multiply */
.canh img{object-fit:cover!important;mix-blend-mode:normal!important}
.dm-dong{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;font-size:16px}
#si:empty,#don:empty{min-height:100vh}

/* 01/10/2026: phần tử có thuộc tính hidden LUÔN ẩn — trước đây .nut{display:inline-flex} đè lên, nút "Thêm vào giỏ" của món chờ giá vẫn hiện */
[hidden]{display:none!important}
/* 01/10/2026: thông báo nổi không chặn bấm (báo gỡ món dài 2 dòng từng che nút Đặt hàng trên máy tính 7 giây) — chỉ liên kết trong đó bấm được */
.bao-nhanh{pointer-events:none}.bao-nhanh a{pointer-events:auto}
/* 01/10/2026: câu lỗi có đường link dài (luật vùng xa) từng làm trang 360px tràn ngang 419px, khối Giao tới đè nút Đặt hàng — ngắt từ dài */
.bao-loi,.bao-ok,.loi-o{overflow-wrap:anywhere}

/* =====================================================================================================
   MẪU B — vòng B2, 29/09/2026. Lớp phong cách đè lên lõi chung (app.css, chép từ mẫu D 29/09).
   Giữ bản sắc B: nền sáng, nút ĐEN, nhấn ĐỎ, chữ tiêu đề IN HOA đậm (Be Vietnam Pro 700 — đủ dấu tiếng Việt, tải từ /fonts của máy chủ),
   hero ảnh lớn + slogan "Sạch nhanh. Bóng lâu." và khối "Rửa xe đúng 3 bước" GIỮ NGUYÊN chữ, cỡ, vị trí (anh Hảo chọn vì slogan to).
   KHÔNG mang từ D sang: bảng màu be/kem, phông Fraunces có chân, vàng.
   "Làm dịu" chỉ bằng cách chỉnh trong chính bảng màu B: trắng tinh -> trắng ngả xám lạnh rất nhẹ (#F5F7F9), bóng đổ lạnh nhạt,
   màu đỏ CHỈ ở nút nhỏ / gạch nhấn / mốc đang làm — không còn mảng đỏ lớn.
   ===================================================================================================== */
:root{
  --nen:#F5F7F9; --nen-2:#E8ECF0; --tile:#EDF0F4; --the:#FBFCFD; --vien:#D6DCE3;
  --muc:#14161A; --muc-phu:#525A66; --navy:#15171B; --navy-2:#2B2F36;
  --nhan:#E10600; --nhan-dam:#B80500; --nhan-nhat:#E6EAEF;
  --do:#C40A00; --do-nhat:#F7D9D6; --xanh:#146C2E; --xanh-nhat:#E1F0E6; --ring:#2456C8;
  --bong:0 1px 2px rgba(16,24,40,.06),0 10px 28px -12px rgba(16,24,40,.16);
  --bong-len:0 2px 4px rgba(16,24,40,.06),0 20px 40px -14px rgba(16,24,40,.28);
  --bo:10px; --bo-nho:8px;
  --f-tieu-de:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --chu-h1:clamp(1.9rem,1.3rem + 3vw,3.2rem); --chu-h2:clamp(1.45rem,1.15rem + 1.6vw,2.1rem);
}
html,body{background:var(--nen)}
h1,h2,h3{font-weight:700;letter-spacing:.2px;color:var(--navy)}
h1,h2{text-transform:uppercase}
h3{font-size:1.25rem}
.mat-tren{letter-spacing:.12em}
.mat-tren::before{background:var(--nhan)}

/* ---- Nút: MỘT kiểu chính = đen; nhấn đỏ chỉ ở chi tiết nhỏ ---- */
.nut{background:var(--navy);color:#fff;border-radius:10px;box-shadow:0 8px 18px -10px rgba(16,24,40,.55)}
.nut:hover{background:#000}
.nut:active{box-shadow:0 2px 6px -3px rgba(16,24,40,.5)}
.nut-phu{background:var(--nen-2);color:var(--navy);box-shadow:none}
.nut-phu:hover{background:#DCE1E7}
.lien-ket{text-decoration-color:var(--nhan)}
.lien-ket:hover{text-decoration-color:var(--navy)}

/* ---- Đầu trang: logo vàng trên ô đen (giữ như B cũ), nền sáng lạnh ---- */
.dau{background:rgba(245,247,249,.94);border-bottom:1px solid var(--vien)}
.logo{background:#111;border-radius:10px;padding:5px 12px;min-height:48px}
.logo img{height:34px}
@media (min-width:960px){.logo img{height:38px}}
.gio-dau:hover,.bt-menu:hover{background:var(--nen-2)}
.so-gio{background:var(--nhan);color:#fff;box-shadow:0 0 0 2px var(--nen)}
.menu-may a{text-transform:uppercase;letter-spacing:.4px;font-size:16px;border-radius:0}
.menu-may a:hover{background:none;color:var(--nhan-dam)}
.menu-may a[aria-current]{background:none;color:var(--do);box-shadow:inset 0 -3px 0 var(--nhan)}
.menu-phu{background:var(--nen)}
.menu-phu li a,.menu-phu li button{font-family:var(--f-tieu-de);font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.menu-dau .logo{background:#111}
.tim input{background:var(--the);border-radius:10px;box-shadow:inset 0 0 0 2px var(--vien)}
.tim input:focus{box-shadow:inset 0 0 0 3px var(--navy)}
.tim button{background:var(--navy);border-radius:8px}

/* ---- Thanh liên hệ dưới: Sản phẩm · Gọi · Zalo · Facebook ---- */
.day{background:rgba(251,252,253,.96);border-top:1px solid var(--vien)}
.day a:active{background:var(--nen-2)}
.day a[aria-current]::before{background:var(--nhan)}
@media (min-width:960px){.day a{border-radius:12px;background:var(--navy)}.day a:hover{background:#000}}

/* ---- HERO B: giữ nguyên chữ / cỡ / chỗ đặt (min-height 488 = 440 cũ + phần đầu trang thấp hơn 48px → slogan vẫn ở đúng tầm mắt cũ) ---- */
.b-bang{position:relative;color:#fff;min-height:488px;display:flex;align-items:flex-end;overflow:hidden;background:#20242B}
.b-bang>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
.b-bang::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.15) 0%,rgba(10,12,16,.72) 62%,rgba(10,12,16,.85) 100%)}
.b-bang .khung{position:relative;z-index:1;padding-block:28px 30px;width:100%}
.b-bang h1{color:#fff;font-size:clamp(36px,11vw,64px);line-height:1.05;margin-bottom:12px;letter-spacing:.3px;text-wrap:initial;max-width:none}
.b-tren{color:#fff;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:16px;margin-bottom:8px;display:inline-block;border-bottom:3px solid var(--nhan);padding-bottom:4px}
.b-mo{font-size:18px;color:#F2F2F2;max-width:560px}
.b-bang .nut{background:#fff;color:#111}
.b-bang .nut:hover{background:#ECEFF2}
.b-bang .nut-trong{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.b-bang .nut-trong:hover{background:rgba(255,255,255,.14)}
@media (min-width:900px){.b-bang{min-height:520px;align-items:center}.b-bang::after{background:linear-gradient(90deg,rgba(10,12,16,.8) 0%,rgba(10,12,16,.55) 45%,rgba(10,12,16,.05) 100%)}.b-bang .khung{padding-block:60px}.b-bang .hang-nut{max-width:520px}}
/* vào khung: chỉ chữ nhỏ và nút trượt lên (h1 chỉ dịch, không mờ → không kéo chậm LCP) */
@media (prefers-reduced-motion:no-preference){
  .b-tren,.b-mo,.b-bang .hang-nut{animation:len-nhe .6s var(--em) both}
  .b-mo{animation-delay:.1s}.b-bang .hang-nut{animation-delay:.18s}
  .b-bang h1{animation:len-h1 .6s var(--em) both}
  .b-bang>img{animation:b-lo .9s var(--em) both}
  @keyframes b-lo{from{transform:scale(1.08)}to{transform:scale(1)}}
}
/* ảnh hero trôi + phóng nhẹ khi cuộn (CSS gốc; trình duyệt cũ đứng yên) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .b-bang>img{animation:b-cuon linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes b-cuon{from{transform:scale(1)}to{transform:translateY(22px) scale(1.1)}}
  }
}

/* ---- Rửa xe đúng 3 bước (giữ) ---- */
.b-quy-trinh{display:grid;gap:12px}
@media (min-width:700px){.b-quy-trinh{grid-template-columns:repeat(3,1fr)}}
.b-quy-trinh a{display:block;position:relative;border-radius:var(--bo);overflow:hidden;text-decoration:none;color:#fff;aspect-ratio:16/10;background:#20242B}
.b-quy-trinh img{width:100%;height:100%;object-fit:cover;transition:transform var(--vua) var(--em)}
@media (hover:hover){.b-quy-trinh a:hover img{transform:scale(1.04)}}
.b-quy-trinh span{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(10,12,16,.82));font-weight:700;font-size:19px;line-height:1.3}
.b-quy-trinh small{display:block;color:#fff;font-size:16px;text-transform:uppercase;letter-spacing:1px;opacity:.9}
.b-quy-trinh a:active img{transform:scale(1.02)}
.muc-dau a.lien-ket{white-space:nowrap}

/* ---- "Chọn theo nhu cầu": danh sách chữ lớn có số (không phải lưới thẻ giống nhau) ---- */
.viec .so{font-family:var(--f-tieu-de);font-weight:700;color:var(--nhan-dam)}
.viec .ten{font-family:var(--f-tieu-de);font-weight:700;text-transform:uppercase;letter-spacing:.2px;font-size:clamp(1.3rem,1.1rem + 1.1vw,1.9rem)}
.viec .tn{border-radius:10px;background:var(--tile)}
.viec a::after{background:var(--nhan)}
.viec .tn img{padding:4px}

/* ---- Món nổi bật, số liệu, khối đại lý ---- */
.noi-bat{border-radius:14px;background:var(--the)}
.noi-bat .anh{background:var(--tile)}
.noi-bat h3{font-size:clamp(1.4rem,1.1rem + 1.5vw,2.1rem)}
.so-lieu{background:var(--the);color:var(--muc);border-radius:14px;box-shadow:var(--bong)}
.so-lieu h2{color:var(--navy);max-width:none}
.so-lieu .s{border-top:1px solid var(--vien)}
.so-lieu .s b{font-family:var(--f-tieu-de);font-weight:700;color:var(--navy)}
.so-lieu .s b::after{content:"";display:block;width:34px;height:4px;border-radius:2px;background:var(--nhan);margin-top:10px}
.dai-ly-khoi{background:var(--navy);color:#fff;border-radius:14px;padding:clamp(24px,5vw,44px)}
.dai-ly-khoi h2{color:#fff}
.dai-ly-khoi .phu{color:#C9CFD8}
.dai-ly-khoi .nut{background:#fff;color:#111}
.dai-ly-khoi .nut:hover{background:#ECEFF2}
.nhan-nho{background:var(--xanh-nhat);color:var(--xanh)}

/* ---- Sản phẩm ---- */
.loc button{border-radius:8px;text-transform:uppercase;letter-spacing:.3px;font-size:16px;background:var(--nen-2)}
.loc button[aria-pressed="true"]{background:var(--navy);color:#fff}
.sp-anh{border-radius:12px;background:var(--tile)}
.sp-nhan{background:var(--nhan);color:#fff;border-radius:6px}
.sp-ten{font-family:var(--f-tieu-de);font-weight:700;font-size:1.05rem;line-height:1.3;text-transform:none}
.gia{font-family:var(--f-tieu-de);font-weight:700}
.nhan-anh{position:absolute;left:8px;bottom:8px;background:rgba(251,252,253,.94);color:var(--muc-phu);font-size:16px;font-weight:700;padding:2px 10px;border-radius:6px;line-height:1.35}
.anh-chinh{position:relative;border-radius:14px}
.anh-nho button{border-radius:10px}
.anh-nho img{border-radius:8px}
.gia-to{font-family:var(--f-tieu-de);font-weight:700}
.chon-qc button{border-radius:8px;background:var(--nen-2)}
.chon-qc button[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 3px var(--navy)}
.so-luong{border-radius:10px;background:var(--nen-2)}
.so-luong output,.so-luong span{font-family:var(--f-tieu-de);font-weight:700}
.ti-le{border-radius:12px}
.ti-le b{font-family:var(--f-tieu-de);color:#FF6A5F}
.thanh-mua{background:rgba(251,252,253,.97)}
.thanh-mua .gia-tm b{font-family:var(--f-tieu-de)}
.ct h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem)}

/* ---- Tiến độ + mốc đơn: đang làm = ĐỎ, đã xong = ĐEN ---- */
.tien-do li[data-x="dang"] .d{background:var(--do);color:#fff;box-shadow:0 0 0 4px var(--do-nhat)}
.moc[data-x="dang"] .cham{background:var(--do);color:#fff;box-shadow:0 0 0 5px var(--do-nhat)}
@media (prefers-reduced-motion:no-preference){
  .moc[data-x="dang"] .cham{animation:tho-b 2s ease-in-out infinite}
  @keyframes tho-b{0%,100%{box-shadow:0 0 0 4px var(--do-nhat)}50%{box-shadow:0 0 0 9px rgba(247,217,214,.35)}}
}
.theo-doi h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.van-don{background:var(--nen-2);border-radius:10px}
.van-don .m{font-family:var(--f-tieu-de);font-weight:700}
.chep{border-radius:8px;background:#fff}
.chep[data-da]{background:var(--xanh-nhat);color:var(--xanh)}

/* ---- Form, giỏ, đặt hàng ---- */
.the{border-radius:var(--bo);background:var(--the)}
.o-nhap input,.o-nhap select,.o-nhap textarea{border-radius:10px;background:#fff}
.o-nhap input:focus,.o-nhap select:focus,.o-nhap textarea:focus{box-shadow:inset 0 0 0 3px var(--navy),0 0 0 5px rgba(225,6,0,.22)}
.giao-toi{border-radius:10px;background:var(--nen-2)}
.giao-toi button{border-radius:8px;background:#fff}
.cach-tra label{border-radius:10px}
.cach-tra label:has(input:checked){background:#fff}
.mo-them{text-decoration-color:var(--nhan)}
.mon .tn,.dong-mon .tn{border-radius:10px}
.dau-tich{background:var(--xanh)}
.dau-tich::before,.dau-tich::after{border-color:var(--xanh)}
.ma-don{background:var(--navy);color:#fff;font-family:var(--f-tieu-de);font-weight:700;border-radius:10px}
.qr{border-radius:12px}
.buoc li::before{font-family:var(--f-tieu-de);color:var(--nhan);font-weight:700}
details{border-radius:10px}
.lh-dong{border-radius:12px}
.lh-dong .bt{background:var(--navy);border-radius:10px}

/* ---- Chân trang ---- */
.chan{background:var(--navy);color:#DDE2E8}
.chan h2{color:#FF6A5F;font-family:var(--f-than);text-transform:uppercase}
.chan .lh-chan svg{color:#FF6A5F}
.chan .phap{color:#B7BFCA;border-top-color:rgba(221,226,232,.2)}
.chan a:hover{text-decoration-color:var(--nhan)}
.bao-nhanh{background:var(--navy)}
.bao-nhanh a{background:#fff;color:#111}
.xoay-doc{background:var(--nen)}
.nhay-toi{background:var(--navy)}

/* ---- Sửa sau kiểm 320px / liên kết trong hỏi đáp ---- */
.logo{flex-shrink:0}.logo img{width:auto;flex-shrink:0}
@media (max-width:359px){
  .logo{padding:5px 8px}.logo img{height:30px}
  .dau .bt-menu span{display:none}.dau .bt-menu{min-width:52px}
}
details>div a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}

/* ---- Nhẹ máy yếu: bỏ làm mờ nền (backdrop-filter) ở thanh đầu / thanh đáy / thanh mua — nền đặc, đọc rõ hơn trên ảnh, đỡ tốn CPU điện thoại rẻ ---- */
.dau{background:rgba(245,247,249,.98);-webkit-backdrop-filter:none;backdrop-filter:none}
.day{background:rgba(251,252,253,.99);-webkit-backdrop-filter:none;backdrop-filter:none}
.thanh-mua{background:rgba(251,252,253,.99);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (min-width:960px){.day{background:none}}
.tong span{flex:none}
.tong.lon b{font-size:1.65rem}
/* nhãn "Tự sản xuất" lặp ở nhiều thẻ → nền đen (đỏ chỉ để nhấn, không rải khắp danh sách) */
.sp-nhan{background:var(--navy);color:#fff}
.nhan-anh{left:6px;bottom:6px;padding:2px 8px;white-space:nowrap}

/* Ghim vị trí nhận hàng (Lalamove, 30/09/2026 tối): lớp phủ toàn màn, bản đồ kéo được, ghim đỏ cố định giữa khung (CSS, không ảnh). */
.o-ghim{margin-top:12px;padding-top:12px;border-top:1px solid var(--vien);font-size:16px}
.hang-ghim{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#ds-giao[hidden]~.o-ghim{border-top:0;margin-top:0;padding-top:0}
#da-ghim{font-weight:700}
.hang-ghim .nut{min-height:48px}
body.khoa-cuon{overflow:hidden}
.ban-do-hop{position:fixed;inset:0;z-index:1000;background:var(--the,#fff);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.bd-dau{padding:12px 16px 8px}
.bd-dau h2{font-size:1.3rem;margin:0 0 4px}
.bd-dau p{margin:0;font-size:16px;color:var(--muc-phu)}
.bd-khung{position:relative;flex:1 1 auto;min-height:240px}
#bd{position:absolute;inset:0}
.bd-ghim{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-28px 0 0 -14px;background:#D62828;border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:500;pointer-events:none}
.bd-chan{display:flex;flex-direction:column;gap:10px;padding:12px 16px}
.bd-chan .nut{min-height:48px}
.ban-do-hop .leaflet-control-zoom.leaflet-bar a{width:48px;height:48px;line-height:48px;font-size:26px}
.ban-do-hop .leaflet-control-attribution{font-size:12px}

/* =====================================================================================================
   30/09/2026 tối — anh Công: "từ ảnh đầu trở xuống chữ to quá; kéo xuống phải thấy nhiều sản phẩm; bỏ bớt thông tin;
   icon Zalo, Messenger phải là icon app thật". Hero GIỮ NGUYÊN. Dưới hero: lưới sản phẩm dày kiểu sàn (tham khảo kỹ năng
   ui-ux-pro-max: nền trung tính, giá nổi, chip nhóm, lưới phẳng). Chữ thân 16px, tiêu đề mục 20px. Bảng màu B giữ nguyên.
   ===================================================================================================== */
body[data-trang="chu"] main,body[data-trang="san-pham"] main{font-size:16px;line-height:1.5}
.chu-sp{padding-block:18px 8px}
.chu-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.chu-sp h2,.chu-h2{font-size:1.25rem;line-height:1.3;margin:0;letter-spacing:.3px}
.chu-dau .lien-ket{min-height:48px;display:inline-flex;align-items:center;font-size:16px;font-weight:700}
/* chip nhóm: một hàng trượt ngang trong khung riêng (trang không cuộn ngang) */
.chip-nhom{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 12px;padding:0 20px;-webkit-overflow-scrolling:touch}
.chip-nhom::-webkit-scrollbar{display:none}
.chip-nhom a{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:24px;background:var(--the);box-shadow:inset 0 0 0 1px var(--vien);color:var(--navy);font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap}
.chip-nhom a:active{background:var(--nen-2)}
@media (hover:hover){.chip-nhom a:hover{box-shadow:inset 0 0 0 2px var(--navy)}}

/* ---- Lưới + thẻ sản phẩm gọn (trang chủ + trang Sản phẩm) ---- */
.luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
@media (max-width:359px){.luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}}
@media (min-width:600px){.luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}}
@media (min-width:900px){.luoi{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1180px){.luoi{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sp{position:relative;display:flex;flex-direction:column;min-width:0;background:none}
.sp-khung{position:relative}
.sp .sp-anh{display:block;aspect-ratio:1;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--vien);overflow:hidden}
.sp .sp-anh img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6px}
.sp .sp-qc{position:absolute;left:6px;top:6px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(245,247,249,.95);color:var(--muc);font-size:16px;font-weight:700;line-height:1.4;padding:1px 8px;border-radius:6px;pointer-events:none}
.sp-them{position:absolute;right:6px;bottom:6px;width:48px;height:48px;border:0;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px -4px rgba(16,24,40,.5);padding:0;-webkit-tap-highlight-color:transparent}
.sp-them:hover{background:#000}
.sp-them:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.sp-them[disabled]{cursor:default}
a.sp-them{background:#fff}
a.sp-them .logo-app{width:36px;height:36px}
@media (prefers-reduced-motion:no-preference){.sp-them.vua-them{animation:nay-gio .45s var(--em)}@keyframes nay-gio{40%{transform:scale(1.18)}}}
.sp .sp-ten{margin-top:6px;font-family:var(--f-than);font-size:16px;font-weight:700;line-height:1.3;min-height:44px;color:var(--navy);text-transform:none;letter-spacing:0;-webkit-line-clamp:2}
.sp-gia{display:block;height:26px;line-height:26px;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-gia .gia{font-size:18px;font-weight:700;color:var(--do);margin:0}
.sp-gia .gia-lh{font-size:16px;color:var(--muc-phu);margin:0}
.gia-cho{display:inline-block;width:62%;height:18px;vertical-align:middle;border-radius:4px;background:var(--nen-2)}
.xem-het{margin-top:22px}
@media (min-width:700px){.xem-het{max-width:360px;margin-inline:auto;display:flex}}

/* ---- Phần dưới lưới: cam kết một cụm, 3 bước gọn, đại lý một dải, đường vào các trang ---- */
.chu-them{padding-block:22px 8px}
.cam-ket{list-style:none;margin:0 0 22px;padding:14px 16px;display:grid;gap:6px;background:var(--the);border-radius:10px;box-shadow:inset 0 0 0 1px var(--vien);font-size:16px;line-height:1.45}
@media (min-width:700px){.cam-ket{grid-template-columns:repeat(2,1fr)}}
.cam-ket li{position:relative;padding-left:22px}
.cam-ket li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border-left:2.5px solid var(--xanh);border-bottom:2.5px solid var(--xanh);transform:rotate(-45deg)}
.cam-ket li:empty{display:none}
.chu-h2{margin-bottom:10px}
.b-quy-trinh.gon{gap:8px}
.b-quy-trinh.gon a{aspect-ratio:16/6}
@media (min-width:700px){.b-quy-trinh.gon a{aspect-ratio:16/9}}
.b-quy-trinh.gon span{font-size:16px;padding:28px 12px 10px}
.dai-ly-gon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:16px;border-radius:10px;background:var(--navy);color:#fff}
.dai-ly-gon b{display:block;font-size:17px}
.dai-ly-gon span{display:block;font-size:16px;color:#C9CFD8}
.dai-ly-gon .nut{background:#fff;color:#111;min-height:48px;font-size:16px}
.chu-link{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chu-link a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;background:var(--nen-2);color:var(--navy);font-size:16px;font-weight:700;text-decoration:none}

/* ---- Biểu tượng app thật (Zalo, Messenger) ---- */
.logo-app{flex:none}
.day .logo-app{width:26px;height:26px}
.lh-dong .bt.bt-app{background:none;box-shadow:none}
.lh-dong .bt.bt-app .logo-app{width:48px;height:48px}
.chan .lh-chan .logo-app{width:26px;height:26px}
@media (min-width:960px){.day .logo-app{width:28px;height:28px}}

/* ---- Chân trang gọn: chữ 16px ---- */
.chan{font-size:16px;margin-top:28px;padding-block:32px 24px}
.chan .lh-chan a{font-size:16px}
.chan .khung{gap:22px}
/* máy tính: nút nổi Gọi · Zalo · Messenger thành 3 nút tròn nhỏ (trước là 3 viên thuốc to che tên sản phẩm cột cuối); chữ vẫn đọc được bằng trình đọc màn hình */
@media (min-width:960px){
  .day{gap:12px;right:18px;bottom:18px;border:0}
  .day a{width:56px;height:56px;min-height:56px;padding:0;border-radius:50%;justify-content:center;font-size:0;gap:0}
  .day a:nth-child(3),.day a:nth-child(4){background:#fff;box-shadow:var(--bong-len)}
  .day a:nth-child(3):hover,.day a:nth-child(4):hover{background:#F1F4F7}
  .day .logo-app{width:34px;height:34px}
}

/* 30/09/2026 khuya — anh Công: điện thoại "mất" câu Sạch nhanh. Bóng lâu. (chữ trắng nằm trên vùng hơi nước sáng của ảnh, lớp tối chỉ đậm từ 62%
   trở xuống) + máy tính chữ quá to, dấu dòng dưới chạm dấu dòng trên (line-height 1.05). Sửa: lớp tối phủ cả vùng chữ + bóng chữ, cỡ 34–48px, line-height 1.25. */
.b-bang::after{background:linear-gradient(180deg,rgba(10,12,16,.30) 0%,rgba(10,12,16,.62) 34%,rgba(10,12,16,.84) 62%,rgba(10,12,16,.9) 100%)}
@media (min-width:900px){.b-bang::after{background:linear-gradient(90deg,rgba(10,12,16,.86) 0%,rgba(10,12,16,.66) 45%,rgba(10,12,16,.12) 100%)}}
.b-bang h1{font-size:clamp(34px,4vw + 22px,48px);line-height:1.25;letter-spacing:.2px;padding-top:.08em;text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.b-tren,.b-mo{text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* 30/09/2026 khuya — anh Công: "chữ trên điện thoại vẫn quá to". Thang chữ điện thoại (≤599px), áp mọi trang khách:
   tiêu đề trang 21px · tiêu đề mục 18px · giá 17px đậm · chữ thường / tên sản phẩm / nhãn nút 16px · chữ phụ 14px.
   Có !important vì một số tiêu đề đặt cỡ ngay trong HTML (style="font-size:…"). Nút vẫn cao ≥48px. */
@media (max-width:599px){
  body{font-size:16px}
  main h1,.ct h1,.theo-doi h1,.trang-dau h1{font-size:21px!important;line-height:1.3}
  main h2,.thong-so h2,.chan h2,.bd-dau h2{font-size:18px!important;line-height:1.35}
  main h3,.noi-bat h3{font-size:17px!important}
  .b-bang h1{font-size:28px!important;line-height:1.25}
  .b-mo{font-size:16px}
  .b-tren{font-size:14px;letter-spacing:1.5px}
  .nut,.nut-lon,.sp .nut,.gio-dau,.bt-menu,.day a{font-size:16px}
  .tim input,.o-nhap input,.o-nhap select,.o-nhap textarea{font-size:16px}
  .gia,.sp-gia .gia,.gia-to,.thanh-mua .gia-tm b,.tong b,.tong.lon b,.gia-lh{font-size:17px!important;font-weight:700}
  .gia-lh{font-weight:400}
  .tong{font-size:16px}
  .sp .sp-qc,.nhan-anh,.sp-nhan{font-size:14px}
  .so-luong output,.so-luong span{font-size:18px}
  .so-luong.nho span{font-size:17px}
  .ti-le b{font-size:22px}
  .ma-don{font-size:22px}
  .moc b,.buoc b,.lh-dong b,.bang-ck,.noi-bat .qc,.b-quy-trinh span,.dai-ly-gon b{font-size:16px}
  .buoc li::before{font-size:24px}
  .van-don .m{font-size:17px}
  summary::after{font-size:22px}
  .chan,.chan .lh-chan a{font-size:16px}
  .menu-phu li a,.menu-phu li button{font-size:18px}
  .xoay-doc b{font-size:20px}.xoay-doc span{font-size:16px}
}

/* 30/09/2026 khuya — anh Công ĐỒNG Ý thu thấp ảnh đầu trên điện thoại để kéo 1 lần thấy TRỌN 6 ô (360×800).
   Tính: đầu trang 56+1 · thanh đáy 60 → vùng nhìn 683px; ô = ảnh 154 + 4 + tên 2 dòng 39 + giá 22 = 219; 3 hàng + 2 khe 6 = 669.
   Ảnh đầu 395px (cũ 488) → hàng 2 bắt đầu đúng mép dưới đầu trang sau một lần kéo (cuộn một màn). Các khối trên lưới đặt chiều cao cố định
   để phép tính không lệch theo máy. Máy tính (≥600px) giữ nguyên. */
@media (max-width:599px){
  :root{--cao-dau:56px}
  .logo{min-height:48px;padding-block:4px}
  .b-bang{min-height:395px}
  .b-bang .khung{padding-block:20px 22px}
  .b-bang h1{margin-bottom:8px}
  .b-mo{margin-bottom:12px;line-height:1.5}
  .chu-sp{padding-top:14px}
  .chu-dau{height:48px;margin-bottom:8px}
  .chip-nhom{height:48px;margin-bottom:12px}
  .luoi-day{gap:6px 8px;padding-inline:2px}
  .luoi{gap:6px 8px}
  .sp .sp-ten{margin-top:4px;line-height:1.22;min-height:2.44em;height:2.44em}
  .sp-gia{height:22px;line-height:22px}
}

/* ===== 30/09/2026 khuya — ô sản phẩm kiểu sàn (không nút giỏ; bấm cả ô), nhãn thật, thanh đáy chi tiết 2 nút, thanh liên hệ + chân trang ===== */
.sp{position:relative}
.sp .sp-anh{pointer-events:none}
.sp .sp-ten::after{content:"";position:absolute;inset:0;border-radius:10px} /* tên phủ cả ô → bấm đâu cũng vào chi tiết */
.sp .sp-ten:focus-visible{outline:none}
.sp:has(.sp-ten:focus-visible){outline:3px solid var(--ring);outline-offset:3px;border-radius:10px}
@media (hover:hover){.sp:hover .sp-anh{box-shadow:inset 0 0 0 2px var(--navy)}}
.sp:active .sp-anh{box-shadow:inset 0 0 0 2px var(--navy)}
.sp .sp-qc{top:auto;bottom:6px;left:6px;max-width:calc(100% - 12px);font-size:14px;font-weight:700;padding:1px 7px;background:rgba(245,247,249,.95)}
.sp:has(.sp-zalo) .sp-qc{max-width:calc(100% - 64px)}
.sp-nhan-dau{position:absolute;left:6px;top:6px;right:6px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none}
.nhan-o-sp{display:inline-block;font-size:14px;font-weight:700;line-height:1.35;padding:1px 7px;border-radius:5px;white-space:nowrap}
.nhan-hot{background:var(--do);color:#fff}
.nhan-mien{background:#fff;color:var(--xanh);box-shadow:inset 0 0 0 1px #9CCBAA}
.sp-zalo{position:absolute;right:6px;bottom:6px;z-index:2;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 2px 8px -2px rgba(16,24,40,.35)}
.sp-zalo .logo-app{width:34px;height:34px}
.sp-gia .gia-lh{color:var(--muc-phu);font-weight:700}
.hang-nhan{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 4px}
.hang-nhan .nhan-o-sp{font-size:14px;padding:3px 9px}
/* chi tiết: số lượng + tạm tính một hàng; thanh đáy 2 nút ngang nhau */
.hang-sl{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hang-sl .so-luong{margin:0}
.hang-sl .gia-tm{text-align:right}
.hang-sl .gia-tm small{display:block;font-size:14px;color:var(--muc-phu)}
.hang-sl .gia-tm b{font-size:17px;color:var(--do)}
.thanh-mua.thanh-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thanh-mua.thanh-2 .nut{min-height:52px;width:100%;font-size:16px;padding-inline:10px;justify-content:center}
.thanh-mua.thanh-2 .nut-phu{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.thanh-mua.thanh-2 .nut-lon{background:var(--do);color:#fff}
.thanh-mua.thanh-2 .nut-lon:hover{background:var(--nhan-dam)}
/* thanh liên hệ dính đáy (điện thoại): nền đặc + bóng trên; chân trang chừa đúng chiều cao thanh */
@media (max-width:959px){
  .day{background:#fff!important;border-top:1px solid var(--vien);box-shadow:0 -4px 14px -6px rgba(16,24,40,.22)}
  .chan{padding-bottom:calc(var(--cao-day) + 24px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:0}
}
/* chân trang sáng → nút đen (Đặt hàng, Mua ngay…) không còn lẫn vào nền chân trang đen */
.chan{background:var(--nen-2);color:var(--muc);border-top:1px solid var(--vien)}
.chan a{color:var(--navy)}
.chan h2{color:var(--do)}
.chan .lh-chan svg:not(.logo-app){color:var(--do)}
.chan .phap{color:var(--muc-phu);border-top-color:var(--vien)}
.chan img[src$="logo.png"]{background:#111;border-radius:10px;padding:5px 12px;box-sizing:content-box}
/* chữ hero IN HOA làm dấu chữ hoa bị nén (Ó trông như Ỏ, dấu nặng của Ạ sát dòng dưới) → viết thường có hoa đầu câu, dấu rõ; dòng cách 1.3 */
.b-bang h1{text-transform:none;line-height:1.3;letter-spacing:0}
.thanh-mua.thanh-2 #nut-gio{width:auto;padding-inline:10px;flex:initial;gap:8px}
.thanh-mua.thanh-2 .nut svg{flex:none}
.thanh-mua.thanh-2 .nut{white-space:nowrap;padding-inline:8px}
.thanh-mua.thanh-2 .nut svg{width:22px;height:22px}
.gia-to{color:var(--do)}
@media (max-width:359px){.day a{font-size:14px!important;letter-spacing:0;white-space:nowrap}}
/* 01/10/2026: một dải miễn giao trên lưới thay nhãn từng ô; ảnh đầu bớt đúng chiều cao dải (36px) để vẫn thấy trọn 6 ô ở 360 */
.dai-giao{margin:0 0 10px;padding:4px 10px;min-height:28px;display:flex;align-items:center;border-radius:6px;background:var(--xanh-nhat);color:var(--xanh);font-size:14px;font-weight:700;line-height:1.35}
@media (max-width:599px){.b-bang{min-height:359px}.b-bang .khung{padding-block:14px 16px}.dai-giao{height:28px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}}
@media (min-width:600px){.ti-le b{font-size:clamp(28px,2.2vw,32px)!important}}
.dg-ngan{display:none}
@media (max-width:599px){.dg-dai{display:none}.dg-ngan{display:inline}}

/* 01/10/2026 — anh Công: bỏ thanh đáy 4 nút trên điện thoại; thay bằng nút tròn nhỏ nổi chồng dọc góc dưới phải (Zalo · Messenger · Gọi), như máy tính.
   "Sản phẩm" đã có ở menu/đầu trang. Trang chi tiết: nút nổi nằm TRÊN thanh Thêm vào giỏ / Mua ngay. */
@media (max-width:959px){
  :root{--cao-day:0px}
  body{padding-bottom:0}
  .day{left:auto!important;right:10px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:auto;display:flex!important;flex-direction:column;gap:10px;background:none!important;border:0!important;box-shadow:none!important;padding:0}
  .day a{width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;font-size:0!important;gap:0;background:#fff;box-shadow:0 3px 12px -3px rgba(16,24,40,.45)}
  .day a:first-child{display:none}
  .day a:nth-child(3){order:1}.day a:nth-child(4){order:2}.day a:nth-child(2){order:3;background:var(--navy);color:#fff}
  .day a[aria-current]::before{display:none}
  .day .logo-app{width:32px;height:32px}
  .day svg{width:22px;height:22px}
  body.co-thanh-mua .day{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .chan{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  main{padding-bottom:12px}
}

/* 01/10/2026 — anh Công CHẤP NHẬN hạ dưới 16px cho web bán hàng này (điện thoại ≤599px), cảm giác như ô Shopee:
   thường 15 · tên ô 14 (2 dòng) · giá 15 đậm · mục 17 · trang 19 · hero 24 · phụ/nhãn 12. Nút vẫn ≥44px. */
@media (max-width:599px){
  body,main,.b-mo,.chan,.chan .lh-chan a,.tong,.nut,.nut-lon,.sp .nut,.gio-dau,.bt-menu,.o-nhap input,.o-nhap select,.o-nhap textarea,.tim input,.moc b,.buoc b,.lh-dong b,.bang-ck,.b-quy-trinh span,.dai-ly-gon b,.chip-nhom a,.chu-link a,.cam-ket,.dai-ly-gon span,.lh-dong small,.phu{font-size:15px!important}
  main h1,.ct h1,.theo-doi h1,.trang-dau h1{font-size:19px!important}
  main h2,.thong-so h2,.chan h2,.bd-dau h2,.chu-sp h2,.chu-h2{font-size:17px!important}
  main h3,.noi-bat h3{font-size:16px!important}
  .b-bang h1{font-size:24px!important}
  .b-tren{font-size:12px!important}
  .gia,.sp-gia .gia,.gia-to,.thanh-mua .gia-tm b,.tong b,.tong.lon b,.hang-sl .gia-tm b{font-size:15px!important}
  .gia-lh,.sp-gia .gia-lh{font-size:14px!important}
  .sp .sp-ten{font-size:14px!important;line-height:1.25;min-height:2.5em;height:2.5em}
  .sp-gia{height:20px;line-height:20px}
  .sp .sp-qc,.nhan-o-sp,.nhan-anh,.sp-nhan,.dai-giao,.hang-sl .gia-tm small,.b-quy-trinh small{font-size:12px!important}
  .b-bang{min-height:380px}
  .chip-nhom a{min-height:44px}.chip-nhom{height:44px}
  .nut,.nut-lon{min-height:44px}
}
/* cụm liên hệ nhỏ góc dưới phải — CẢ máy tính: có thêm nút Chat (trợ lý); bong bóng riêng của trợ lý ẩn, nút Chat trong cụm mở nó */
.day .day-chat{order:0;border:0;cursor:pointer;background:var(--do);color:#fff;display:flex;align-items:center;justify-content:center}
@media (max-width:959px){.day .day-chat{width:46px;height:46px;border-radius:50%;font-size:0;box-shadow:0 3px 12px -3px rgba(16,24,40,.45)}}
@media (min-width:960px){.day .day-chat{width:56px;height:56px;border-radius:50%;font-size:0;box-shadow:var(--bong-len)}}
.nvc-nut{opacity:0!important;pointer-events:none!important;transform:scale(.01)!important}
/* 01/10/2026: anh Công muốn hero VIẾT HOA, không dấu chấm, to hơn — chữ hoa viết thẳng trong HTML (không text-transform), dòng cách 1.3, chừa khoảng trên cho dấu */
.b-bang h1{text-transform:none!important;font-size:56px!important;line-height:1.3!important;padding-top:.15em;letter-spacing:.5px}
@media (max-width:599px){.b-bang h1{font-size:30px!important}}
.b-mo{max-width:560px;overflow-wrap:break-word}
.b-bang .khung{box-sizing:border-box}
.b-bang h1{text-shadow:0 1px 3px rgba(0,0,0,.55)}
@media (min-width:960px){.day .day-chat{order:0}.day a:nth-child(3){order:1}.day a:nth-child(4){order:2}.day a:nth-child(2){order:3}}
/* dấu nặng của Ạ (dòng 1) nằm ngay trên dấu sắc của Ó (dòng 2) → nhìn thành dấu hỏi "BỎNG". Tách xa: dòng cách 1.5 */
.b-bang h1{line-height:1.5!important}
/* 01/10: điện thoại — cụm liên hệ thu thành 1 nút tròn 44px sát mép phải (đè ít nhất lên ô); bung ra khi chạm. Máy tính: nút gộp ẩn, cụm luôn mở. */
.day-mo{display:none}
@media (max-width:959px){
  .day-mo{display:grid;place-items:center;order:9;width:44px;height:44px;border:0;border-radius:50%;background:var(--do);color:#fff;box-shadow:0 3px 12px -3px rgba(16,24,40,.45);cursor:pointer}
  .day-mo svg{width:22px;height:22px}
  .day{right:6px}
  .day:not(.mo)>a,.day:not(.mo)>.day-chat{display:none!important}
  .day.mo .day-mo{background:var(--navy)}
}
/* ô "Hỏi giá": nút Zalo lên góc trên phải của ảnh */
.sp-zalo{top:6px;bottom:auto}
.sp:has(.sp-zalo) .sp-qc{max-width:calc(100% - 12px)}
.sp:has(.sp-zalo) .sp-nhan-dau{right:60px}
.day>a[href="san-pham.html"]{display:none!important}
/* thứ tự cụm (mọi khổ): Chat · Zalo · Messenger · Gọi · nút gộp */
.day .day-chat{order:1!important}.day a[href^="https://zalo"]{order:2!important}.day a[href^="https://m.me"]{order:3!important}.day a[href^="tel:"]{order:4!important;background:var(--navy);color:#fff}.day .day-mo{order:9!important}

/* ---- Sửa logo và thanh đầu (Lượt 6) ---- */
.dau { background: var(--navy) !important; border-bottom: none !important; }
.logo { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }
.menu-dau .logo { background: transparent !important; }
.menu-may a { color: #fff !important; }
.menu-may a:hover { color: #fff !important; box-shadow: inset 0 -3px 0 var(--nhan) !important; }
.menu-may a[aria-current] { color: #fff !important; box-shadow: inset 0 -3px 0 var(--nhan) !important; }
.dau .gio-dau, .dau .bt-menu, .dau .bt-menu span { color: #fff !important; }
.dau .gio-dau:hover, .dau .bt-menu:hover { background: rgba(255,255,255,0.1) !important; }

/* ---- Chân trang logo không hộp ---- */
.chan img[src$="logo.png"] { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }

/* BẢN XEM THỬ MÀU XANH (/mau-xanh/) — CHỈ đổi màu, không đổi vị trí/cỡ/khoảng cách. Dựng: node dung-mau-xanh.js (sau dung-mau-b.js --chinh). */
/* ===== v2 (30/09/2026) — chủ web: "bỏ bớt màu đen, dễ nhìn hơn, đỡ rối mắt". Chỉ đổi màu/viền/bóng/độ đậm/kiểu chữ hoa; KHÔNG đổi kích thước/vị trí.
   Bảng màu: xanh đậm #1E40AF · xanh vừa #2563EB · nền xanh rất nhạt #EFF4FF · chữ chính #0F172A · chữ phụ #475569 · vàng #FFC20E CHỈ ở nút chính + nhãn Bán chạy.
   KHÔNG còn nền đen/xám rất tối: các biến --navy/--muc của lop-b.css (#15171B/#14161A) đổi sang xanh đậm/chữ xanh-đen, các chỗ viết cứng #111/#000/#20242B/rgba(10,12,16) đè lại bên dưới.
   Giả định: logo.png là chữ vàng trên nền trong suốt (lop-b ghi "logo vàng trên ô đen") → để logo trên nền xanh đậm (thanh đầu phẳng xanh đậm, ô logo trong suốt), không đặt trên nền trắng.
   Tương phản đo theo WCAG (L tương đối):
     trắng / #1E40AF 8.7:1 · #1E40AF / trắng 8.7:1 · #1E40AF / #EFF4FF 7.9:1 · #0F172A / trắng 17.8:1 · #475569 / trắng 7.6:1 · #475569 / #EFF4FF 6.9:1
     #14286E / #FFC20E 8.3:1 · trắng / #2563EB 5.2:1 · #DBE4FF / #1E40AF 6.9:1
     chữ trắng trên ảnh đầu, trường hợp xấu nhất ảnh trắng tinh: phủ xanh .75 → 4.7:1, .80 → 5.3:1, .85 → 5.9:1 (vùng có chữ phủ ≥ .75). ===== */
:root{
  --xanh-dam:#1E40AF;--xanh-sang:#2563EB;--xanh-nen:#EFF4FF;--xanh-vien:#DBE4FF;
  --vang:#FFC20E;--vang-dam:#F2B200;--chu-tren-vang:#14286E;
  /* biến màu tối của lop-b.css → hết đen */
  --navy:#1E40AF;--navy-2:#2563EB;--muc:#0F172A;--muc-phu:#475569
}

/* ---- Thanh đầu: nền xanh đậm, chữ trắng, logo gốc ---- */
.dau{background:var(--xanh-dam)!important;border-bottom:none!important}
.logo{background:transparent!important;padding:0!important;border-radius:0!important}
.menu-dau .logo{background:transparent!important}
.dau .gio-dau,.dau .bt-menu,.dau .bt-menu span{color:#fff!important}
.dau .gio-dau:hover,.dau .bt-menu:hover{background:rgba(255,255,255,.1)!important}
.menu-may a{color:#fff!important;font-weight:600;text-transform:none}
.menu-may a:hover{color:#fff!important;box-shadow:inset 0 -3px 0 var(--vang)!important}
.menu-may a[aria-current]{color:#fff!important;box-shadow:inset 0 -3px 0 var(--vang)!important}
.menu-phu li a,.menu-phu li button{font-weight:600;text-transform:none;color:var(--xanh-dam)!important}
.so-gio{background:var(--vang)!important;color:var(--chu-tren-vang)!important;box-shadow:0 0 0 2px var(--xanh-dam)!important}

/* ---- Ảnh đầu: lớp phủ xanh đậm trong suốt thay lớp phủ đen-nâu ---- */
.b-bang{background:var(--xanh-dam)}
.b-bang::after{background:linear-gradient(180deg,rgba(30,64,175,.3) 0%,rgba(30,64,175,.75) 30%,rgba(30,64,175,.85) 100%)!important}
@media (min-width:900px){.b-bang::after{background:linear-gradient(90deg,rgba(30,64,175,.85) 0%,rgba(30,64,175,.75) 50%,rgba(30,64,175,.25) 100%)!important}}
.b-bang h1,.b-tren,.b-mo{text-shadow:0 1px 3px rgba(15,30,80,.45)}
.b-bang h1{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,0.4)!important;font-weight:800;letter-spacing:-1px}
.b-mo{color:rgba(255,255,255,0.95)!important;text-shadow:0 1px 4px rgba(0,0,0,0.5)!important;font-size:16px}
.b-tren{border-bottom-color:rgba(255,255,255,0.3)}
.b-quy-trinh a{background:var(--xanh-dam)}
.b-quy-trinh span{background:linear-gradient(transparent,rgba(30,64,175,.88))}

/* ---- Nút chính: viên thuốc vàng, chữ xanh đậm (Mua ngay, Đặt hàng, Thêm vào giỏ…) ---- */
.nut:not(.nut-phu):not(.nut-trong){background:var(--vang)!important;color:var(--chu-tren-vang)!important;border-radius:99px!important;box-shadow:0 6px 16px rgba(255,194,14,0.4)!important;font-weight:700!important}
.nut:not(.nut-phu):not(.nut-trong):hover{background:var(--vang-dam)!important}
.b-bang .nut:not(.nut-trong){background:var(--vang)!important;color:var(--chu-tren-vang)!important}
.b-bang .nut-trong{border-radius:999px}
.thanh-mua.thanh-2 .nut-lon{background:var(--vang)!important;color:var(--chu-tren-vang)!important}
.thanh-mua.thanh-2 .nut-phu{background:#fff;color:var(--xanh-dam);box-shadow:inset 0 0 0 2px var(--xanh-dam);border-radius:999px}
.nut-phu{background:var(--xanh-nen);color:var(--xanh-dam)}
.nut-phu:hover{background:var(--xanh-vien)}
.dai-ly-khoi .phu{color:var(--xanh-vien)}
.dai-ly-khoi .nut,.dai-ly-gon .nut,.bao-nhanh a{color:var(--xanh-dam)}

/* ---- Ô sản phẩm: nền trắng, viền mảnh #E2E8F0 (vẽ bằng bóng để không đổi kích thước ô), giá xanh đậm ---- */
.sp{background:#fff!important;box-shadow:0 0 0 1px #E2E8F0,0 6px 16px rgba(30,64,175,0.06)!important;border-radius:12px!important;overflow:hidden}
.sp img{background:#fff!important;mix-blend-mode:multiply}
.sp h3,.sp .ten-sp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:auto;min-height:2.9em;font-size:15px;margin-bottom:8px}
.gia,.sp-gia .gia,.gia-to,.hang-sl .gia-tm b,.thanh-mua .gia-tm b,.tong b{color:#E11D48!important;font-weight:800!important;font-size:1.15em}
.sp-them{background:var(--xanh-dam)}
.sp-them:hover{background:var(--xanh-sang)}
.nhan-hot{background:var(--vang)!important;color:var(--chu-tren-vang)!important;padding:4px 8px!important;font-size:12px!important;border-radius:6px!important;font-weight:700!important}
.dai-giao{background:var(--xanh-nen)!important;color:var(--xanh-dam)!important}
.loc button[aria-pressed="true"]{background:var(--xanh-dam)!important;color:#fff!important}

/* ---- Cụm liên hệ: Chat xanh, Zalo/Messenger màu thật, Gọi vàng ---- */
.day .day-chat{background:var(--xanh-sang)!important;color:#fff!important;box-shadow:0 4px 12px rgba(37,99,235,0.3)!important}
.day a[href^="https://zalo"],.day a[href^="https://m.me"]{background:#fff!important;box-shadow:0 4px 16px rgba(0,0,0,0.1)!important;border-radius:99px!important}
.day a[href^="https://zalo"]{color:#0068FF!important}
.day a[href^="https://m.me"]{color:#00B2FF!important}
.day a[href^="https://zalo"]:hover,.day a[href^="https://m.me"]:hover{background:var(--xanh-nen)!important}
.day a[href^="tel:"]{background:var(--vang)!important;color:var(--chu-tren-vang)!important;border-radius:99px!important;box-shadow:0 4px 12px rgba(255,194,14,0.4)!important}
.day a[href^="tel:"]:hover{background:var(--vang-dam)!important}
.day-mo{background:var(--xanh-sang)!important;color:#fff!important}
.day.mo .day-mo{background:var(--xanh-dam)!important;color:#fff!important}
.day a[aria-current]::before,.mat-tren::before{background:var(--xanh-sang)}

/* ---- Chân trang: nền xanh đậm #1E40AF, chữ trắng, logo gốc không hộp ---- */
.chan{background:var(--xanh-dam)!important;color:#fff!important;border-top:none!important;padding-top:40px}
.chan a{color:#fff!important}
.chan p{color:rgba(255,255,255,0.85)!important}
.chan h2{color:#fff!important}
.chan .lh-chan svg:not(.logo-app){color:var(--vang)!important}
.chan .phap{color:rgba(255,255,255,0.6)!important;border-top:1px solid rgba(255,255,255,0.2)!important}
.chan a:hover{text-decoration-color:var(--vang)!important}
.chan img[src$="logo.png"]{background:transparent!important;padding:0!important;border-radius:0!important}

.lh-dong .bt:not(.bt-app){background:var(--xanh-dam)}
.lien-ket{text-decoration-color:var(--xanh-sang)}
.dai-ly-gon{background:var(--xanh-dam)}
.ma-don{background:var(--xanh-dam)}

/* Nền trắng / xanh rất nhạt, Xanh đậm cho chữ tiêu đề */
body{background:var(--xanh-nen)!important;color:var(--muc)}
h1:not(.b-bang h1),h2,h3,h4,h5,h6,.tieu-de{color:var(--xanh-dam)}




/* ---- Khoảng cách lề Ô Sản Phẩm (Lượt 5) ---- */
.sp .sp-ten { padding: 0 12px !important; margin-top: 8px !important; }
.sp .sp-gia { padding: 0 12px 12px 12px !important; }
.sp .sp-them { right: 12px !important; bottom: 12px !important; }
.sp .sp-qc { left: 12px !important; margin-top: 6px !important; margin-bottom: 6px !important; max-width: calc(100% - 24px) !important; }

.dai-xem-thu{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:#EFF4FF;color:#1E40AF;border-top:1px solid #DBE4FF;font:600 12px/20px system-ui,sans-serif;text-align:center;pointer-events:none}