/* Giao diện tối của trang chủ: chiều sâu và ánh sáng. Chủ dự án duyệt ngày 08/10/2026.
   Gắn ở index.html bằng <link media="(prefers-color-scheme: dark)">, nên file viết thẳng, không bọc
   @media. Token màu gốc vẫn ở dv-hethong.css; file này chỉ đè lên ở chế độ tối.

   Ba ý chính, lý do ở docs/DESIGN.md của dealverse-platform:
   1. Bốn bậc bề mặt sáng dần theo độ cao, thay cho bóng đổ. Trên nền tối mắt đọc độ sâu bằng
      chênh độ sáng, bóng đổ gần như không thấy.
   2. Đèn chiếu từ trên: viền sáng 1px ở mép trên mỗi thẻ.
   3. Nguồn sáng duy nhất là Deal Blue: quầng sau ô mã, sau khối mùa sale, ánh kim trên deal nổi bật.

   Tương phản đo theo WCAG 2.1 trên bậc sáng nhất (bậc 3, #1A4554):
   chữ thân 8,89 · chữ phụ 5,02 · chữ link 4,68 · viền ô nhập 3,23. */

:root{
  --dv-nen:#06171D;
  --dv-be-mat:#0E2B35;          /* bậc 1: thẻ deal, ô nhập */
  --dv-be-mat-2:#143A47;        /* bậc 2: deal nổi bật, thẻ cột phụ */
  --dv-be-mat-3:#1A4554;        /* bậc 3: hộp thoại, thông báo */
  --dv-nen-nhan:#10334A;
  --dv-duong-ke:#1B3F4B;
  --dv-vien-o:#7894A0;
  --dv-vien-the:#1B3F4B;
  --dv-chu-phu:#A3B8BE;
  --dv-chu-phu-tren-dam:#A3B8BE;
  --dv-nen-dam:#0E2B35;

  /* ánh sáng */
  --dv-mep-sang:inset 0 1px 0 rgba(255,255,255,.12);
  --dv-quang:0 0 0 1px rgba(111,168,242,.35),0 0 28px -4px rgba(111,168,242,.45);
  --dv-bong:var(--dv-mep-sang),0 10px 28px -12px rgba(0,0,0,.6);
  --dv-bong-noi:var(--dv-mep-sang),0 24px 64px -16px rgba(0,0,0,.75);
}

/* ---------- nền: vũ trụ của con Dê ----------
   Một quầng Deal Blue rất loãng ở đầu trang, tắt dần xuống dưới. Sao vẽ bằng canvas ở dv-sao.js,
   chỉ trong vùng mở đầu. */
body{
  background:
    radial-gradient(130% 55% at 90% -8%,rgba(111,168,242,.28),transparent 62%),
    radial-gradient(80% 40% at 0% 2%,rgba(111,168,242,.10),transparent 60%),
    var(--dv-nen) no-repeat;
}
.tc-dau,#noi-dung,.tc-chan{position:relative;z-index:1}
.tc-sao-nen{position:absolute;inset:0 0 auto 0;z-index:0;width:100%;pointer-events:none}
.tc-dau{border-bottom-color:rgba(255,255,255,.06)}

/* ---------- mở đầu ---------- */
.tc-meta{background:rgba(111,168,242,.12);box-shadow:inset 0 0 0 1px rgba(111,168,242,.25)}
.tc-h1-nhan{background:linear-gradient(transparent 58%,rgba(111,168,242,.38) 58%)}

/* khối mùa sale: thẻ kính, viền sáng, quầng xanh phía sau */
.tc-mua-sale{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 60%),var(--dv-be-mat-2);
  box-shadow:var(--dv-mep-sang),inset 0 0 0 1px rgba(255,255,255,.06),0 20px 48px -14px rgba(111,168,242,.7);
}
.tc-mua-sale-so{
  background:linear-gradient(180deg,#FFFFFF 30%,#9FC6F7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* con Dê: quầng sáng quanh mũ phi hành gia */
.tc-mua-sale .tc-de-svg{filter:drop-shadow(0 0 10px rgba(111,168,242,.45))}

/* ---------- chip và ô logo: núm bấm có khối ---------- */
.tc-chip{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),var(--dv-be-mat);
  box-shadow:inset 0 0 0 1px var(--dv-duong-ke),var(--dv-mep-sang);
}
.tc-chip[aria-pressed="true"]{
  background:linear-gradient(180deg,#FFFFFF,#D9E6EA);
  color:var(--dv-nen);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 6px 16px -6px rgba(111,168,242,.6);
}
.tc-o-logo{border-color:rgba(255,255,255,.1);box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.tc-o-logo-chu{background:var(--dv-be-mat)}
.tc-nut-nhan[aria-pressed="true"] .tc-o-logo{border-color:var(--dv-diem-nhan);box-shadow:var(--dv-quang)}

/* ---------- thẻ deal: bậc 1, mép sáng, gradient từ trên xuống ---------- */
.tc-nhom,.tc-deal,.tc-the-phu,.tc-rong{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 45%),var(--dv-be-mat);
}
.tc-nhom,.tc-the-phu{border-color:rgba(255,255,255,.06);box-shadow:var(--dv-bong)}
.tc-deal.tc-het{background:var(--dv-nen)}
.tc-lo{background:var(--dv-nen);border-color:rgba(255,255,255,.06)}
.tc-dai-meo{background:rgba(255,255,255,.02)}
.tc-the-phu{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--dv-be-mat-2)}

/* ô mã: chiến lợi phẩm, nên là thứ phát sáng duy nhất trong thẻ */
.tc-ma{
  background:linear-gradient(180deg,rgba(111,168,242,.26),rgba(111,168,242,.1));
  box-shadow:0 0 26px -4px rgba(111,168,242,.6);
}
.tc-ma:hover{box-shadow:var(--dv-quang)}
.tc-ma-het,.tc-ma-trong,.tc-noi-bat .tc-ma-trong{background:none;box-shadow:none}
.tc-nut-chinh{
  background:linear-gradient(180deg,#8BBAF5,#5E9AEB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px rgba(111,168,242,.8);
}

/* ---------- deal nổi bật: bậc 2 và lớp ánh kim ----------
   Ánh kim là một dải sáng chéo trượt qua thẻ, chỉ dùng transform nên trình duyệt vẽ bằng GPU.
   Chỉ có trắng và Deal Blue, không cầu vồng: một màu nhấn duy nhất (DESIGN.md §3). */
.tc-noi-bat{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(110% 90% at 100% 0%,rgba(111,168,242,.38),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),
    var(--dv-be-mat-2);
  border-color:rgba(111,168,242,.4);
  box-shadow:var(--dv-mep-sang),0 24px 56px -18px rgba(111,168,242,.6);
}
.tc-noi-bat::after{
  content:"";position:absolute;inset:-50% auto -50% 0;z-index:-1;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.1) 40%,rgba(160,200,250,.24) 50%,rgba(255,255,255,.1) 60%,transparent);
  transform:translateX(-120%) rotate(12deg);
  animation:tc-anh-kim 7s ease-in-out 1.2s infinite;
  pointer-events:none;
}
@keyframes tc-anh-kim{
  0%{transform:translateX(-120%) rotate(12deg)}
  35%,100%{transform:translateX(320%) rotate(12deg)}
}
.tc-noi-bat .tc-ma{background:linear-gradient(180deg,rgba(111,168,242,.22),rgba(111,168,242,.1))}
/* ô mã rỗng (deal không cần mã) không được ăn nền ô mã ở dòng trên: cùng độ ưu tiên nên phải đứng sau */
.tc-noi-bat .tc-ma-trong{background:none;box-shadow:none}

/* ---------- dải công cụ: thẻ tối sâu hơn nền, quầng xanh ở góc ---------- */
.tc-dai-toi{
  background:
    radial-gradient(60% 120% at 100% 0%,rgba(111,168,242,.2),transparent 60%),
    linear-gradient(180deg,#0B2530,#071B22);
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.04);
}
.tc-nut-toi{
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),var(--dv-mep-sang);
}
.tc-nut-toi:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.tc-chan{background:#04121A;border-top:1px solid rgba(255,255,255,.05)}

/* ---------- hộp thoại và thông báo: bậc 3 ---------- */
.tc-hop{background:var(--dv-be-mat-3);border-color:rgba(255,255,255,.08)}
.tc-hop::backdrop{background:rgba(2,10,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

@media (max-width:899px){
  /* dải trượt cắt mọi thứ tràn ra, kể cả quầng sáng dưới thẻ. Nới đệm dưới rồi kéo lề âm bù lại. */
  .tc-truot{padding-bottom:30px;margin-bottom:-24px}
  .tc-dai-meo{background:rgba(255,255,255,.025)}
  .tc-deal{border-color:rgba(255,255,255,.06)}
  .tc-nhom{background:none;box-shadow:none}
  .tc-noi-bat{border-color:rgba(111,168,242,.28)}
}

@media (prefers-reduced-motion:reduce){
  .tc-noi-bat::after{animation:none;display:none}
}