/* ============================================================
   NỆM NHƯ Ý — GIAO DIỆN SÁNG "NHƯ Ý SÁNG" (mặc định từ 10/09/2026)
   ------------------------------------------------------------
   Tuan chốt 10/09/2026: "tối quá — cho màu mặc định là màu SÁNG, học noithatgiakho.com /
   7modu.vn, áp dụng cho các trang của Nệm Như Ý sau này".
   ⇒ File này DÙNG CHUNG cho site mẹ nemnhuy.com VÀ mọi site địa phương (nemquan9, nemthuduc,
     nemdaklak… — site mới được nhân bản từ nemquan9 nên cũng mang file này).
   Skin tối "Thất Tinh 08" cũ đã cất ở: BRANDS\Nệm Như Ý\_luu-tru\skin-toi-that-tinh-truoc-10-09-2026\

   Nạp SAU Tailwind CDN. Tailwind CDN chèn <style> của nó vào CUỐI <head> lúc chạy, nên:
     - muốn thắng một class Tailwind mà KHÔNG phá hover  → thêm tiền tố `html ` (tăng đặc trưng)
     - muốn thắng tuyệt đối (kể cả inline style)          → dùng !important

   LUẬT MÀU (đo WCAG, đừng đổi giá trị mà không chạy lại scripts/cham-do-doc.mjs):
     --orange  #0A7F2A  xanh ĐỌC ĐƯỢC: chữ xanh trên trắng 5,1:1 · chữ trắng trên nó 5,1:1
     --orange-bright #12A83A  xanh biển hiệu gốc — CHỈ trang trí (gạch nhấn, viền, icon).
                               Làm chữ nhỏ trên trắng chỉ 3,1:1 → KHÔNG đạt.
     --amber   #F7C325  vàng gold biển hiệu — CHỈ làm NỀN (chữ tối đè lên). Làm chữ trên trắng 1,6:1.
     --amber-ink #8A6100 vàng đậm khi buộc phải làm CHỮ trên nền sáng (5,5:1).
     --gia     #D61F26  màu GIÁ — đỏ đậm như noithatgiakho/7modu (5,1:1).
   ⚠️ Tên biến --orange/--amber GIỮ NGUYÊN (chỉ đổi GIÁ TRỊ): site.js dò chuỗi "--orange"
      để đánh dấu menu đang mở; các site địa phương dùng var(--amber) ở hàng chục chỗ.
   ============================================================ */
:root{
  --bg:#F5F8F4;            /* nền trang: trắng ngả xanh rất nhẹ */
  --bg2:#EAF4EC;           /* nền nhạt xanh cho khối phụ */
  --panel:#FFFFFF;         /* thẻ nội dung */
  --line:#E1E9E3;          /* viền mảnh */
  --ink:#16261C;           /* chữ chính */
  --ink2:#4E5E54;          /* chữ phụ (7,1:1 trên trắng) */
  --ink3:#66736B;          /* chữ mờ nhất vẫn đạt 4,5 (giá gạch, ngày đăng, số sản phẩm) */
  --orange:#0A7F2A;
  --orange-d:#086423;
  --orange-btn:#0A7F2A;
  --orange-bright:#12A83A;
  --amber:#F7C325;
  --amber-ink:#8A6100;
  --gia:#D61F26;
  --navy:#0B4A21; --blue:#0E6B2E; --blue2:#12803A; --sky:#41BE61;
  --bong:0 1px 2px rgba(16,40,24,.05),0 6px 20px rgba(16,40,24,.06);
  --bong-hover:0 2px 6px rgba(16,40,24,.07),0 18px 40px rgba(16,40,24,.13);
}

*{font-family:'Be Vietnam Pro',sans-serif;}

/* ---- CHỐNG TRÀN NGANG MOBILE (giống 7modu globals.css) ---- */
html{scroll-behavior:smooth;overflow-x:clip;background:var(--bg);}
body{overflow-x:clip;max-width:100vw;}
img,video,iframe{max-width:100%;}

/* ---- Nền sáng. Bám cả body CÓ CLASS `bg-[#f4f7fb]` (class Tailwind đặc trưng 0,1,0) ---- */
body,body.bg-\[\#f4f7fb\]{background:var(--bg) !important;color:var(--ink) !important;min-height:100vh;}
[id]{scroll-margin-top:84px;}   /* neo #banchay/#cuahang không bị header dán che mất tiêu đề */

/* ---- Bản đồ Leaflet: nhốt z-index của nó lại, không cho đè header dán + thanh đáy ---- */
.leaflet-container{z-index:0;}

/* ============ LỚP CLASS CỦA KHUÔN (starter-ecom) ============ */
.text-\[var\(--navy\)\]{color:var(--navy) !important;}
.text-gray-400{color:var(--ink3) !important;}
.text-gray-500{color:var(--ink2) !important;}
.text-red-500{color:#C62828 !important;}          /* "Xem bản đồ lớn": đỏ-500 trên trắng chỉ 3,8:1 */

/* thẻ trắng: viền mảnh + bóng mềm (học 7modu) */
html .border-blue-50{border-color:var(--line);}
html .shadow-sm{box-shadow:var(--bong);}
html .bg-blue-50{background-color:var(--bg2);}
html .bg-blue-50\/30,html .bg-blue-50\/40,html .bg-blue-50\/50,html .bg-blue-50\/60{background-color:rgba(18,168,58,.07);}
html header .bg-gray-100{background-color:#EEF4EF;border:1px solid var(--line);}
html a.group:hover{box-shadow:var(--bong-hover);}
html a.group.border:hover{border-color:rgba(18,168,58,.38);}

/* Header dán: trắng sạch, viền dưới mảnh */
header.bg-white\/95{
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(16,40,24,.06) !important;
}

/* gạch nhấn dưới tiêu đề khối: xanh biển hiệu → vàng gold (đúng hai màu trên biển hiệu cửa hàng) */
.w-20.h-1.bg-\[var\(--orange\)\]{background:linear-gradient(90deg,var(--orange-bright),var(--amber)) !important;}
.bg-\[var\(--orange\)\]{background-color:var(--orange-bright);}
/* vòng tròn icon "Quy trình" */
.bg-\[var\(--navy\)\]{background:linear-gradient(135deg,var(--orange-bright),var(--orange)) !important;}

/* ---- Ô nhập liệu: nền trắng, viền rõ, sáng lên khi bấm vào ---- */
input.border,textarea.border,select.border{border-color:#D5DFD8 !important;background:#fff;}
input.border:focus,textarea.border:focus,select.border:focus{
  border-color:var(--orange-bright) !important;box-shadow:0 0 0 3px rgba(18,168,58,.16);outline:none;
}

/* ---- GIÁ: đỏ đậm, học noithatgiakho/7modu — mắt khách tìm giá trước tiên ---- */
a.group .text-\[var\(--orange\)\].font-extrabold,
.text-2xl.font-extrabold.text-\[var\(--orange\)\],
.gia{color:var(--gia) !important;}

/* ---- Vàng gold: trên nền SÁNG phải lùi về vàng đậm mới đọc được ---- */
.text-\[var\(--amber\)\],[style*="color:var(--amber)"]{color:var(--amber-ink) !important;}
/* …nhưng trong KHỐI NỀN TỐI (hero xanh, dải chốt, footer) thì giữ vàng sáng */
.hero-bg .text-\[var\(--amber\)\],.bg-\[\#062910\] .text-\[var\(--amber\)\],.footer-bg .text-\[var\(--amber\)\],
[style*="linear-gradient(90deg,var(--navy)"] .text-\[var\(--amber\)\],
[style*="linear-gradient(120deg,var(--navy)"] .text-\[var\(--amber\)\]{color:var(--amber) !important;}
/* tiêu đề trang chính sách (chinh-sach.html gõ cứng màu vàng cho skin tối) */
.doc h2{color:var(--navy) !important;}

/* ---- Khối nền tối có chủ đích (dải chốt cuối trang): đầu phải đủ đậm cho chữ trắng/90 ---- */
[style*="linear-gradient(90deg,var(--navy),var(--blue2))"]{
  background:linear-gradient(120deg,var(--navy),var(--blue)) !important;
}

/* ---- Footer: khối xanh rừng đậm — neo thị giác cuối trang (giống footer navy của 7modu) ---- */
.footer-bg{
  background:linear-gradient(135deg,#093A1A 0%,#0B4A21 55%,#0E5A28 100%) !important;
  position:relative;overflow:hidden;
}
.footer-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;opacity:.6;
}

/* ============ HERO SÁNG (trang chủ nemnhuy.com) ============
   Học 7modu.vn: ảnh thật + tiêu đề to + một nút chính.
   Học noithatgiakho.com: thẻ giá sản phẩm thật nằm ngay trên ảnh. */
.tt-hero{
  position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(135deg,#FFFFFF 0%,#F3F9F4 58%,#E8F4EB 100%);
  box-shadow:var(--bong);display:grid;grid-template-columns:1fr;
}
@media (min-width:900px){.tt-hero{grid-template-columns:1.05fr .95fr;min-height:460px;}}
.tt-hero-chu{position:relative;z-index:1;padding:34px 22px 30px;display:flex;flex-direction:column;justify-content:center;}
@media (min-width:768px){.tt-hero-chu{padding:52px 46px;}}
.tt-hero h1{font-weight:800;letter-spacing:-1.2px;line-height:1.06;color:var(--navy);}
.tt-hero-anh{position:relative;min-height:250px;background:#EFE9DF;}
.tt-hero-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tt-hero-the{
  position:absolute;left:16px;bottom:16px;right:auto;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;
  padding:10px 16px 10px 12px;box-shadow:0 12px 30px rgba(16,40,24,.16);color:var(--ink);
}
.tt-hero-the .dau{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--amber);color:#3A2A00;font-weight:800;font-size:18px;}
.tt-hero-the b{display:block;font-size:13.5px;line-height:1.25;color:var(--navy);}
.tt-hero-the span{display:block;font-size:14px;font-weight:800;color:var(--gia);}

/* chữ nhấn "như ý": xanh + vạch bút dạ vàng gold phía dưới (màu biển hiệu) */
.tt-shine{
  color:var(--orange);padding:0 .06em;border-radius:4px;
  background:linear-gradient(transparent 66%,rgba(247,195,37,.55) 66%,rgba(247,195,37,.55) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.tt-eyebrow{font-size:12px;letter-spacing:4px;color:var(--amber-ink);text-transform:uppercase;font-weight:700;}
.tt-chip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:#FFF6D8;border:1px solid #F1D57E;color:#6B4E00;
  font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;}

/* nút chính (nam châm — theme.js) */
.tt-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#fff !important;font-weight:800;font-size:15.5px;
  padding:15px 28px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 26px rgba(10,127,42,.26);
  transition:background .2s,box-shadow .25s,transform .12s;will-change:transform;
}
.tt-btn:hover{background:var(--orange-d);box-shadow:0 14px 34px rgba(10,127,42,.34);}
.tt-ghost{
  color:var(--navy);font-size:14.5px;font-weight:600;text-decoration:none;
  border-bottom:2px solid rgba(18,168,58,.35);padding-bottom:2px;transition:border-color .2s;
}
.tt-ghost:hover{border-color:var(--orange-bright);}
.tt-stat b{color:var(--orange);font-size:24px;font-weight:800;display:block;line-height:1;}
.tt-stat span{color:var(--ink2);font-size:12.5px;}

/* ============================================================
   ẢNH SẢN PHẨM (giống 7modu): ô ảnh nền trắng + object-contain để ảnh hiện TRỌN
   ============================================================ */
.prod-media{background:#fff !important;border-color:var(--line) !important;}

/* ============================================================
   MENU MOBILE (site.js bơm inline style TỐI) → lật sang sáng bằng !important,
   KHÔNG sửa site.js (mỗi site địa phương có bản site.js riêng, sửa 1 chỗ ở đây ăn cho tất cả)
   ============================================================ */
#mobMenu{
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 18px 40px rgba(16,40,24,.14) !important;
}
#mobMenu a:not([href^="tel:"]){color:var(--ink) !important;border-bottom-color:#EDF2EE !important;}
/* trang đang mở: theme.js gắn .dang-mo (site.js tự dò bị sai — link thường cũng có chuỗi "--orange") */
#mobMenu a.dang-mo{color:var(--orange) !important;background:var(--bg2) !important;box-shadow:inset 3px 0 0 var(--orange-bright);}
#mobMenu a[href^="tel:"]{background:var(--orange) !important;color:#fff !important;}
#mobMenuBtn span{background:var(--orange) !important;}

/* ============================================================
   NÚT NỔI + CHATBOT: chừa thanh điều hướng điện thoại (safe-area)
   ============================================================ */
#botFab{bottom:calc(env(safe-area-inset-bottom, 0px) + 20px) !important;right:16px !important;}
#botPanel{bottom:calc(env(safe-area-inset-bottom, 0px) + 90px) !important;}
.tt-float{bottom:calc(env(safe-area-inset-bottom, 0px) + 20px) !important;}
#botInput{color:#1f2937 !important;background:#fff !important;}
#botMsgs{color:#1f2937;}
/* bong bóng chữ TRẮNG của khách: nền #12A83A chỉ 3,1:1 → lùi về xanh đậm */
#botMsgs div[style*="background:#12A83A"]{background:var(--orange) !important;}
#botSend{background:var(--orange) !important;}
body.bot-open .tt-float{display:none !important;}

/* ============================================================
   THANH HÀNH ĐỘNG DÍNH ĐÁY — chỉ điện thoại (theme.js bơm vào)
   Học noithatgiakho.com: trên điện thoại khách không cuộn lên tìm số — nút gọi phải luôn
   nằm dưới ngón cái. Số lấy từ header của CHÍNH trang (mỗi cửa hàng một hotline riêng).
   ============================================================ */
#ny-thanh-duoi{display:none;}
@media (max-width:767px){
  #ny-thanh-duoi{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:rgba(255,255,255,.98);border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(16,40,24,.10);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  #ny-thanh-duoi a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    min-height:50px;border-radius:12px;text-decoration:none;
    font-size:11.5px;font-weight:700;color:var(--ink);
  }
  #ny-thanh-duoi a .ic{font-size:19px;line-height:1.1;}
  #ny-thanh-duoi a.dang-mo{color:var(--orange);background:var(--bg2);}
  #ny-thanh-duoi a.zalo{color:#0057D9;}
  #ny-thanh-duoi a.goi{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(10,127,42,.30);}
  body.co-thanh-duoi{padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px));}
  body.co-thanh-duoi .tt-float{display:none !important;}   /* thanh đáy đã có Zalo + Gọi */
  body.co-thanh-duoi #botFab{bottom:calc(env(safe-area-inset-bottom, 0px) + 78px) !important;width:54px !important;height:54px !important;}
  body.bot-open #ny-thanh-duoi{display:none;}               /* mở chatbot thì nhường chỗ cho khung chat */
}
@media (max-width:768px){
  /* Chatbot thành bottom-sheet gần full màn cho dễ thao tác */
  #botPanel{left:10px !important;right:10px !important;width:auto !important;
    height:72vh !important;max-height:calc(100dvh - 96px) !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 84px) !important;}
  #botFab{bottom:calc(env(safe-area-inset-bottom, 0px) + 20px) !important;}
  .tt-float{bottom:calc(env(safe-area-inset-bottom, 0px) + 20px) !important;}
}

/* ============================================================
   RUỘT BÀI VIẾT — chữ đậm dễ đọc, tiêu đề xanh, có vạch nhấn trái
   ============================================================ */
.article,.article p,.article li,.article td,.article th,.prose,.prose p,.prose li{color:#26352C !important;}
.article{font-size:16.5px;line-height:1.85;}
.article p{margin:.85rem 0 !important;}
.article h2{color:var(--navy) !important;font-size:1.38rem !important;margin:1.9rem 0 .7rem !important;
  padding-left:12px;border-left:4px solid var(--orange-bright);}
.article h3{color:var(--blue) !important;font-size:1.1rem;font-weight:800;margin:1.3rem 0 .5rem;}
.article b,.article strong{color:var(--navy) !important;font-weight:700;}
.article a{color:var(--orange) !important;text-decoration:underline;}
.article ul{padding-left:1.35rem;}
.article li{margin:.35rem 0;}
.article img{border-radius:12px;}
.article-meta,.article-meta *{color:var(--ink2) !important;}
#authorBox p,#authorBox div,#authorBox span{color:var(--ink2) !important;}
.bg-blue-50\/40 .text-xs{color:var(--ink2) !important;}

/* ============================================================
   VÁ SAU LƯỢT CHẤM ĐẦU (10/09/2026) — mỗi dòng có lý do đo được
   ============================================================ */
/* chinh-sach.html gõ cứng `.doc b{color:#fff}` cho skin tối → trắng trên trắng 1,03:1 */
.doc b{color:var(--navy) !important;}

/* Nút gọi nổi dùng `animate-pulse` (nhấp nháy ĐỘ MỜ): trên nền tối thì mờ đi vẫn đọc được,
   trên nền SÁNG thì chữ trắng chìm còn 2,7:1. Đổi sang VÒNG SÓNG lan ra ngoài — nút không mờ. */
.tt-float .animate-pulse{animation:ny-vong-song 2.2s ease-out infinite !important;opacity:1 !important;}
@keyframes ny-vong-song{
  0%{box-shadow:0 0 0 0 rgba(18,168,58,.45),0 10px 22px rgba(10,127,42,.25);}
  70%,100%{box-shadow:0 0 0 14px rgba(18,168,58,0),0 10px 22px rgba(10,127,42,.25);}
}

/* Lưới 2 cột (bộ lọc + sản phẩm) ở danhmuc.html: trên điện thoại cột co về 1 nhưng con của lưới
   mặc định min-width:auto → thanh công cụ dài đẩy cả cột lòi khung 22px. */
.grid > main,.grid > aside{min-width:0;}

/* Header điện thoại: tên cửa hàng dài ("Nệm Như Ý Quận 9") + gap-6 đẩy nút menu lòi khung 14px */
@media (max-width:480px){
  header > div.gap-6{gap:10px !important;}
}

@media (prefers-reduced-motion: reduce){
  .fade-up{opacity:1 !important;transform:none !important;transition:none !important;}
  .tt-btn{transition:none;}
  .tt-float .animate-pulse{animation:none !important;}
}
