/* ═══════════════════════════════════════════════════════════════
   skin2.css — LỚP PHỦ GIAO DIỆN (14/08/2026)

   Nạp SAU tất cả CSS khác. Chỉ thêm lớp áo: ảnh thật, khối tối,
   nền có vân. KHÔNG đổi chức năng, KHÔNG đổi id, KHÔNG đổi luồng.
   Muốn hoàn tác: xoá 1 dòng <link ... skin2.css> trong index.html.

   Ảnh dùng chung ở img/skin/ — sinh bằng ~/VFC/VuonTamHon/_skin-assets/gen-bia.py
   Bảng màu giữ nguyên token :root đang chạy.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --toi-1: rgba(28, 40, 26, .90);
  --toi-2: rgba(38, 52, 33, .93);
  --toi-3: rgba(47, 61, 39, .97);
  --kem-sang: #FAF7F0;
  --bong-sau: 0 30px 70px -28px rgba(47, 61, 39, .55);
}

/* ── nền có vân đất, rất mờ: chỉ đủ để nền hết phẳng ──────────── */
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("img/skin/van-dat.jpg") center / 300px;
  opacity: .085;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* ⚠️ CHỈ nâng hai khối này lên trên lớp vân. KHÔNG dùng `.app > *`:
   nó sẽ ghi đè position:absolute của .sos-btn (nút Bình tĩnh) làm nút rơi
   xuống đè lên thanh tab. Đã vấp một lần 14/08. */
.app > .stage, .app > .tabbar { position: relative; z-index: 1; }

/* ══ KHỐI TỐI dùng chung cho đầu các màn ═══════════════════════ */
.hero-toi {
  position: relative;
  margin: calc(-1 * max(18px, env(safe-area-inset-top))) -22px 0;
  padding: max(18px, env(safe-area-inset-top)) 22px 66px;
  overflow: hidden;
  color: var(--kem-sang);
  background:
    linear-gradient(180deg, var(--toi-1) 0%, var(--toi-2) 55%, var(--toi-3) 100%),
    url("img/skin/nen-re.jpg") center 30% / cover;
}
.hero-toi::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 240px;
  background: radial-gradient(ellipse at 50% 100%, rgba(224, 176, 72, .30), transparent 68%);
  pointer-events: none;
}
.hero-toi > * { position: relative; z-index: 1; }

/* masthead nằm trong khối tối */
.hero-toi .masthead { color: rgba(250, 247, 240, .62); }
.hero-toi .masthead .mh-brand { color: var(--vang-sang); }
.hero-toi .masthead .mh-day { color: rgba(250, 247, 240, .6); }
.hero-toi .masthead::before { background: linear-gradient(90deg, transparent, rgba(242, 214, 143, .45)); }
.hero-toi .masthead::after { background: linear-gradient(90deg, rgba(242, 214, 143, .45), transparent); }

/* nhãn nhỏ có gạch dẫn vào — mô-típ lặp khắp app */
.nhan-dan {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--vang-sang);
}
.nhan-dan::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  opacity: .6;
}

/* ══ TRANG CHỦ ═════════════════════════════════════════════════ */
.hero-toi .today-head { text-align: left; margin-top: 14px; }
.hero-toi .tc-title {
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: -.5px;
  color: var(--kem-sang);
  text-shadow: 0 4px 50px rgba(224, 176, 72, .30);
  margin-top: 12px;
}
.hero-toi .tc-title em { color: var(--vang-sang); }
.hero-toi .greet-whisper {
  display: block;
  max-width: 300px;
  margin: 16px 0 0;
  padding-left: 15px;
  border-left: 2px solid rgba(224, 176, 72, .5);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(250, 247, 240, .90);
}

/* thẻ hôm nay nổi đè lên đáy khối tối = có chiều sâu */
#s-today .today-card {
  margin-top: -48px;
  border-color: rgba(224, 176, 72, .30);
  box-shadow: var(--bong-sau);
  text-align: left;
}

/* VIỆC NHỎ ĐỨNG ĐẦU, chữ to nhất màn hình.
   Hồ sơ Luồng D: cha mẹ ở lại vì "mở app là biết ngay tối nay làm gì với con". */
#s-today .tcd-task {
  margin-top: 4px;
  background: none;
  border: 0;
  padding: 0;
}
#s-today .tcd-task p {
  margin-top: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -.3px;
  color: var(--nau-dat);
}
#s-today .tcd-pill {
  background: none;
  padding: 0;
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

/* hạt giống lùi xuống làm dòng phụ — nó là cái nhãn, không phải việc */
#s-today .hat-phu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(149, 110, 66, .14);
  font-size: 14px;
  color: var(--nau-dat-nhat);
  text-align: left;
}
#s-today .hat-phu .tcd-applewrap { margin: 0; flex: 0 0 46px; width: 46px; height: 46px; }
#s-today .hat-phu .tcd-applewrap::before { inset: -6px; opacity: .7; }
#s-today .hat-phu .tc-apple svg { width: 44px; height: 44px; }
#s-today .hat-phu .tc-name {
  display: inline;
  font-size: 19px;
  margin: 0;
  color: var(--xanh-reu);
}
#s-today .hat-phu .tc-en { display: inline; font-size: 14px; margin-left: 6px; }
#s-today .hat-phu .tc-rule { display: none; }
#s-today .tc-whisper {
  max-width: none;
  margin: 12px 0 0;
  text-align: left;
  font-size: 16.5px;
  line-height: 1.55;
}
#s-today .why { text-align: left; }

/* CHO PHÉP DỪNG — hồ sơ Về Nhà: "chị được phép dừng lại".
   Cả thị trường bảo cố lên; đây là chỗ app nói ngược lại. */
.duoc-dung {
  margin: 15px 12px 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--nau-dat-nhat);
}

/* HAI CỬA RẼ: một cho con (Luồng A/D), một cho chính mình (Luồng B) */
.hai-cua {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 20px;
}
.cua {
  display: block;
  width: 100%;
  padding: 16px 15px 17px;
  border: 1px solid var(--vien);
  border-radius: 20px;
  background: var(--trang-nga);
  box-shadow: 0 18px 40px -26px var(--bong);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}
.cua .cua-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(125, 160, 99, .16);
}
.cua.minh .cua-ic { background: rgba(235, 160, 117, .18); }
.cua .cua-t {
  display: block;
  margin-top: 11px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.14;
  color: var(--xanh-reu);
}
.cua.minh .cua-t { color: #A9603C; }
.cua .cua-s {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nau-dat-nhat);
}

/* ══ MÀN KHOÁ HỌC — thẻ có ảnh bìa riêng ═══════════════════════ */
.kh-the {
  position: relative;
  margin-top: 16px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--trang-nga);
  box-shadow: 0 20px 46px -26px var(--bong);
  cursor: pointer;
}
.kh-bia {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.kh-the.noi-bat .kh-bia { aspect-ratio: 3 / 2; }
.kh-bia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 28, 18, .06) 28%, rgba(20, 28, 18, .80) 100%);
}
.kh-chip {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2F3D27;
  background: rgba(242, 214, 143, .95);
}
.kh-chip.cho { color: var(--kem-sang); background: rgba(47, 61, 39, .85); }
.kh-chip.khoa { color: var(--kem-sang); background: rgba(61, 47, 35, .78); }
.kh-duoi {
  position: absolute;
  z-index: 2;
  left: 17px;
  right: 17px;
  bottom: 14px;
  color: var(--kem-sang);
}
.kh-duoi .kh-ten {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.04;
  letter-spacing: -.3px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.kh-the.noi-bat .kh-duoi .kh-ten { font-size: 30px; }
.kh-duoi .kh-tag {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .6px;
  color: rgba(250, 247, 240, .86);
}
.kh-than { padding: 15px 17px 17px; }
.kh-than p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--nau-dat);
}
.kh-vao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--vien);
  font-size: 15px;
  font-weight: 600;
}

/* ══ TRANG GIỚI THIỆU KHOÁ ═════════════════════════════════════ */
.cd-hero {
  position: relative;
  margin: calc(-1 * max(18px, env(safe-area-inset-top))) -22px 0;
  padding: max(18px, env(safe-area-inset-top)) 22px 52px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--kem-sang);
  background-size: cover;
  background-position: center;
}
.cd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 26, 18, .58) 0%, rgba(20, 26, 18, .3) 36%, rgba(18, 24, 16, .92) 100%);
}
.cd-hero > * { position: relative; z-index: 1; }
.cd-hero .backbtn { color: rgba(250, 247, 240, .9); }
.cd-hero .cd-ten {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: .99;
  letter-spacing: -.6px;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .5);
}
.cd-hero .cd-tag {
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .84);
}
.cd-loi {
  position: relative;
  margin-top: -26px;
  padding: 20px 19px;
  border: 1px solid rgba(224, 176, 72, .28);
  border-radius: 20px;
  background: var(--trang-nga);
  box-shadow: var(--bong-sau);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: #4A3B2C;
}

/* danh sách kiểu biên tập: số lớn màu vàng */
.cd-so .cd-d {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(61, 47, 35, .09);
}
.cd-so .cd-d:first-child { border-top: 0; }
.cd-so .cd-n {
  flex: 0 0 32px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: .9;
  color: rgba(224, 176, 72, .9);
  font-variant-numeric: lining-nums tabular-nums;
}
.cd-so .cd-t { font-size: 15px; line-height: 1.6; color: #4A3B2C; }

/* khối người dẫn */
.cd-thay {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding: 17px;
  border-radius: 20px;
  color: var(--kem-sang);
  background: linear-gradient(135deg, #47593A, #2C3A25);
}
.cd-thay img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(242, 214, 143, .5);
}
.cd-thay .cd-vai {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(242, 214, 143, .85);
}
.cd-thay .cd-ho {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
}
.cd-thay .cd-mo { margin-top: 2px; font-size: 13px; color: rgba(250, 247, 240, .78); }

/* ══ MÀN ĐĂNG NHẬP ═════════════════════════════════════════════ */
#s-login {
  padding-top: 0;
  background: url("img/skin/nen-dangnhap.jpg") center / cover no-repeat;
}
#s-login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 32, 20, .72) 0%, rgba(22, 30, 18, .86) 46%, rgba(18, 26, 16, .95) 100%);
  pointer-events: none;
}
#s-login > * { position: relative; z-index: 1; }
#s-login .login-top {
  flex: 0 0 auto;
  padding: 44px 26px 8px;
  background: none;   /* bỏ nền xanh phẳng cũ để ảnh nền xuyên qua */
  color: var(--kem-sang);
}
#s-login .login-top h1 {
  color: var(--kem-sang);
  text-shadow: 0 4px 44px rgba(224, 176, 72, .3);
}
#s-login .login-top p { color: rgba(250, 247, 240, .82); }
#s-login .login-bottom {
  margin-top: 18px;
  border-radius: 24px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(242, 214, 143, .24);
  border-radius: 24px;
  background: rgba(250, 247, 240, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .8);
}
#s-login .field {
  border-color: rgba(250, 247, 240, .20);
  background: rgba(18, 26, 16, .42);
}
#s-login .field input {
  color: var(--kem-sang);
  background: transparent;
}
#s-login .field input::placeholder { color: rgba(250, 247, 240, .5); }
#s-login .field svg { stroke: rgba(242, 214, 143, .75); }
#s-login .oldcust-note {
  border-color: rgba(250, 247, 240, .16);
  background: rgba(250, 247, 240, .06);
}
#s-login .oldcust-note .ocn-t { color: var(--kem-sang); }
#s-login .oldcust-note .ocn-s { color: rgba(250, 247, 240, .74); }
#s-login .terms, #s-login .bizinfo { color: rgba(250, 247, 240, .6); }
#s-login .bizinfo a { color: rgba(242, 214, 143, .85); }

/* ba dòng uy tín dưới form đăng nhập */
.dn-uytin {
  display: flex;
  margin-top: 20px;
  text-align: center;
  color: var(--kem-sang);
}
.dn-uytin div { flex: 1; }
.dn-uytin div + div { border-left: 1px solid rgba(242, 214, 143, .2); }
.dn-uytin b {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--vang-sang);
  font-variant-numeric: lining-nums tabular-nums;
}
.dn-uytin span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: .72;
}

/* ══ MÀN RỘNG: hết cảnh khung điện thoại lọt thỏm ═════════════ */
@media (min-width: 900px) {
  body {
    background:
      linear-gradient(160deg, rgba(30, 42, 26, .93), rgba(18, 26, 16, .97)),
      url("img/skin/nen-re.jpg") center / cover fixed;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(224, 176, 72, .09), transparent 62%);
    pointer-events: none;
    z-index: 0;
  }
  .app { z-index: 1; box-shadow: 0 60px 110px -44px rgba(0, 0, 0, .95), 0 0 0 1px rgba(242, 214, 143, .14); }

}

/* Cormorant mặc định dùng chữ số kiểu cổ (12 trông như I2) — ép về số thẳng */
.tc-name, .wl-amt, .vg-count, .dn-uytin b, .cd-so .cd-n {
  font-variant-numeric: lining-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hero-toi::after, .app::after { animation: none; }
}

/* Nút "Bình tĩnh" đang đè lên thanh tab (thanh cao 76px + vùng an toàn) — nâng lên cho hở */
.sos-btn { bottom: calc(90px + env(safe-area-inset-bottom)); }

/* ══ KHỐI TỐI GỌN cho đầu các màn phụ (Sản phẩm · Khoá học · Tài khoản) ══ */
.hero-gon { padding-bottom: 30px; }
.hero-toi .eyebrow { color: var(--vang-sang); }
.hero-toi .pagetitle {
  margin-top: 7px;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -.5px;
  color: var(--kem-sang);
  text-shadow: 0 4px 44px rgba(224, 176, 72, .26);
}

/* màn Khoá học: bộ chuyển tab nổi đè lên đáy khối tối */
#s-events #courseList { margin-top: 0; }
#s-events .course-tabs, #s-events .ctabs { position: relative; margin-top: -20px; }

/* màn Tài khoản: avatar + tên nằm trong khối tối */
#s-account .acc-head { margin-top: 18px; }
#s-account .acc-head .an { color: var(--kem-sang); }
#s-account .acc-head .ae { color: rgba(250, 247, 240, .66); }
#s-account .acc-status { margin-top: -26px; }

/* màn Sản phẩm: thẻ đầu tiên nổi đè lên mép khối tối */
#s-product #prodList { margin-top: -18px; }

/* ══ MÀN SẢN PHẨM — bento + ảnh thật thay ô màu phẳng ══════════ */
.prod-grp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--nau-go);
}
.prod-grp::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 176, 72, .45), transparent);
}

.sp-bento { display: grid; grid-template-columns: 1.32fr 1fr; gap: 12px; }
.sp-o {
  border-radius: 20px;
  overflow: hidden;
  background: var(--trang-nga);
  box-shadow: 0 18px 42px -26px var(--bong);
  cursor: pointer;
}
.sp-anh { display: block; width: 100%; height: 112px; object-fit: cover; }
.sp-noi { padding: 13px 14px 15px; }
.sp-o h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.12;
  color: var(--xanh-reu);
}
.sp-o p { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--nau-dat-nhat); }

.sp-hang {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 11px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: var(--trang-nga);
  box-shadow: 0 18px 42px -28px var(--bong);
  cursor: pointer;
}
.sp-vuong { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; flex: 0 0 62px; }
.sp-hang .pt { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--xanh-reu); }
.sp-hang .pd { margin-top: 2px; font-size: 13px; color: var(--nau-dat-nhat); }
.sp-mui { margin-left: auto; color: var(--nau-go); font-size: 20px; }

.sp-sau {
  position: relative;
  margin-top: 12px;
  padding: 22px 20px 20px;
  border-radius: 22px;
  overflow: hidden;
  color: var(--kem-sang);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: var(--bong-sau);
}
.sp-sau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 28, 18, .93) 42%, rgba(20, 28, 18, .48));
}
.sp-sau > * { position: relative; z-index: 1; }
.sp-sau h4 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.08; }
.sp-sau p { margin-top: 6px; font-size: 13.5px; color: rgba(250, 247, 240, .82); }
.sp-di { display: inline-block; margin-top: 13px; font-size: 14.5px; font-weight: 600; color: var(--vang-sang); }

/* ══ THẺ HẠT GIỐNG — chữ T · Q · P khổng lồ chìm dưới nền ══════ */
.tqp-khoi { position: relative; overflow: hidden; }
.tqp-khoi::before {
  content: attr(data-chu);
  position: absolute;
  right: -6px;
  top: -38px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 150px;
  line-height: 1;
  color: rgba(90, 112, 68, .07);
  pointer-events: none;
}
.tqp-khoi.q::before { color: rgba(224, 176, 72, .11); }
.tqp-khoi.p::before { color: rgba(235, 160, 117, .11); }
.tqp-khoi > * { position: relative; }
.tqp-khoi.t { border-left: 3px solid var(--xanh-reu-nhat); }
.tqp-khoi.q { border-left: 3px solid var(--vang); }
.tqp-khoi.p { border-left: 3px solid var(--dao); }

/* ══ TÀI KHOẢN — ví thành thẻ hội viên ═════════════════════════ */
#s-account .acc-status {
  position: relative;
  display: block;          /* gốc là grid 2 cột -> ép về một cột trong thẻ ví */
  margin: -22px 0 0;
  padding: 20px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(242, 214, 143, .34);
  background: linear-gradient(135deg, #5C7248, #35452B 72%);
  box-shadow: 0 26px 50px -22px rgba(20, 28, 16, .75);
}
#s-account .acc-status::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -56px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(242, 214, 143, .2);
}
#s-account .acc-tile {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#s-account .acc-tile + .acc-tile {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 214, 143, .22);
}
#s-account .acc-tile-lbl {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(242, 214, 143, .85);
}
#s-account .acc-tile .acc-tile-val,
#s-account .acc-tile .av { color: var(--vang-sang); }
#s-account .acc-tile * { color: inherit; }
#s-account .acc-tile .acc-tile-sub { color: rgba(250, 247, 240, .7); }

/* nhóm menu: ô icon có màu, hết list xám đều tăm tắp */
#s-account .menu-item .mt { font-weight: 600; }
#s-account .menu-item svg {
  padding: 8px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(125, 160, 99, .15);
  box-sizing: content-box;
}

/* ══ HẠT GIỐNG — thẻ rút thành lá bài xếp chồng ════════════════ */
#s-garden .oracle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 230px;
  margin: 24px auto 10px;
  aspect-ratio: 3 / 3.9;
  padding: 24px 22px 34px;
  border: 0;
  border-radius: 20px;
  text-align: center;
  color: var(--kem-sang);
  background:
    linear-gradient(165deg, rgba(46, 62, 38, .93), rgba(26, 36, 22, .97)),
    url("img/skin/nen-re.jpg") center / cover;
  /* hai lá phía sau ló ra hai bên + bóng đổ sâu, gợi cảm giác một bộ bài */
  box-shadow:
    -11px 7px 0 -3px #35452B,
    11px 5px 0 -4px #2A3722,
    0 34px 60px -26px rgba(0, 0, 0, .7);
}
/* viền vàng kép in bên trong lá bài */
#s-garden .oracle-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(242, 214, 143, .42);
  border-radius: 12px;
  pointer-events: none;
}
#s-garden .oracle-card::after {
  content: "ĐẤT VÀ CÂY · VFC";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 3px;
  color: rgba(242, 214, 143, .72);
}
#s-garden .oracle-card > * { position: relative; z-index: 1; text-align: center !important; }
#s-garden .oracle-orb { font-size: 42px; }
#s-garden .oc-t {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--vang-sang);
}
#s-garden .oc-s {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(250, 247, 240, .88);
}
/* viền vàng kép in bên trong lá bài */
#s-garden .oracle-card .vien-bai {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(242, 214, 143, .4);
  border-radius: 12px;
  pointer-events: none;
}

/* ══ TRANG KHOÁ — thanh hành động dính đáy ═════════════════════ */
.cd-thanh {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px -22px 0;
  padding: 13px 22px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--vien);
  background: rgba(251, 249, 243, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cd-thanh .cd-tt span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nau-dat-nhat);
}
.cd-thanh .cd-tt b {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--xanh-reu);
}

/* ══ HAI MÀN HẠT GIỐNG ═════════════════════════════════════════ */

/* Màn Hạt giống: ba nút chọn bộ nằm trong khối tối */
.hero-bo { padding-bottom: 26px; }
.hero-bo .tc-title {
  margin: 12px 0 0;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -.5px;
  color: var(--kem-sang);
  text-shadow: 0 4px 46px rgba(224, 176, 72, .28);
}
.hero-bo .tc-title em { font-style: italic; color: var(--vang-sang); }
.hero-bo .deck-switch {
  margin-top: 20px;
  background: none;
  padding: 0;
  gap: 9px;
  box-shadow: none;
  border: 0;
}
.hero-bo .ds-opt {
  flex: 1;
  padding: 10px 6px;
  border: 1px solid rgba(242, 214, 143, .32);
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(250, 247, 240, .74);
}
.hero-bo .ds-opt.on {
  color: #2F3D27;
  border-color: transparent;
  background: linear-gradient(135deg, #F2D68F, #D3A648);
}
/* tiêu đề riêng của từng bộ đã lên khối tối -> ẩn bản trùng bên dưới */
#s-garden .mag-head { display: none; }
#s-garden .garden-hero { margin-top: 16px; }

/* Màn thẻ hạt giống: tên hạt trong khối tối, thanh chọn tuổi nổi đè lên */
#s-seed .hero-toi .backbtn { color: rgba(250, 247, 240, .88); }
#s-seed .hero-toi .seed-top { margin-top: 18px; }
#s-seed .hero-toi .seed-name h2 { color: var(--kem-sang); }
#s-seed .hero-toi .seed-name .en { color: var(--vang-sang); }
#s-seed .hero-toi .seed-icon {
  background: rgba(242, 214, 143, .14);
  border: 1px solid rgba(242, 214, 143, .3);
}
#s-seed .hero-toi .seed-audio { margin-top: 18px; }
#s-seed .hero-toi .seed-audio button,
#s-seed .hero-toi .seed-audio .sa-btn {
  border: 1px solid rgba(242, 214, 143, .38);
  background: none;
  color: var(--vang-sang);
}
#s-seed .age-tabs {
  position: relative;
  margin: -20px 0 0;
  padding: 6px;
  border-radius: 999px;
  background: var(--trang-nga);
  box-shadow: var(--bong-sau);
}

/* ══ LÁ THẺ HẠT GIỐNG — bản để CHỤP MÀN HÌNH chia sẻ ═══════════
   Thẻ chiếm gần hết màn; nút phụ nhỏ và mờ ở mép để ảnh chụp vẫn sạch. */
#theOverlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px;
  background: rgba(18, 26, 16, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#theOverlay.mo { display: flex; }

.the-bai {
  position: relative;
  width: min(340px, 88vw);
  max-height: 76vh;
  padding: 30px 26px 24px;
  border-radius: 26px;
  overflow: hidden;
  text-align: center;
  color: var(--kem-sang);
  background:
    linear-gradient(168deg, var(--the-phu, rgba(48, 64, 40, .9)), rgba(16, 22, 14, .95)),
    var(--the-nen, url("img/skin/nen-re.jpg")) center / cover;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);
  animation: theHienRa .45s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes theHienRa {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* viền vàng kép in bên trong */
.the-bai::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid var(--the-vien, rgba(242, 214, 143, .38));
  border-radius: 17px;
  pointer-events: none;
}
.the-bai::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid var(--the-vien, rgba(242, 214, 143, .14));
  opacity: .4;
  border-radius: 13px;
  pointer-events: none;
}
.the-bai > * { position: relative; z-index: 1; }

.the-dong {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  color: rgba(250, 247, 240, .5);
  background: rgba(250, 247, 240, .08);
  cursor: pointer;
}
.the-nhan {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(242, 214, 143, .8);
}
.the-qua { margin: 16px auto 6px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .45)); }
.the-qua svg { width: 74px; height: 74px; }
.the-ten {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -.5px;
  color: var(--kem-sang);
  text-shadow: 0 4px 40px rgba(224, 176, 72, .35);
}
.the-en {
  margin-top: 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--vang-sang);
}
.the-gach {
  width: 44px;
  height: 1px;
  margin: 15px auto;
  background: rgba(242, 214, 143, .55);
}
.the-loi {
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(250, 247, 240, .93);
}
.the-viec {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(242, 214, 143, .10);
  text-align: left;
}
.the-viec span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(242, 214, 143, .85);
}
.the-viec p {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(250, 247, 240, .92);
}
.the-chan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 214, 143, .2);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: rgba(250, 247, 240, .6);
}
.the-chan img { width: 20px; opacity: .9; }

.the-tiep {
  padding: 11px 20px;
  border: 1px solid rgba(242, 214, 143, .3);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 214, 143, .82);
  background: none;
  cursor: pointer;
}

/* ── THÔNG ĐIỆP VŨ TRỤ: cùng một lá thẻ, bỏ nút "Rút lại" ────── */
#oracleOverlay { padding: 22px; background: rgba(18, 26, 16, .82); }
#oracleOverlay .oracle-box {
  position: relative;
  width: min(340px, 88vw);
  padding: 30px 26px 24px;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  text-align: center;
  color: var(--kem-sang);
  background:
    linear-gradient(165deg, rgba(48, 64, 40, .94), rgba(24, 34, 20, .98)),
    url("img/skin/nen-re.jpg") center / cover;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);
}
#oracleOverlay .oracle-box::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(242, 214, 143, .38);
  border-radius: 17px;
  pointer-events: none;
}
#oracleOverlay .oracle-box > * { position: relative; z-index: 1; }
#oracleOverlay .o-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(242, 214, 143, .8);
}
#oracleOverlay .o-icon { margin: 16px auto 6px; }
#oracleOverlay .o-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.04;
  color: var(--kem-sang);
  text-shadow: 0 4px 40px rgba(224, 176, 72, .35);
}
#oracleOverlay .o-msg {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(250, 247, 240, .93);
}
#oracleOverlay .o-act {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(242, 214, 143, .10);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
  color: rgba(250, 247, 240, .92);
}
/* nút "Rút lại" bỏ đi: muốn thẻ khác thì đóng ra rồi rút lần nữa */
#oracleOverlay .oracle-box .big-btn { display: none; }
#oracleOverlay .oracle-box .ghost-btn {
  margin-top: 20px;
  border-color: rgba(242, 214, 143, .3);
  color: rgba(242, 214, 143, .82);
  background: none;
}

/* nút Đóng của thẻ vũ trụ: thu về dấu ✕ nhỏ ở góc, để ảnh chụp sạch */
#oracleOverlay .oracle-box .ghost-btn {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0;
  background: rgba(250, 247, 240, .08);
}
#oracleOverlay .oracle-box .ghost-btn::before {
  content: "✕";
  font-size: 14px;
  color: rgba(250, 247, 240, .5);
}
#oracleOverlay .oracle-box .ghost-btn svg { display: none; }
#oracleOverlay .o-eyebrow { padding: 0 34px; }

/* ── mặt sau lá bài: hoạ tiết mầm trong vòng tròn, không dùng emoji ── */
#s-garden .oracle-orb {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(242, 214, 143, .16), transparent 66%);
  box-shadow: none;
  animation: none;
}
#s-garden .oracle-orb svg { width: 100%; height: 100%; }

/* ══ THẺ BUNG LÊN: to hơn, chiếm ~80% màn để mắt chỉ còn nhìn thông điệp ══ */
.the-bai,
#oracleOverlay .oracle-box {
  width: min(420px, 92vw);
  min-height: min(680px, 78vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 30px 32px;
  border-radius: 30px;
}
.the-bai::before,
#oracleOverlay .oracle-box::before { inset: 14px; border-radius: 20px; }
.the-bai::after { inset: 20px; border-radius: 15px; }

.the-nhan, #oracleOverlay .o-eyebrow {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  font-size: 11px;
  letter-spacing: 3px;
}
.the-qua, #oracleOverlay .o-icon { margin: 0 auto 10px; }
.the-qua svg, #oracleOverlay .o-icon svg { width: 104px; height: 104px; }
.the-ten, #oracleOverlay .o-name { font-size: 54px; line-height: 1.02; }
.the-en { margin-top: 4px; font-size: 20px; }
.the-gach { width: 54px; margin: 20px auto; }
.the-loi, #oracleOverlay .o-msg { font-size: 22px; line-height: 1.52; }
.the-viec, #oracleOverlay .o-act { margin-top: 24px; padding: 16px 18px; border-radius: 16px; }
.the-viec p, #oracleOverlay .o-act { font-size: 16px; line-height: 1.6; }
.the-chan {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  margin: 0;
}
#oracleOverlay .the-chan { position: static; margin-top: 26px; }
.the-tiep { margin-top: 4px; }

/* màn hẹp: thu gọn cỡ chữ cho vừa, vẫn giữ thẻ lớn */
@media (max-height: 720px) {
  .the-bai, #oracleOverlay .oracle-box { min-height: 84vh; padding: 32px 24px 26px; }
  .the-ten, #oracleOverlay .o-name { font-size: 44px; }
  .the-loi, #oracleOverlay .o-msg { font-size: 19px; }
  .the-qua svg, #oracleOverlay .o-icon svg { width: 84px; height: 84px; }
}

/* tiêu đề bộ "Cho mình" đã lên khối tối -> ẩn bản trùng bên dưới (giống bộ Cho con) */
#s-garden .ic-head { display: none; }

/* ══ BỘ CHO MÌNH: lá bài úp giống hệt bộ CHO CON ═══════════════
   Trước đây hai bộ dùng hai kiểu khác nhau chỉ vì viết bởi hai mã
   khác nhau — không có lý do thiết kế nào. Nay gộp về một kiểu. */
#s-garden .ic-draw { padding: 0; }
#s-garden .ic-facedown {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 230px;
  margin: 24px auto 18px;
  aspect-ratio: 3 / 3.9;
  padding: 24px 22px 34px;
  border: 0;
  border-radius: 20px;
  text-align: center;
  color: var(--kem-sang);
  background:
    linear-gradient(165deg, rgba(46, 62, 38, .93), rgba(26, 36, 22, .97)),
    url("img/skin/nen-re.jpg") center / cover;
  box-shadow:
    -11px 7px 0 -3px #35452B,
    11px 5px 0 -4px #2A3722,
    0 34px 60px -26px rgba(0, 0, 0, .7);
}
#s-garden .ic-facedown::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(242, 214, 143, .42);
  border-radius: 12px;
  pointer-events: none;
}
#s-garden .ic-facedown::after {
  content: "ĐẤT VÀ CÂY · VFC";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 3px;
  color: rgba(242, 214, 143, .72);
}
#s-garden .ic-facedown .fd-seed {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(242, 214, 143, .16), transparent 66%);
  opacity: 1;
}
#s-garden .ic-facedown .fd-q {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
  padding: 0 8px;
  color: rgba(250, 247, 240, .88) !important;
}
#s-garden .ic-draw-btn {
  display: block;
  width: calc(100% - 36px);
  margin: 0 18px;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: #2F3D27;
  background: linear-gradient(135deg, #F2D68F, #D3A648);
  box-shadow: 0 14px 28px -14px rgba(184, 134, 47, .95);
}

/* mặt lá úp bộ Cho mình: dùng đúng hoạ tiết mầm như bộ Cho con */
#s-garden .ic-facedown .fd-seed svg { display: none; }
#s-garden .ic-facedown .fd-seed {
  background:
    radial-gradient(circle at 50% 45%, rgba(242, 214, 143, .16), transparent 66%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'><circle cx='32' cy='32' r='27' stroke='rgba(242,214,143,.55)' stroke-width='1'/><circle cx='32' cy='32' r='21' stroke='rgba(242,214,143,.28)' stroke-width='1'/><path d='M32 44V28' stroke='%23F2D68F' stroke-width='2.2' stroke-linecap='round'/><path d='M32 30c0-6 4.6-9.4 11-9.4 0 6.4-4 10-11 9.4z' fill='%23F2D68F' opacity='.92'/><path d='M32 33c0-5.4-4.2-8.6-10-8.6 0 5.8 3.6 9.2 10 8.6z' fill='%23E0B048' opacity='.85'/><circle cx='16' cy='18' r='1.5' fill='rgba(242,214,143,.75)'/><circle cx='48' cy='46' r='1.2' fill='rgba(242,214,143,.6)'/><circle cx='50' cy='16' r='1' fill='rgba(242,214,143,.5)'/></svg>") center / 100% 100% no-repeat;
}

/* ══ HAI NÚT NỔI XẾP DỌC ═══════════════════════════════════════
   Trên: Thông điệp (rút thẻ). Dưới: Bình tĩnh (màn dẫn thở).
   Nút thở là phao cứu sinh lúc cha mẹ sắp nổi nóng — không bỏ. */
.msg-btn {
  position: absolute;
  right: 16px;
  bottom: calc(142px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border: 1px solid rgba(242, 214, 143, .34);
  border-radius: 30px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: #2F3D27;
  background: linear-gradient(135deg, #F2D68F, #D3A648);
  box-shadow: 0 10px 24px -8px rgba(184, 134, 47, .8);
  cursor: pointer;
}
.msg-btn svg { width: 17px; height: 17px; }
.msg-btn.hidden { display: none; }
.msg-btn:active { transform: scale(.97); }

/* thẻ hai mặt mở từ nút Thông điệp: nền tối cho giống lá thẻ */
#icCardOverlay { background: rgba(18, 26, 16, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#icCardOverlay .ic-ov-close {
  border: 1px solid rgba(242, 214, 143, .3);
  color: rgba(242, 214, 143, .85);
  background: rgba(250, 247, 240, .06);
}

/* nút "Rút thẻ khác" trong hàng hành động của thẻ hôm nay */
#s-garden .ic-actions { flex-wrap: wrap; }

/* ══ CÂU TIẾNG ANH cho cha mẹ Việt kiều đọc cùng con ═══════════
   Đặt ngay dưới câu tiếng Việt, nhỏ và nhạt hơn — đọc được nhưng không lấn. */
.tc-whisper-en {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--nau-go);
  opacity: .9;
}
#s-today .tc-whisper-en { text-align: left; }

.sd-desc-en {
  margin-top: 5px;
  font-family: var(--serif);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(242, 214, 143, .8);
}

/* trên lá thẻ: câu tiếng Anh dưới câu tiếng Việt */
.the-loi-en {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(242, 214, 143, .82);
}
@media (max-height: 720px) { .the-loi-en { font-size: 15px; margin-top: 9px; } }

/* chữ trên thẻ đổi theo diện mạo của nhóm */
.the-bai .the-nhan { color: var(--the-vien, rgba(242, 214, 143, .8)); }
.the-bai .the-ten { color: var(--the-chu, #FAF7F0); }
.the-bai .the-en { color: var(--the-vien, var(--vang-sang)); }
.the-bai .the-loi-en { color: var(--the-chu, #FAF7F0); opacity: .72; }
.the-bai .the-gach { background: var(--the-vien, rgba(242, 214, 143, .55)); }
.the-bai .the-viec span { color: var(--the-vien, rgba(242, 214, 143, .85)); }
.the-bai .the-chan { border-top-color: var(--the-vien, rgba(242, 214, 143, .2)); }

/* nút mở lại lá thẻ ở trang chi tiết hạt giống — để chụp màn hình chia sẻ */
.sd-xemthe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid rgba(242, 214, 143, .4);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vang-sang);
  background: rgba(242, 214, 143, .08);
  cursor: pointer;
}
.sd-xemthe svg { width: 15px; height: 15px; }
.sd-xemthe:active { transform: scale(.97); }

/* ══ TRANG CHỦ GỌN LẠI (14/08, anh Phúc: "nhiều chữ, rối mắt, không có điểm nhấn")
   31 khối chữ -> ~10. Nguyên tắc: trang chủ chỉ nói MỘT việc.
   Câu trích, câu tiếng Anh và nhạc dời vào lá thẻ + trang chi tiết. */

/* câu thì thầm nay đứng một mình làm tiêu đề */
.hero-toi .tc-title.greet-whisper {
  display: block;
  max-width: 330px;
  margin: 18px 0 0;
  padding-left: 0;
  border-left: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.2px;
  color: var(--kem-sang);
  text-shadow: 0 4px 50px rgba(224, 176, 72, .28);
}

/* việc hôm nay: cho nó thở, đứng một mình, không đường kẻ vây quanh */
#s-today .today-card { padding: 26px 22px 24px; }
#s-today .tcd-task p { margin-top: 14px; font-size: 32px; line-height: 1.2; }
#s-today .hat-phu { margin-top: 22px; padding-top: 16px; }

/* "vì sao" gập lại — bấm mới mở */
.why-mo {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: 1px dashed rgba(149, 110, 66, .3);
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--nau-go);
  background: none;
  cursor: pointer;
}
#s-today .why { margin-top: 12px; }
#s-today .why .why-h { display: none; }   /* nhãn đã nằm trên nút gập */

/* nút chính tách hẳn ra cho vững */
#s-today .today-card #doneBtn { margin-top: 22px; }

/* ══ HAI NÚT NỔI THU THÀNH VÒNG TRÒN — hết đè lên nội dung ══ */
.msg-btn, .sos-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  justify-content: center;
}
.msg-btn .nn-chu, .sos-btn .nn-chu { display: none; }
.msg-btn svg, .sos-btn svg { width: 20px; height: 20px; }
.msg-btn { bottom: calc(148px + env(safe-area-inset-bottom)); right: 18px; }
.sos-btn { bottom: calc(92px + env(safe-area-inset-bottom)); right: 18px; }

/* ══ TRANG CHỦ MANG SẮC CỦA HẠT GIỐNG HÔM NAY ══════════════════
   Mỗi ngày một hạt thuộc nhóm khác -> cả màn đổi ảnh nền, quầng sáng
   và màu nút theo nhóm đó. Mở app mỗi sáng thấy một khung cảnh khác. */
#s-today.sac-ngay .hero-toi {
  padding-bottom: 92px;
  background:
    linear-gradient(178deg, var(--ngay-phu) 0%, rgba(16, 22, 14, .93) 100%),
    var(--ngay-nen, url("img/skin/nen-re.jpg")) center 28% / cover;
}
#s-today.sac-ngay .hero-toi::after {
  height: 300px;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--ngay-nhan) 34%, transparent), transparent 68%);
}
#s-today.sac-ngay .hero-toi .masthead .mh-brand,
#s-today.sac-ngay .hero-toi .tc-title.greet-whisper { color: #FBF8F1; }

/* QUẢ TÁO thành nhân vật chính: to, có quầng, nhô lên khỏi mép thẻ.
   Dùng flex-order để đưa lên đầu thay vì position:absolute — absolute bị
   thẻ cắt cụt (thẻ có overflow:hidden) và chữ đè lên nhau. */
#s-today.sac-ngay .today-card {
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin-top: -34px;
  padding-top: 0;
}
#s-today.sac-ngay .today-card::before { border-radius: var(--r-thecard); }
#s-today.sac-ngay .hat-phu {
  order: -1;
  flex-direction: column;
  gap: 0;
  margin: -52px 0 18px;
  padding: 0;
  border: 0;
  text-align: center;
}
#s-today.sac-ngay .hat-phu .tcd-applewrap {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  margin: 0 auto;
}
#s-today.sac-ngay .hat-phu .tcd-applewrap::before {
  inset: -14px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ngay-nhan) 46%, transparent), transparent 66%);
}
#s-today.sac-ngay .hat-phu .tc-apple svg { width: 88px; height: 88px; }
#s-today.sac-ngay .hat-phu > div { margin-top: 8px; }
#s-today.sac-ngay .hat-phu .tc-name { font-size: 22px; }
#s-today.sac-ngay .hat-phu .tc-en { font-size: 14px; }

/* nhãn + nút mang sắc của ngày */
#s-today.sac-ngay .tcd-pill { color: color-mix(in srgb, var(--ngay-nut) 72%, #6B5744); }
#s-today.sac-ngay .today-card {
  border-color: color-mix(in srgb, var(--ngay-nut) 44%, transparent);
}
#s-today.sac-ngay #doneBtn {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ngay-nut) 88%, #fff 12%),
    color-mix(in srgb, var(--ngay-nut) 70%, #3D2F23 30%));
  box-shadow: 0 15px 30px -14px color-mix(in srgb, var(--ngay-nut) 80%, transparent);
}
#s-today.sac-ngay .tc-open { border-color: color-mix(in srgb, var(--ngay-nut) 55%, transparent); }
#s-today.sac-ngay .tc-open,
#s-today.sac-ngay .why-mo { color: color-mix(in srgb, var(--ngay-nut) 62%, #6B5744); }
#s-today.sac-ngay .why-mo { border-color: color-mix(in srgb, var(--ngay-nut) 40%, transparent); }

/* trình duyệt cũ không có color-mix thì vẫn chạy được bằng màu nền cũ */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #s-today.sac-ngay #doneBtn { background: linear-gradient(135deg, #D9B05C, #B8862F); }
}

/* ══ ĐÓN NGƯỜI MỚI — hỏi đúng một câu: con mấy tuổi ═══════════ */
.ht-lop {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  color: var(--kem-sang);
  background:
    linear-gradient(172deg, rgba(30, 42, 26, .95), rgba(14, 20, 12, .98)),
    url("img/skin/nen-re.jpg") center / cover;
}
.ht-hop {
  width: min(360px, 100%);
  text-align: center;
  animation: htHienRa .5s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes htHienRa {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ht-nhan {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--vang-sang);
}
.ht-nhan::before, .ht-nhan::after {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
  opacity: .55;
}
.ht-hoi {
  margin-top: 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -.4px;
  color: var(--kem-sang);
  text-shadow: 0 4px 46px rgba(224, 176, 72, .3);
}
.ht-phu {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(250, 247, 240, .7);
}
.ht-nut { display: flex; flex-direction: column; gap: 11px; margin-top: 28px; }
.ht-nut button {
  padding: 16px;
  border: 1px solid rgba(242, 214, 143, .34);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--kem-sang);
  background: rgba(250, 247, 240, .07);
  cursor: pointer;
}
.ht-nut button:active { transform: scale(.98); }
.ht-bo {
  margin-top: 20px;
  padding: 8px;
  border: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(250, 247, 240, .5);
  background: none;
  cursor: pointer;
}

/* nhãn tuổi con trên dòng hạt giống ở trang chủ */
.td-nhan-tuoi {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--nau-dat-nhat);
}
#s-today.sac-ngay .td-nhan-tuoi { opacity: .85; }

/* nhãn tuổi con ở trang chủ = NÚT đổi (nhà nhiều con, con lớn lên thì đổi) */
button.td-nhan-tuoi {
  /* Xuống dòng riêng — để inline thì nó dính sát chữ tiếng Anh của tên hạt */
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  padding: 3px 11px;
  border: 1px solid rgba(149, 110, 66, .28);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--nau-dat-nhat);
  background: rgba(149, 110, 66, .07);
  cursor: pointer;
}
button.td-nhan-tuoi:active { transform: scale(.97); }

/* tuổi đang dùng được tô đậm khi mở lại hộp chọn */
.ht-nut button.dang-dung {
  color: #2F3D27;
  border-color: transparent;
  background: linear-gradient(135deg, #F2D68F, #D3A648);
}

/* dòng phụ trong menu Tài khoản: đang chọn tuổi nào */
.mt-phu {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nau-go);
}

/* ══ MÀN TÀI KHOẢN — dựng theo bản xem thử anh Phúc đã duyệt ══════ */
.acc-ngay { margin-top: 12px; }

/* thẻ ví: số hạt to, hai cột nhỏ ở chân, nút mở ví bên phải */
#s-account .acc-tile-seed .acc-tile-val,
#s-account .acc-tile-seed #accSeedVal {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--vang-sang);
  font-variant-numeric: lining-nums;
}
#s-account .acc-tile + .acc-tile { border-top: 0; padding-top: 0; margin-top: 18px; }
#s-account .acc-tile-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
}
#s-account .acc-tile-lbl svg { width: 15px; height: 15px; opacity: .75; }

.vi-chan {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(242, 214, 143, .22);
}
.vi-hang span {
  display: block;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(242, 214, 143, .8);
}
.vi-hang b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--kem-sang);
}
.vi-mo {
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 214, 143, .9);
  background: none;
  cursor: pointer;
}

/* nhóm menu có gạch dẫn như bản nháp */
#s-account .menu-group, #s-account .mg-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
#s-account .mg-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 176, 72, .4), transparent);
}

/* ══════════════════════════════════════════════════════════════
   HƯỚNG B — "MỘT CÂU MỖI TỐI" (anh Phúc chọn 15/08)
   Màn đầu tiên chỉ một câu hỏi giữa nền tối. Không thẻ, không viền.
   ══════════════════════════════════════════════════════════════ */
#s-today.mot-cau .hero-toi {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
  padding: max(18px, env(safe-area-inset-top)) 24px 26px;
}
#s-today.mot-cau .hero-toi::after { display: none; }

/* lời thì thầm lùi lại thành dòng nhỏ trên cùng — câu hỏi mới là chính */
#s-today.mot-cau .today-head { margin-top: 0; }
#s-today.mot-cau .tc-title.greet-whisper {
  max-width: none;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(250, 247, 240, .6);
  text-shadow: none;
  text-align: center;
}

/* THẺ VIỆC nay trong suốt, nằm giữa màn */
#s-today.mot-cau .today-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  overflow: visible;
}
#s-today.mot-cau .today-card::before { display: none; }

/* logo app ở giữa, thay quả táo nhỏ */
#s-today.mot-cau .hat-phu {
  order: -1;
  flex-direction: column;
  gap: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
#s-today.mot-cau .hat-phu .tcd-applewrap {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  background: url("logo-datvacay.png?v=1") center / contain no-repeat;
}
#s-today.mot-cau .hat-phu .tcd-applewrap::before {
  inset: -20px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ngay-nhan, #F2D68F) 34%, transparent), transparent 66%);
}
#s-today.mot-cau .hat-phu .tc-apple { display: none; }   /* quả táo nhường chỗ cho logo */
/* chỉ ẩn khối tên hạt — KHÔNG ẩn ô chứa logo (nó cũng là div con) */
#s-today.mot-cau .hat-phu > div:not(.tcd-applewrap) { display: none; }

/* nhãn + CÂU HỎI: nhân vật chính của cả màn */
#s-today.mot-cau .tcd-task { order: 0; margin: 0; }
#s-today.mot-cau .tcd-pill {
  color: color-mix(in srgb, var(--ngay-nhan, #F2D68F) 88%, transparent);
  letter-spacing: 3px;
}
#s-today.mot-cau .tcd-task p {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -.4px;
  color: #FBF8F1;
  text-shadow: 0 4px 50px color-mix(in srgb, var(--ngay-nhan, #F2D68F) 22%, transparent);
}

/* tên hạt + tuổi con: một dòng nhỏ dưới câu hỏi */
#s-today.mot-cau .hat-phu-duoi {
  order: 1;
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: color-mix(in srgb, var(--ngay-nhan, #F2D68F) 80%, transparent);
}
#s-today.mot-cau button.td-nhan-tuoi {
  margin: 12px auto 0;
  border-color: rgba(250, 247, 240, .22);
  color: rgba(250, 247, 240, .66);
  background: rgba(250, 247, 240, .06);
}

/* nút chính + phần đáy */
#s-today.mot-cau .why-mo { order: 2; margin-top: 22px; }
#s-today.mot-cau #doneBtn {
  order: 3;
  margin-top: 18px;
  color: #17301F;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ngay-nut, #A9BE7E) 92%, #fff 30%),
    color-mix(in srgb, var(--ngay-nut, #A9BE7E) 88%, transparent));
  box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--ngay-nut, #A9BE7E) 70%, transparent);
}
#s-today.mot-cau .tc-open,
#s-today.mot-cau .tc-hint {
  order: 4;
  margin-top: 12px;
  border-color: rgba(250, 247, 240, .2);
  color: rgba(250, 247, 240, .7);
  background: none;
}
#s-today.mot-cau .why {
  order: 5;
  margin-top: 14px;
  text-align: left;
}
#s-today.mot-cau .why .grow { background: rgba(250, 247, 240, .07); }
#s-today.mot-cau .why .gtx,
#s-today.mot-cau .why .gtx b { color: rgba(250, 247, 240, .88); }

#s-today.mot-cau .duoc-dung {
  margin: 18px 10px 0;
  color: rgba(250, 247, 240, .58);
}

/* CHUỖI NGÀY — 7 chấm, nhẹ, không ép */
.chuoi-ngay { margin-top: 20px; text-align: center; }
.cn-cham { display: flex; justify-content: center; gap: 8px; }
.cn-cham i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250, 247, 240, .2);
}
.cn-cham i.xong { background: color-mix(in srgb, var(--ngay-nhan, #F2D68F) 88%, transparent); }
.cn-chu {
  margin-top: 11px;
  font-size: 13px;
  color: rgba(250, 247, 240, .6);
}

/* phần dưới (vườn, cửa rẽ, khám phá thêm) trở lại nền kem như cũ */
#s-today.mot-cau .hai-cua { margin-top: 22px; }

/* ══ MÀN ĐẦU CHỈ MỘT CÂU — phần phụ đẩy xuống dưới ═══════════════
   Đo được 13 khối chữ chen trong màn đầu, câu hỏi chỉ chiếm 10% màn.
   Nay màn đầu còn 6 khối, câu hỏi là thứ duy nhất đòi được đọc. */
#s-today.mot-cau .today-card { gap: 0; }

/* câu hỏi to hẳn lên và có chỗ thở */
#s-today.mot-cau .tcd-task p {
  margin-top: 22px;
  font-size: 40px;
  line-height: 1.16;
}
#s-today.mot-cau .hat-phu-duoi { margin-top: 26px; }
#s-today.mot-cau #doneBtn { margin-top: 34px; }
#s-today.mot-cau .chuoi-ngay { margin-top: 26px; }

/* Khối phụ nằm DƯỚI màn đầu, trên nền KEM.
   ⚠️ Phải viết đủ `#s-today.mot-cau .duoi-man ...` — quy tắc chữ màu kem ở trên
   có độ ưu tiên cao hơn, nếu viết thiếu thì chữ kem nằm trên nền kem, mất chữ.
   Đã vấp một lần 15/08. */
#s-today.mot-cau .duoi-man { padding: 26px 0 4px; }
#s-today.mot-cau .duoi-man .why-mo {
  margin-top: 0;
  border-color: rgba(149, 110, 66, .34);
  color: var(--nau-go);
}
#s-today.mot-cau .duoi-man .tc-open,
#s-today.mot-cau .duoi-man .tc-hint {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-color: rgba(149, 110, 66, .34);
  color: var(--nau-go);
  background: var(--trang-nga);
}
#s-today.mot-cau .duoi-man .greet-whisper {
  display: block;
  max-width: none;
  margin: 22px 8px 0;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--nau-dat-nhat);
  text-shadow: none;
}
#s-today.mot-cau .duoi-man .duoc-dung {
  margin: 18px 14px 0;
  color: var(--nau-dat-nhat);
}
#s-today.mot-cau .duoi-man .why { margin-top: 14px; text-align: left; }
#s-today.mot-cau .duoi-man .why .grow { background: rgba(125, 160, 99, .12); }
#s-today.mot-cau .duoi-man .why .gtx,
#s-today.mot-cau .duoi-man .why .gtx b { color: var(--nau-dat); }
#s-today.mot-cau .duoi-man .why .why-h { color: var(--nau-go); }

/* Chữ phần dưới phải ĐỦ ĐẬM để cha mẹ ngoài 40 đọc được (đo tương phản ≥4.5).
   Màu nâu vàng --nau-go trên nền trắng ngà chỉ đạt 3.3 — không đủ. */
#s-today.mot-cau .duoi-man .why-mo,
#s-today.mot-cau .duoi-man .tc-open,
#s-today.mot-cau .duoi-man .tc-hint { color: #6B5744; }
#s-today.mot-cau .duoi-man .why .gtx { color: #3D2F23; }
#s-today.mot-cau .duoi-man .why .gtx b { color: #4A3A24; }
#s-today.mot-cau .duoi-man .why .why-h { color: #6B5744; }

/* Hai hàng "Con được / Mình được": nền màu làm tụt tương phản xuống 4.3.
   Làm nền nhạt đi và chữ đậm thêm cho đạt ngưỡng đọc được. */
#s-today.mot-cau .duoi-man .why .grow.con { background: rgba(125, 160, 99, .09); }
#s-today.mot-cau .duoi-man .why .grow.minh { background: rgba(235, 160, 117, .09); }
#s-today.mot-cau .duoi-man .why .gtx { color: #33261A; }
#s-today.mot-cau .duoi-man .why .gtx b { color: #3F2E18; }

/* ══ CANH GIỮA phần dưới màn Hôm Nay ══════════════════════════
   Cả màn đầu đã canh giữa; phần dưới còn canh trái nên nhìn lệch nhịp. */
#s-today.mot-cau .duoi-man .why,
#s-today.mot-cau .duoi-man .why .grow { text-align: center; }
#s-today.mot-cau .duoi-man .why .grow {
  flex-direction: column;
  gap: 8px;
  padding: 15px 16px 16px;
}
#s-today.mot-cau .duoi-man .why .gbadge { margin: 0 auto; }
#s-today.mot-cau .duoi-man .why .gtx { display: block; }

/* hai cửa rẽ: biểu tượng lên giữa, chữ canh giữa */
#s-today .hai-cua .cua { text-align: center; }
#s-today .hai-cua .cua .cua-ic { margin: 0 auto; }

/* ô "Chuyện nhỏ hôm nay" */
#s-today .grat-card { text-align: center; }
#s-today .grat-card .gh2 { text-align: center; }
#s-today .grat-list { text-align: center; }

/* "Hoặc dừng lại, hít thở một nhịp" là một LỜI MỜI NHẸ, không phải nút.
   Trước lỡ gộp chung quy tắc với nút nên nó có nền trắng, nhìn khô cứng. */
#s-today.mot-cau .duoi-man .tc-hint {
  width: auto;
  margin: 16px auto 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  font-size: 15px;
  color: #6B5744;
}

/* Câu thực hành + nhãn của nó vốn bị ép canh trái từ kiểu gốc (.tcd-task
   có text-align:left). Cả màn đã canh giữa nên phải ghi đè cho khớp. */
#s-today.mot-cau .tcd-task,
#s-today.mot-cau .tcd-task p,
#s-today.mot-cau .tcd-pill { text-align: center; }
#s-today.mot-cau .tcd-pill { justify-content: center; }