/* Giao diện sáng 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: light)">, giống dv-toi-moi.css.
   Hai file cùng một ngôn ngữ, nhưng nguồn chiều sâu khác nhau:

   - Tối: độ sáng bề mặt và quầng sáng. Bóng đổ trên nền tối không thấy.
   - Sáng: bóng đổ hai lớp pha Deep Water. Quầng sáng trên nền sáng không thấy.

   Luật giữ nguyên từ DESIGN.md: mỗi lớp bóng đậm tối đa 10%, một màu nhấn Deal Blue, không kem/be.
   Tương phản đo theo WCAG 2.1 trên nền ám xanh đậm nhất dùng cho chữ (#EEF5FE):
   chữ phụ 4,72 · chữ link 5,28. Nút chính chuyển sắc #1E6FD9 → #1A63C4, chữ trắng 4,85 tới 5,79. */

:root{
  --dv-nen:#F1F6F5;
  --dv-be-mat-2:#FFFFFF;
  --dv-nen-nhan:#EEF5FE;
  --dv-duong-ke:#DCE6E4;

  /* bóng hai lớp: một lớp sát viền cho mép sắc, một lớp xa cho độ nổi */
  --dv-bong:0 1px 2px rgba(11,58,70,.06),0 8px 24px -8px rgba(11,58,70,.10);
  --dv-bong-cao:0 1px 2px rgba(11,58,70,.06),0 18px 40px -14px rgba(11,58,70,.10),0 10px 24px -12px rgba(30,111,217,.10);
  --dv-bong-noi:0 2px 6px rgba(11,58,70,.06),0 32px 64px -20px rgba(11,58,70,.10);

}

/* ---------- nền: trời sáng ----------
   Quầng Deal Blue rất nhạt ở góc phải trên, cùng vị trí quầng của giao diện tối. */
body{
  background:
    radial-gradient(130% 55% at 90% -10%,rgba(30,111,217,.14),transparent 62%),
    radial-gradient(70% 40% at 0% 0%,rgba(30,111,217,.05),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}

/* ---------- mở đầu ---------- */
.tc-meta{background:#FFFFFF;box-shadow:0 0 0 1px rgba(30,111,217,.18),0 4px 12px -6px rgba(30,111,217,.25)}

/* khối mùa sale: cửa sổ nhìn ra vũ trụ của con Dê, giữ màu Deep Water như hiện tại */
.tc-mua-sale{
  position:relative;
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(111,168,242,.35),transparent 60%),
    linear-gradient(160deg,#0F4A5A,#0B3A46 55%,#082C36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 36px -14px rgba(11,58,70,.10),0 12px 28px -10px rgba(30,111,217,.10);
}
.tc-mua-sale-so{
  background:linear-gradient(180deg,#FFFFFF 30%,#B9D6FA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- chip, ô logo: núm trắng có bóng ---------- */
.tc-chip{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--dv-duong-ke),0 1px 2px rgba(11,58,70,.06)}
.tc-chip:hover{box-shadow:inset 0 0 0 1px #C5D3D1,0 4px 10px -4px rgba(11,58,70,.10)}
.tc-chip[aria-pressed="true"]{
  background:linear-gradient(180deg,#14505F,#0B3A46);
  color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -6px rgba(11,58,70,.10);
}
.tc-o-logo{box-shadow:0 1px 2px rgba(11,58,70,.06),0 4px 10px -4px rgba(11,58,70,.10)}
.tc-nut-nhan[aria-pressed="true"] .tc-o-logo{box-shadow:0 0 0 3px rgba(30,111,217,.18)}

/* ---------- thẻ deal: trắng nổi trên Mist ---------- */
.tc-nhom,.tc-the-phu{border-color:rgba(11,58,70,.06);box-shadow:var(--dv-bong)}
.tc-deal.tc-het{background:#F7FAF9}
.tc-dai-meo{background:#F7FAF9}

/* ô mã: chiến lợi phẩm, ám xanh và có bóng xanh nhỏ */
.tc-ma{background:linear-gradient(180deg,#FFFFFF,#EEF5FE);box-shadow:0 4px 12px -6px rgba(30,111,217,.10)}
.tc-ma:hover{box-shadow:0 0 0 3px rgba(30,111,217,.12)}
.tc-ma-het,.tc-ma-trong,.tc-noi-bat .tc-ma-trong{background:none;box-shadow:none}
.tc-nut-chinh{
  background:linear-gradient(180deg,#1E6FD9,#1A63C4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -8px rgba(30,111,217,.10),0 2px 4px rgba(11,58,70,.06);
}
.tc-nut{background:#FFFFFF}
.tc-nut.tc-nut-chinh{background:linear-gradient(180deg,#1E6FD9,#1A63C4)}
.tc-nut.tc-nut-trong{background:none}

/* ---------- deal nổi bật: nổi cao nhất, ám xanh góc, ánh kim ----------
   Ánh kim ở nền sáng là dải trắng sáng hơn nền, nên thẻ phải ám xanh nhẹ thì dải mới thấy. */
.tc-noi-bat{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 100% at 100% 0%,#D3E4FC,transparent 65%),
    linear-gradient(180deg,#FFFFFF,#F4F8FE);
  border-color:rgba(30,111,217,.3);
  box-shadow:var(--dv-bong-cao);
}
.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,.55) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.55) 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)}
}

/* ---------- dải công cụ: dải Deep Water, quầng xanh ở góc ---------- */
.tc-dai-toi{
  background:
    radial-gradient(60% 120% at 100% 0%,rgba(111,168,242,.32),transparent 60%),
    linear-gradient(180deg,#0F4A5A,#0B3A46);
}
.tc-nut-toi{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.tc-nut-toi:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tc-chan{background:linear-gradient(180deg,#0B3A46,#082C36)}

/* ---------- hộp thoại ---------- */
.tc-hop{border-color:rgba(11,58,70,.06)}
.tc-hop::backdrop{background:rgba(11,58,70,.40);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

@media (max-width:899px){
  .tc-truot{padding-bottom:30px;margin-bottom:-24px}
  .tc-deal{border-color:rgba(11,58,70,.06)}
  .tc-nhom{background:none;box-shadow:none}
  .tc-noi-bat{border-color:rgba(30,111,217,.22)}
}

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