/* ============================================================
   BỘ KHUNG THIẾT KẾ — sửa màu thương hiệu ở đây là đổi cả site
   ============================================================ */
:root{
  /* ── NHẬN DIỆN DEKTON ──────────────────────────────────────────
     Màu lấy bằng máy từ file logo gốc "Logo DEKTON.pdf":
       mẫu 1 (đang dùng)  olive  #5B6136
       mẫu 2              đỏ     #DA291C  ·  xanh lá  #00471F
       mẫu 3              cam    #FC5000  ·  đen      #000000
     Muốn đổi sang bộ đỏ–xanh của mẫu 2: đặt --brand:#DA291C, --brand-dam:#00471F
     ────────────────────────────────────────────────────────────── */
  --brand:        #5B6136;   /* olive Dekton — mẫu logo thứ nhất */
  --brand-dam:    #454A26;
  --brand-nhat:   #F1F2E9;

  --den:      #171A11;       /* đen ngả olive cho hợp bộ nhận diện */
  --xam-9:    #2E3324;
  --xam-7:    #5A6473;
  --xam-5:    #8B95A3;
  --xam-3:    #D6DBE2;
  --xam-2:    #E9EDF2;
  --xam-1:    #F5F7FA;
  --trang:    #FFFFFF;

  --xanh:     #00471F;   /* xanh lá Dekton — còn hàng / thành công */
  --do:       #DA291C;   /* đỏ Dekton — giảm giá / cảnh báo */
  --vang:     #F2A93B;   /* sao đánh giá */

  /* Chữ */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cx-12: .75rem; --cx-13: .8125rem; --cx-14: .875rem; --cx-15: .9375rem;
  --cx-16: 1rem;   --cx-18: 1.125rem; --cx-20: 1.25rem; --cx-24: 1.5rem;
  --cx-30: 1.875rem; --cx-38: 2.375rem;

  /* Khoảng cách — lưới 4px */
  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:20px; --k6:24px;
  --k8:32px; --k10:40px; --k12:48px; --k16:64px;

  --bo-1: 6px; --bo-2: 10px; --bo-3: 14px; --bo-tron: 999px;
  --do-bong-1: 0 1px 2px rgba(20,24,31,.06), 0 1px 3px rgba(20,24,31,.08);
  --do-bong-2: 0 4px 12px rgba(20,24,31,.08), 0 2px 4px rgba(20,24,31,.04);
  --do-bong-3: 0 12px 32px rgba(20,24,31,.12);
  --rong: 1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:var(--cx-15); line-height:1.55;
  color:var(--den); background:var(--xam-1); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.25; font-weight:700; letter-spacing:-.01em}

.khung{max-width:var(--rong); margin:0 auto; padding:0 var(--k4)}
.an{display:none !important}
.chi-doc-man-hinh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- NÚT ---------------- */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--k2);
  padding:0 var(--k5); height:44px; border:1px solid transparent; border-radius:var(--bo-2);
  font-size:var(--cx-15); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.nut:active{transform:translateY(1px)}
.nut--chinh{background:var(--brand); color:#fff}
.nut--chinh:hover{background:var(--brand-dam)}
.nut--phu{background:var(--trang); color:var(--den); border-color:var(--xam-3)}
.nut--phu:hover{border-color:var(--xam-5); background:var(--xam-1)}
.nut--nhat{background:var(--brand-nhat); color:var(--brand-dam)}
.nut--nho{height:36px; padding:0 var(--k3); font-size:var(--cx-14); border-radius:var(--bo-1)}
.nut--rong{width:100%}
.nut[disabled]{opacity:.5; cursor:not-allowed}

/* ---------------- Ô NHẬP ---------------- */
.o-nhap, .o-chon{
  width:100%; height:44px; padding:0 var(--k3);
  background:var(--trang); border:1px solid var(--xam-3); border-radius:var(--bo-2);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
textarea.o-nhap{height:auto; padding:var(--k3); min-height:90px; resize:vertical}
.o-nhap:focus,.o-chon:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-nhat)}
.nhan{display:block; margin-bottom:var(--k2); font-size:var(--cx-14); font-weight:600; color:var(--xam-9)}
.loi{margin-top:var(--k1); font-size:var(--cx-13); color:var(--do)}

/* ---------------- ĐẦU TRANG ---------------- */
.dau-trang{background:var(--trang); box-shadow:var(--do-bong-1); position:sticky; top:0; z-index:50}
.dau-trang__tren{background:var(--den); color:#fff; font-size:var(--cx-13)}
.dau-trang__tren .khung{display:flex; justify-content:space-between; align-items:center; height:36px; gap:var(--k4)}
.dau-trang__tren a:hover{color:var(--brand)}
.dau-trang__giua .khung{display:flex; align-items:center; gap:var(--k5); height:72px}
.logo{display:flex; align-items:center; gap:var(--k2); font-size:var(--cx-20); font-weight:800; letter-spacing:-.02em; flex-shrink:0}
.logo__dau{width:36px;height:36px;border-radius:var(--bo-2);background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:var(--cx-18);font-weight:800}
.logo__phu{color:var(--brand)}
/* logo ảnh (Dekton) — cao cố định, rộng tự co để không méo */
.logo__anh{height:38px;width:auto}
.logo__noi{font-size:var(--cx-13);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);padding:3px 9px;border:1.5px solid var(--brand);border-radius:var(--bo-1);align-self:center}
@media (max-width:600px){ .logo__anh{height:30px} .logo__noi{font-size:11px;padding:2px 6px} }

.tim{flex:1; max-width:560px; position:relative}
.tim input{width:100%;height:44px;padding:0 96px 0 var(--k4);border:2px solid var(--brand);
  border-radius:var(--bo-tron);outline:none;background:var(--trang)}
.tim button{position:absolute;right:4px;top:4px;height:36px;padding:0 var(--k4);border:0;
  border-radius:var(--bo-tron);background:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.tim__goi-y{position:absolute;top:52px;left:0;right:0;background:#fff;border:1px solid var(--xam-2);
  border-radius:var(--bo-2);box-shadow:var(--do-bong-3);overflow:hidden;z-index:60}
.tim__goi-y a{display:flex;gap:var(--k3);align-items:center;padding:var(--k2) var(--k3);border-bottom:1px solid var(--xam-1)}
.tim__goi-y a:last-child{border-bottom:0}
.tim__goi-y a:hover{background:var(--xam-1)}
.tim__goi-y img{width:40px;height:40px;object-fit:contain;background:var(--xam-1);border-radius:var(--bo-1)}

.dau-trang__phai{display:flex; align-items:center; gap:var(--k5); margin-left:auto}
.hotline{display:flex;flex-direction:column;line-height:1.2}
.hotline span{font-size:var(--cx-12);color:var(--xam-7)}
.hotline strong{font-size:var(--cx-16);color:var(--brand)}
.gio{position:relative; display:flex; align-items:center; gap:var(--k2); font-weight:600}
.gio__so{position:absolute;top:-6px;left:16px;min-width:19px;height:19px;padding:0 5px;
  background:var(--brand);color:#fff;border-radius:var(--bo-tron);font-size:var(--cx-12);
  font-weight:700;display:grid;place-items:center}

/* thanh danh mục */
.thanh-dm{background:var(--brand); color:#fff}
.thanh-dm .khung{display:flex; align-items:center; gap:var(--k1); height:46px; overflow-x:auto; scrollbar-width:none}
.thanh-dm .khung::-webkit-scrollbar{display:none}
.thanh-dm a{padding:var(--k2) var(--k3); border-radius:var(--bo-1); font-size:var(--cx-14);
  font-weight:600; white-space:nowrap}
.thanh-dm a:hover{background:rgba(255,255,255,.18)}

/* ---------------- KHỐI / TIÊU ĐỀ ---------------- */
.khoi{margin:var(--k8) 0}
.khoi__dau{display:flex;align-items:center;justify-content:space-between;gap:var(--k4);margin-bottom:var(--k5)}
.khoi__ten{font-size:var(--cx-24); text-transform:uppercase; letter-spacing:.01em}
.khoi__ten::after{content:"";display:block;width:56px;height:3px;background:var(--brand);
  border-radius:2px;margin-top:var(--k2)}
.khoi__them{font-size:var(--cx-14);font-weight:600;color:var(--brand)}
.khoi__them:hover{text-decoration:underline}

/* ---------------- LƯỚI SẢN PHẨM ---------------- */
.luoi{display:grid; gap:var(--k4); grid-template-columns:repeat(5,1fr)}
.luoi--4{grid-template-columns:repeat(4,1fr)}
.luoi--3{grid-template-columns:repeat(3,1fr)}

.the{background:var(--trang); border:1px solid var(--xam-2); border-radius:var(--bo-3);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s}
.the:hover{box-shadow:var(--do-bong-2); transform:translateY(-3px); border-color:var(--xam-3)}
.the__anh{position:relative; aspect-ratio:1/1; background:var(--xam-1); overflow:hidden}
.the__anh img{width:100%;height:100%;object-fit:contain;padding:var(--k3);transition:transform .3s}
.the:hover .the__anh img{transform:scale(1.04)}
.the__giam{position:absolute;top:var(--k2);left:var(--k2);background:var(--do);color:#fff;
  font-size:var(--cx-12);font-weight:700;padding:3px 8px;border-radius:var(--bo-1)}
.the__co{position:absolute;top:var(--k2);right:var(--k2);background:var(--den);color:#fff;
  font-size:var(--cx-12);font-weight:600;padding:3px 8px;border-radius:var(--bo-1)}
.the__het{position:absolute;inset:0;background:rgba(255,255,255,.72);display:grid;place-items:center;
  font-weight:700;color:var(--xam-7);letter-spacing:.04em}
.the__than{padding:var(--k3); display:flex; flex-direction:column; gap:var(--k2); flex:1}
.the__hieu{font-size:var(--cx-12); color:var(--xam-5); text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.the__ten{font-size:var(--cx-14); font-weight:600; line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.9em}
.the__ten:hover{color:var(--brand)}
.the__gia{margin-top:auto; display:flex; align-items:baseline; gap:var(--k2); flex-wrap:wrap}
.gia-ban{font-size:var(--cx-18); font-weight:800; color:var(--brand)}
.gia-goc{font-size:var(--cx-13); color:var(--xam-5); text-decoration:line-through}
.the__nut{margin-top:var(--k1)}

/* ---------------- BĂNG ĐẦU / DANH MỤC NỔI BẬT ---------------- */
.bang-dau{display:grid;grid-template-columns:2fr 1fr;gap:var(--k4);margin-top:var(--k5)}
.bang-dau__chinh{border-radius:var(--bo-3);overflow:hidden;background:linear-gradient(120deg,var(--den),var(--xam-9));
  color:#fff;padding:var(--k12) var(--k10);min-height:320px;display:flex;flex-direction:column;justify-content:center;gap:var(--k4)}
.bang-dau__chinh h1{font-size:var(--cx-38);max-width:16em}
.bang-dau__chinh p{margin:0;color:var(--xam-3);max-width:30em}
.bang-dau__ben{display:grid;gap:var(--k4)}
.bang-nho{background:var(--trang);border-radius:var(--bo-3);padding:var(--k5);display:flex;
  gap:var(--k3);align-items:flex-start;border:1px solid var(--xam-2)}
.bang-nho__icon{width:44px;height:44px;border-radius:var(--bo-2);background:var(--brand-nhat);
  display:grid;place-items:center;font-size:var(--cx-20);flex-shrink:0}
.bang-nho strong{display:block;margin-bottom:2px}
.bang-nho span{font-size:var(--cx-13);color:var(--xam-7)}

.dm-luoi{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--k3)}
.dm-o{background:var(--trang);border:1px solid var(--xam-2);border-radius:var(--bo-2);
  padding:var(--k4) var(--k3);text-align:center;transition:border-color .15s,box-shadow .15s}
.dm-o:hover{border-color:var(--brand);box-shadow:var(--do-bong-1)}
.dm-o__icon{font-size:26px;margin-bottom:var(--k2)}
.dm-o__ten{font-size:var(--cx-14);font-weight:600;line-height:1.35}

/* ---------------- MEGA MENU DANH MỤC (khối cột) ---------------- */
.cot-dm{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--k4)}
.cot-dm__o{background:var(--trang);border:1px solid var(--xam-2);border-radius:var(--bo-2);padding:var(--k4)}
.cot-dm__o h3{font-size:var(--cx-14);text-transform:uppercase;color:var(--brand);margin-bottom:var(--k2)}
.cot-dm__o a{display:block;padding:3px 0;font-size:var(--cx-14);color:var(--xam-7)}
.cot-dm__o a:hover{color:var(--brand)}

/* ---------------- TIN TỨC ---------------- */
.tin{background:var(--trang);border:1px solid var(--xam-2);border-radius:var(--bo-3);overflow:hidden}
.tin__anh{aspect-ratio:16/10;background:var(--xam-2)}
.tin__than{padding:var(--k4)}
.tin__ngay{font-size:var(--cx-12);color:var(--xam-5)}
.tin__ten{font-size:var(--cx-15);font-weight:600;margin-top:var(--k1);display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tin:hover .tin__ten{color:var(--brand)}

/* ---------------- CHÂN TRANG ---------------- */
.chan{background:var(--den); color:var(--xam-3); margin-top:var(--k16); padding:var(--k12) 0 0}
.chan__luoi{display:grid;grid-template-columns:1.25fr 3fr;gap:var(--k8);align-items:start}
/* Khối bên phải tự chia 3 cột — nhờ vậy Fanpage/Bản đồ bám SÁT ngay dưới, 
   không bị cột thông tin công ty (dài hơn) kéo xuống tạo khoảng trống */
.chan__phai{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:var(--k8);align-items:start}
.chan h4{color:#fff;font-size:var(--cx-14);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--k4)}
.chan a{display:block;padding:4px 0;font-size:var(--cx-14)}
.chan a:hover{color:var(--brand)}
.chan p{margin:0 0 var(--k2);font-size:var(--cx-14)}
.chan__duoi{margin-top:var(--k8);padding:var(--k4) 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--cx-13);display:flex;justify-content:space-between;gap:var(--k4);flex-wrap:wrap}

/* ---------------- KHỐI NHÚNG Ở CHÂN TRANG (fanpage + bản đồ) ---------------- */
/* Fanpage & bản đồ nằm TRONG cột chân trang (giống donghetuchon.com), không thành hàng riêng */
.chan__khung{border-radius:var(--bo-2);overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);max-width:100%;margin-top:var(--k2)}
.chan__khung iframe{display:block;width:100%;height:210px;border:0}
/* Hàng dưới của chân trang: Fanpage trải cột 2–3, Bản đồ ở cột 4 → hai khối NGANG NHAU */
.chan__fanpage{grid-column:1 / span 2}
.chan__bando{grid-column:3}
/* Fanpage: mép trái thẳng chữ "C" của CHÍNH SÁCH, mép phải dừng cuối chữ "HƯỚNG DẪN"
   = trọn cột 1 + gap + phần tiêu đề cột 2 ≈ 400px */
.chan__khung--fanpage{max-width:340px;border:0;background:none;border-radius:0}
.chan__khung--fanpage iframe{height:132px}   /* cắt sát nội dung Facebook, tránh khoảng đen */

/* ---------------- NÚT LIÊN HỆ NỔI ---------------- */
.lien-he-noi{position:fixed;right:16px;bottom:16px;z-index:120;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.lh-nut{position:relative;display:block;width:56px;height:56px;line-height:0;
  border-radius:var(--bo-tron);
  box-shadow:var(--do-bong-3);transition:transform .15s ease, filter .15s ease}
.lh-nut svg{display:block;width:100%;height:100%}
.lh-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lh-nut:hover{transform:translateY(-2px);filter:brightness(1.06)}

.lh-nut svg{flex-shrink:0}
@media (max-width:820px){
  .chan__khung{max-width:100%}
  .chan__fanpage, .chan__bando{grid-column:auto}
  .chan__phai{grid-template-columns:1fr 1fr}
  .lien-he-noi{right:12px;bottom:12px;gap:8px}
  .lh-nut{width:52px;height:52px}
}

/* ---------------- CHUYỂN ĐỘNG NÚT LIÊN HỆ ---------------- */
/* Làn sóng lan toả ra ngoài — hai vòng nối đuôi nhau, chậm và mờ dần.
   Cố ý KHÔNG rung, KHÔNG nảy: chuyển động giật gây khó chịu khi đọc trang. */
.lh-nut::before, .lh-nut::after{
  content:""; position:absolute; inset:0; border-radius:var(--bo-tron);
  pointer-events:none; z-index:-1; opacity:0;
  animation:lan-song 5s cubic-bezier(.22,.61,.36,1) infinite;
}
.lh-nut::after{animation-delay:2.5s}
.lh-nut--zalo::before, .lh-nut--zalo::after{background:#0068FF}
.lh-nut--goi::before,  .lh-nut--goi::after {background:var(--brand)}
@keyframes lan-song{
  0%   {transform:scale(1);    opacity:.40}
  60%  {opacity:.14}
  100% {transform:scale(1.55); opacity:0}   /* vòng nhỏ, lan vừa phải quanh nút */
}
/* Rê chuột vào thì sóng dừng, nút nhích lên cho biết bấm được */
.lh-nut:hover::before, .lh-nut:hover::after{animation-play-state:paused}
.lh-nut:hover{transform:translateY(-2px)}
/* Ai bật chế độ giảm chuyển động thì tắt hẳn */
@media (prefers-reduced-motion:reduce){
  .lh-nut::before, .lh-nut::after{animation:none}
}

/* ---------------- ĐƯỜNG DẪN / BỐ CỤC TRONG ---------------- */
.duong-dan{font-size:var(--cx-13);color:var(--xam-7);padding:var(--k4) 0}
.duong-dan a:hover{color:var(--brand)}
.bo-cuc{display:grid;grid-template-columns:260px 1fr;gap:var(--k6);align-items:start}
.hop{background:var(--trang);border:1px solid var(--xam-2);border-radius:var(--bo-3);padding:var(--k5)}
.hop + .hop{margin-top:var(--k4)}
.hop__ten{font-size:var(--cx-16);margin-bottom:var(--k3)}

/* ---------------- BẢNG ---------------- */
.bang{width:100%;border-collapse:collapse;font-size:var(--cx-14)}
.bang th,.bang td{padding:var(--k3);border-bottom:1px solid var(--xam-2);text-align:left;vertical-align:middle}
.bang th{background:var(--xam-1);font-weight:600;color:var(--xam-7);font-size:var(--cx-13);
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.bang tr:last-child td{border-bottom:0}
.bang--soc tbody tr:hover{background:var(--xam-1)}
.cuon-ngang{overflow-x:auto}

/* ---------------- NHÃN TRẠNG THÁI ---------------- */
.nhan-tt{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--bo-tron);
  font-size:var(--cx-12);font-weight:600}
.nhan-tt--cho{background:#FFF6E5;color:#9A6400}
.nhan-tt--xac{background:#E7F1FF;color:#14539A}
.nhan-tt--giao{background:#E9F7F1;color:var(--xanh)}
.nhan-tt--huy{background:#FDECEB;color:var(--do)}

/* ---------------- THÔNG BÁO NỔI ---------------- */
.bao{position:fixed;right:var(--k5);bottom:var(--k5);z-index:200;display:flex;flex-direction:column;gap:var(--k2)}
.bao__o{background:var(--den);color:#fff;padding:var(--k3) var(--k5);border-radius:var(--bo-2);
  box-shadow:var(--do-bong-3);font-size:var(--cx-14);animation:len .25s ease}
.bao__o--ok{background:var(--xanh)}
.bao__o--loi{background:var(--do)}
@keyframes len{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------- TRỐNG ---------------- */
.trong{text-align:center;padding:var(--k16) var(--k4);color:var(--xam-7)}
.trong__icon{font-size:44px;margin-bottom:var(--k3)}

/* ---------------- ĐIỆN THOẠI / MÁY TÍNH BẢNG ---------------- */
@media (max-width:1100px){
  .luoi{grid-template-columns:repeat(4,1fr)}
  .dm-luoi{grid-template-columns:repeat(4,1fr)}
  .cot-dm{grid-template-columns:repeat(3,1fr)}
  .chan__luoi{grid-template-columns:1fr}
  .chan__phai{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .luoi,.luoi--4{grid-template-columns:repeat(3,1fr)}
  .bang-dau{grid-template-columns:1fr}
  .bo-cuc{grid-template-columns:1fr}
  .dau-trang__tren{display:none}
  .hotline{display:none}
  .dau-trang__giua .khung{height:64px;gap:var(--k3);flex-wrap:wrap}
}
@media (max-width:600px){
  .luoi,.luoi--4,.luoi--3{grid-template-columns:repeat(2,1fr)}
  .dm-luoi{grid-template-columns:repeat(3,1fr)}
  .cot-dm{grid-template-columns:1fr 1fr}
  .chan__luoi{grid-template-columns:1fr}
  .khoi__ten{font-size:var(--cx-20)}
  .bang-dau__chinh{padding:var(--k8) var(--k5);min-height:auto}
  .bang-dau__chinh h1{font-size:var(--cx-24)}
  .tim{order:3;flex-basis:100%;max-width:none}
  .dau-trang__giua .khung{height:auto;padding-top:var(--k3);padding-bottom:var(--k3)}
}

/* ---------------- CHÂN TRANG TRÊN ĐIỆN THOẠI ---------------- */
@media (max-width:600px){
  .chan{padding-top:var(--k8); padding-bottom:104px}  /* chừa chỗ cho 2 nút nổi khỏi che nội dung */
  .chan__luoi{grid-template-columns:1fr; gap:var(--k6)}
  .chan__phai{grid-template-columns:1fr; gap:var(--k6)}   /* xếp dọc, chữ không bị vỡ dòng */
  .chan h4{margin-bottom:var(--k2)}
  .chan__khung{max-width:100%}
  .chan__khung iframe{height:260px}      /* bản đồ: giữ gần tỉ lệ 4:3 để ghim nằm giữa */
  /* Fanpage tràn hết bề ngang: bỏ viền và nền của khung bao, khối Facebook tự lấp đầy */
  .chan__khung--fanpage{max-width:100%; border:0; background:none; border-radius:0; margin-top:var(--k2)}
  .chan__khung--fanpage iframe{height:150px}
  .chan__duoi{flex-direction:column; gap:var(--k2); text-align:left}
  .chan img[alt="Dekton"]{width:150px}
}


/* ===== TAB NHÓM HÀNG trong khối hệ nguồn (trang chủ) ===== */
.khoi-he__dau{flex-wrap:wrap;row-gap:var(--k2)}
.tab-hang{display:flex;gap:6px;flex:1 1 100%;order:3;margin-top:2px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.tab-hang::-webkit-scrollbar{display:none}
.khoi-he{scroll-margin-top:96px}
.tab-nut{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--vien);background:#fff;color:var(--xam-7);font-size:var(--cx-14);
  font-weight:500;cursor:pointer;white-space:nowrap;line-height:1.2}
.tab-nut:hover{border-color:var(--brand);color:var(--brand)}
.tab-nut.dang{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.tab-nut__so{font-size:var(--cx-13);opacity:.75}
.tab-nut.dang .tab-nut__so{opacity:.85}
.tab-o.an{display:none}
@media (min-width:900px){.tab-hang{flex:0 1 auto;order:2;margin:0 var(--k3);flex-wrap:wrap;overflow:visible}}


/* ===== Ô NHÓM HÀNG (khối "Mua theo nhóm hàng" trang chủ) ===== */
.luoi-nhom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--k3)}
.o-nhom{display:flex;align-items:center;justify-content:space-between;gap:var(--k2);
  background:#fff;border:1px solid var(--vien);border-radius:12px;
  padding:18px var(--k4);min-height:64px;transition:border-color .15s,box-shadow .15s}
.o-nhom:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.o-nhom__ten{font-weight:700;color:var(--brand-dam,var(--brand));text-transform:uppercase;
  font-size:var(--cx-15);line-height:1.3;letter-spacing:.01em}
.o-nhom__so{flex:none;font-size:var(--cx-13);color:var(--xam-6);font-weight:500}
@media (min-width:760px){.luoi-nhom{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.luoi-nhom{grid-template-columns:repeat(4,minmax(0,1fr))}}