/* ============================================================
   NỆM NHƯ Ý — GIAO DIỆN "THẤT TINH 08" (dark cosmic + cam logo)
   Nạp SAU Tailwind CDN trên mọi trang storefront.
   Ghi đè các class sáng của template gốc → nền tối vũ trụ, nhấn cam.
   Màu cam lấy từ logo (chữ N trong vòng tròn).
   ============================================================ */
:root{
  --bg:#06070C;            /* nền deep space */
  --bg2:#0B0E17;
  --panel:rgba(20,23,32,.66);
  --line:rgba(255,255,255,.08);
  --ink:#EDF1F7;           /* chữ sáng */
  --ink2:#94A0B4;          /* chữ phụ */
  --orange:#F0862E;        /* CAM thương hiệu (từ logo) */
  --orange-d:#D46A16;
  --amber:#FFC48A;         /* điểm nhấn ấm / đường nối sao */
  /* remap các biến cũ để phần dùng inline var() vẫn ăn tông tối */
  --navy:#0B1220; --blue:#14233d; --blue2:#1b3a63; --sky:#5b9bd5;
}

*{font-family:'Be Vietnam Pro',sans-serif;}
/* ---- CHỐNG TRÀN NGANG MOBILE (giống 7modu globals.css) ----
   Kẹp trang trong đúng bề rộng màn hình → hết cảnh ảnh/nội dung
   tràn ra ngoài, lệch sang một bên, cuộn ngang lung tung. ---- */
html{scroll-behavior:smooth;overflow-x:clip;}
body{overflow-x:clip;max-width:100vw;}
img,video,iframe{max-width:100%;}

/* ---- Nền tối + lớp sao tĩnh mờ (mọi trang) ---- */
body{
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(240,134,46,.10), transparent 60%),
    radial-gradient(1000px 700px at 8% 6%, rgba(60,90,160,.10), transparent 60%),
    var(--bg) !important;
  color:var(--ink) !important;
  min-height:100vh;
}
/* canvas chòm sao (chèn bởi theme.js) nằm dưới cùng */
#tt-sky{position:fixed;inset:0;z-index:0;pointer-events:none;}
#tt-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 30%,transparent 45%,rgba(4,5,10,.72) 100%);}
/* đẩy nội dung trang lên trên canvas — NHƯNG chừa các phần tử fixed/sticky
   (header dán, nút nổi Zalo/hotline, modal) để không phá position của chúng */
body>*:not(#tt-sky):not(#tt-vignette):not(.fixed):not(.sticky){position:relative;z-index:1;}

/* ---- Ghi đè bảng màu chữ tiêu đề (arbitrary classes của template) ---- */
.text-\[var\(--navy\)\]{color:var(--ink) !important;}
.text-\[var\(--blue\)\],
.text-\[var\(--blue2\)\]{color:var(--amber) !important;}
.text-\[var\(--ink\)\]{color:var(--ink) !important;}
.bg-\[var\(--navy\)\]{background:linear-gradient(135deg,var(--orange),var(--orange-d)) !important;color:#1a1205 !important;}

/* xám → xám sáng */
.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700,.text-gray-800{color:var(--ink2) !important;}

/* ---- Thẻ trắng → kính mờ tối ---- */
.bg-white,.bg-white\/95,.bg-white\/90,.bg-white\/80{
  background:var(--panel) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);
}
.bg-\[\#f4f7fb\]{background:transparent !important;}
.bg-gray-50,.bg-gray-100{background:rgba(255,255,255,.05) !important;color:var(--ink) !important;}
.bg-blue-50{background:rgba(240,134,46,.14) !important;color:var(--amber) !important;}

/* viền */
.border-blue-50,.border{border-color:var(--line) !important;}

/* Header dán trên: kính tối */
header.bg-white\/95{
  background:rgba(8,10,17,.82) !important;
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}

/* ---- Thẻ sản phẩm / danh mục: hover phát sáng cam ---- */
a.group.bg-white,.card,.bg-white{border:1px solid var(--line);}
a.group:hover,.hover\:shadow-xl:hover{
  border-color:rgba(240,134,46,.5) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(240,134,46,.12) !important;
}

/* ---- Ô nhập liệu trên nền tối ---- */
input,textarea,select{
  background:rgba(255,255,255,.05) !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}
input::placeholder,textarea::placeholder{color:var(--ink2) !important;}
.bg-transparent{background:transparent !important;}

/* ---- Footer: dải cosmic tối thay gradient xanh ---- */
.footer-bg{
  background:linear-gradient(135deg,#0A0D16 0%,#0E1424 55%,#10192c 100%) !important;
  border-top:1px solid var(--line);
}
.footer-bg::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;
}
/* badge trắng trong footer → giữ đọc được */
.bg-white\/90{background:rgba(255,255,255,.92) !important;color:#10192c !important;}
.text-blue-900{color:#10192c !important;}
.text-orange-300{color:var(--amber) !important;}

/* ---- Nút CTA gradient navy → giữ tông tối sang ---- */
[style*="var(--navy)"]{}

/* ============ Thành phần "Thất Tinh" cho trang chủ ============ */
/* chữ ánh kim quét sáng */
.tt-shine{
  background:linear-gradient(110deg,#EDF1F7 30%,var(--orange) 46%,#FFE8CC 52%,var(--orange) 58%,#EDF1F7 74%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tt-shimmer 4.5s linear infinite;
}
@keyframes tt-shimmer{to{background-position:-250% 0;}}

.tt-eyebrow{font-size:12px;letter-spacing:4px;color:var(--amber);text-transform:uppercase;font-weight:600;}

/* nút chính (nam châm) */
.tt-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FFB367,var(--orange));
  color:#241503;font-weight:800;font-size:15.5px;
  padding:15px 30px;border-radius:14px;text-decoration:none;
  box-shadow:0 0 0 1px rgba(240,134,46,.35),0 14px 40px rgba(240,134,46,.30);
  transition:box-shadow .25s,transform .12s;will-change:transform;
}
.tt-btn:hover{box-shadow:0 0 0 1px rgba(240,134,46,.6),0 18px 56px rgba(240,134,46,.45);}

.tt-ghost{
  color:var(--ink);font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .2s;
}
.tt-ghost:hover{border-color:var(--orange);}

/* hero cosmic */
.tt-hero{position:relative;overflow:hidden;border-radius:26px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(18,22,34,.6),rgba(9,11,18,.35));
  padding:56px 34px;min-height:420px;display:flex;flex-direction:column;justify-content:center;}
.tt-hero h1{font-weight:800;letter-spacing:-1.5px;line-height:1.04;color:var(--ink);}
.tt-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(240,134,46,.12);
  border:1px solid rgba(240,134,46,.3);color:var(--amber);
  font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;}

/* dải số liệu hero */
.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;}

/* gạch chân tiêu đề section (đổi cam) */
.bg-\[var\(--orange\)\]{background:var(--orange) !important;}

/* thanh top bar */
[style*="linear-gradient(90deg,var(--navy),var(--blue))"]{
  background:linear-gradient(90deg,#0A0D16,#12203a) !important;
}
/* CTA section gradient */
[style*="linear-gradient(90deg,var(--navy),var(--blue2))"]{
  background:linear-gradient(120deg,#10192c,#1b3a63) !important;
}

/* ============================================================
   FIX ẢNH SẢN PHẨM (giống cách 7modu): giữ nền TRẮNG thật cho ô ảnh
   + object-contain để ảnh sản phẩm hiện TRỌN, không bị nền kính tối nuốt.
   .prod-media KHÔNG bị rule .bg-white ở trên đè vì dùng class riêng.
   ============================================================ */
.prod-media{background:#fff !important;border-color:rgba(255,255,255,.14) !important;}

/* ============================================================
   FIX NÚT NỔI: chừa thanh điều hướng của điện thoại (safe-area) +
   nâng cao hơn trên màn hình nhỏ để không bị vướng nút back/home/recent.
   Rule dùng !important nên thắng inline style bottom cũ của #botFab/#botPanel.
   ============================================================ */
#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;}
/* Ô nhập chatbot nằm trên nền TRẮNG → chữ phải đậm (không để rule input tối nuốt) */
#botInput{color:#1f2937 !important;background:#fff !important;}
#botMsgs{color:#1f2937;}
/* Khi mở chatbot: ẩn nút nổi trái cho gọn, khỏi vướng */
body.bot-open .tt-float{display:none !important;}
@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;}
}