/* ============================================================================
   Linh Thu - giao dien web
   Bang mau lay tu anh mau: xanh ru non, kem, nhan vang.
   ========================================================================== */
/* display=block (khong phai swap): Google Fonts tach rieng file cho tung
   bang chu (vd subset "vietnamese" tai rieng, cham hon "latin"). Voi
   display=swap, trinh duyet ve TAM bang subset da co truoc khi subset
   vietnamese tai xong - vai chu co dau mu + dau thanh (A^'/A^`) bi ve SAI/
   rơi dau ra ngoai trong luc cho. display=block cho trinh duyet AN chu 1
   chut roi ve dung luon, khong bao gio ve sai dau. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&display=block');

:root {
  --green-900: #2f4529;
  --green-800: #3c5a34;
  --green-700: #4f7043;
  --green-600: #628a52;
  --green-500: #7aa267;
  --green-300: #a9c39a;
  --green-100: #e4eede;
  --gold: #c6a15b;
  --gold-dark: #a9843f;
  --cream: #f6f2e7;
  --cream-2: #fbf9f1;
  --ink: #34402f;
  --ink-soft: #5f6b58;
  --white-glass: rgba(255, 255, 255, 0.72);
  --white-glass-2: rgba(255, 255, 255, 0.55);
  --shadow-sm: 0 2px 10px rgba(60, 74, 44, 0.08);
  --shadow-md: 0 12px 34px rgba(52, 64, 47, 0.14);
  --shadow-lg: 0 24px 60px rgba(52, 64, 47, 0.20);
  --radius: 18px;
  --radius-lg: 26px;
  /* Be Vietnam Pro lam lop du phong truoc Georgia - xem ghi chu day du
     trong site.css (lo dau kep Ắ/Ầ o do dam Playfair Display). */
  --serif: 'Playfair Display', 'Be Vietnam Pro', Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* h1/h2/h3 dung var(--sans) thay vi var(--serif) - xem ghi chu day du trong
   site.css (Playfair Display ve sai dau nhieu chu tieng Viet 2 dau chong o
   nhieu tieu de/do dam khac nhau tren mot so may that, nguoi dung chon doi
   han sang font an toan cho moi tieu de, 2026-09-13). */
h1, h2, h3 { font-family: var(--sans); color: var(--green-800); margin: 0; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: .06em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 84px 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }

/* --- background scenery --------------------------------------------------- */
.scenery {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 520px at 78% -6%, #dfe9f2 0%, rgba(223,233,242,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #e9f0e2 0%, rgba(233,240,226,0) 55%),
    linear-gradient(180deg, #eef3ea 0%, var(--cream) 42%, var(--cream-2) 100%);
}
.scenery svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scenery::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 120%, rgba(122,162,103,.20), rgba(122,162,103,0) 70%);
}
.scenery.scenery-themed::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246,242,231,.5) 0%, rgba(246,242,231,.72) 55%, var(--cream-2) 100%);
}

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; flex-shrink: 0;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--white-glass); color: var(--green-800); box-shadow: var(--shadow-sm); border: 1px solid rgba(98,138,82,.25); }
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #fff; box-shadow: var(--shadow-md); }
.btn-sm { padding: 9px 18px; font-size: 12px; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* --- header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(246,242,231,.92), rgba(246,242,231,.72));
  border-bottom: 1px solid rgba(98,138,82,.16);
}
/* Xem ghi chu day du trong site.css - cung 1 quy tac: nav luon hien du
   tren desktop/tablet (tu xuong dong rieng khi khong du cho), chi dien
   thoai that (duoi 680px) moi gom vao menu gap. */
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; order: 1; }
.brand .mark { width: 40px; height: 40px; }
.brand b { font-family: var(--serif); font-size: 22px; letter-spacing: .16em; color: var(--green-800); display: block; }
.brand span { font-size: 10px; letter-spacing: .28em; color: var(--ink-soft); text-transform: uppercase; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 26px; order: 3; flex-basis: 100%; }
.nav a { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 0; position: relative; }
.nav a:hover, .nav a.active { color: var(--green-800); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); border-radius: 2px; }
.header-actions { display: flex; align-items: center; gap: 16px; order: 2; margin-left: auto; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--white-glass); box-shadow: var(--shadow-sm); color: var(--green-700); border: 0; }
.nav-toggle { display: none; }
.nav-login { display: none; }

/* --- hero ------------------------------------------------------------- */
.hero { padding: 64px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.hero h1 .accent { color: var(--gold-dark); display: block; }
.hero p.lead { font-size: 17px; color: var(--ink-soft); max-width: 440px; margin: 22px 0 30px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.hero-visual .halo {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 62%);
  filter: blur(4px);
}
.egg { position: relative; width: min(340px, 74%); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.pedestal { position: absolute; bottom: 6%; width: 62%; opacity: .9; }
.leaf { position: absolute; width: 26px; color: var(--green-500); opacity: .8; animation: drift 9s linear infinite; }
.leaf:nth-child(1) { top: 12%; left: 16%; animation-delay: 0s; }
.leaf:nth-child(2) { top: 30%; right: 12%; animation-delay: 2s; }
.leaf:nth-child(3) { bottom: 22%; left: 10%; animation-delay: 4s; }
@keyframes drift { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-60px) rotate(120deg); opacity: 0; } }

/* --- journey card --------------------------------------------------- */
.journey {
  background: var(--white-glass); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg); padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
}
.journey h3 { text-align: center; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; }
.journey .rule { text-align: center; color: var(--gold); letter-spacing: .5em; margin: 4px 0 18px; font-size: 12px; }
.step { display: flex; gap: 14px; padding: 12px; border-radius: 16px; align-items: flex-start; }
.step + .step { margin-top: 4px; }
.step.is-active { background: linear-gradient(180deg, rgba(122,162,103,.16), rgba(122,162,103,.06)); }
.step .dot {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700); font-weight: 700;
}
.step.is-active .dot { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; }
.step b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-800); }
.step small { color: var(--ink-soft); }
.countdown {
  margin-top: 16px; text-align: center; padding: 16px; border-radius: 16px;
  background: rgba(246,242,231,.7); border: 1px dashed rgba(169,132,63,.4);
}
.countdown .t { font-family: var(--serif); font-size: 34px; font-weight: 800; color: var(--green-800); letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums; }
.countdown small { display: block; color: var(--ink-soft); font-size: 12px; }

/* --- feature strip ------------------------------------------------ */
.features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--white-glass); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 30px 10px; margin-top: 26px;
  border: 1px solid rgba(255,255,255,.7);
}
.feature { display: flex; gap: 14px; padding: 6px 22px; align-items: flex-start; }
.feature + .feature { border-left: 1px solid rgba(98,138,82,.18); }
.feature .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; }
.feature b { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-800); }
.feature small { color: var(--ink-soft); font-size: 13px; }

/* --- explore cards ---------------------------------------------- */
.sec-title { text-align: center; margin-bottom: 40px; }
.sec-title h2 { font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; letter-spacing: .04em; }
.sec-title .flourish { color: var(--gold); letter-spacing: .4em; margin-top: 6px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card {
  background: var(--white-glass); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius); padding: 24px; text-align: center;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card .art { width: 92px; height: 92px; margin: 0 auto 16px; }
.card h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; }
.card p { color: var(--ink-soft); font-size: 14px; min-height: 40px; }

/* --- footer --------------------------------------------------- */
.site-footer { background: linear-gradient(180deg, rgba(246,242,231,0), rgba(228,238,222,.7)); margin-top: 40px; border-top: 1px solid rgba(98,138,82,.16); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 30px; padding: 56px 0 30px; }
.footer-grid h4 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-800); margin: 0 0 14px; }
.footer-grid a { display: block; color: var(--ink-soft); font-size: 14px; padding: 4px 0; }
.footer-grid a:hover { color: var(--green-800); }
.socials { display: flex; gap: 10px; margin: 8px 0 16px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; background: var(--white-glass); display: grid; place-items: center; color: var(--green-700); box-shadow: var(--shadow-sm); }
.newsletter { display: flex; gap: 8px; }
.newsletter input { flex: 1; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(98,138,82,.3); background: #fff; font: inherit; }
.footer-bottom { text-align: center; color: var(--ink-soft); font-size: 12px; padding: 18px 0 40px; }

/* --- auth + dashboard shared ---------------------------------- */
.panel {
  background: var(--white-glass); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 30px;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit;
  border: 1px solid rgba(98,138,82,.3); background: #fff;
}
.field input:focus { outline: 2px solid var(--green-300); border-color: transparent; }
.auth-wrap { max-width: 440px; margin: 60px auto; }
.auth-wrap h1 { font-size: 30px; text-transform: uppercase; letter-spacing: .04em; text-align: center; margin-bottom: 6px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; background: rgba(246,242,231,.7); padding: 6px; border-radius: 999px; }
.auth-tabs button { flex: 1; padding: 10px; border-radius: 999px; border: 0; background: transparent; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.auth-tabs button.active { background: #fff; color: var(--green-800); box-shadow: var(--shadow-sm); }
.msg { padding: 11px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; display: none; }
.msg.err { display: block; background: #fbeae5; color: #a5402a; }
.msg.ok { display: block; background: #e7f1e0; color: #3c5a34; }

/* --- dashboard ------------------------------------------------- */
.dash { display: grid; grid-template-columns: 340px 1fr; gap: 26px; align-items: start; margin: 40px 0 80px; }
.pet-card { text-align: center; }
.pet-portrait { width: 190px; height: 190px; margin: 0 auto 14px; position: relative; }
/* Sprite animation idle RIENG cho dashboard (khong chung ".companion-stage"
   cua trang chu - xem renderPetIdleAnimation() trong dashboard.js), vua dung
   khung .pet-portrait 190x190. */
.pet-idle-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.pet-idle-animation {
  width: 190px; height: 190px; max-width: 100%;
  background-repeat: no-repeat; background-size: 500% 500%;
}
.pet-portrait .companion-shadow { display: none; }
.level-badge {
  position: absolute; right: 6px; top: 6px; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 20px;
  box-shadow: var(--shadow-md); border: 3px solid var(--cream-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.xp-ring { --p: 0; width: 100%; }
.xpbar { height: 12px; border-radius: 999px; background: var(--green-100); overflow: hidden; margin: 12px 0 6px; }
.xpbar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-500), var(--green-700)); transition: width .5s ease; }
/* So do tinh cach (2026-10-21) - anh 120x120 + cham trang dat theo % (cong thuc trong dashboard.js). */
.trait-box { margin-top: 14px; text-align: center; }
/* 2026-10-24: danh hieu + no + tui thuc an (dashboard) */
.care-box { margin-top: 14px; text-align: left; font-size: 13px; }
.care-title { font-weight: 700; margin-bottom: 6px; }
.care-hunger { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hungerbar { flex: 1; height: 8px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; }
.hungerbar i { display: block; height: 100%; background: #6cc070; transition: width .4s; }
.hungerbar i.low { background: #e8833a; }
.hungerbar i.hp { background: #e8433a; }
.hungerbar i.hp.low { background: #b0522a; }
.care-bag { color: var(--ink-500, #6b7a6f); margin-bottom: 8px; }
.care-shop { display: flex; flex-wrap: wrap; gap: 6px; }
.care-shop .btn.fav { border-color: #e8b93c; box-shadow: 0 0 0 2px rgba(232,185,60,.35); }
.care-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-500, #6b7a6f); }
/* 2026-10-25: chuoi diem danh 7 ngay */
.care-streak { margin: 0 0 8px; }
.care-streak .dots { display: flex; gap: 5px; margin: 4px 0 2px; }
.care-streak .dots i { flex: 1; height: 8px; border-radius: 4px; background: rgba(0,0,0,.1); }
.care-streak .dots i.on { background: #e8b93c; }
.care-streak small { color: var(--ink-500, #6b7a6f); }
.trait-map { position: relative; width: 138px; height: 132px; margin: 0 auto; }
.trait-map img { display: block; width: 100%; height: 100%; }
.trait-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px 2px rgba(255,255,255,.65); transform: translate(-50%, -50%); transition: left .6s ease, top .6s ease; }
.trait-text { margin: 6px 0 0; font-size: 13px; color: var(--ink-500, #6b7a6f); }
.pet-card .xp-text { font-size: 13px; color: var(--ink-soft); }
.pet-name { font-family: var(--serif); font-size: 22px; color: var(--green-800); margin-top: 8px; }

.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(98,138,82,.16);
  transition: background .2s ease;
}
.quest.done { background: rgba(122,162,103,.14); }
.quest .check {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--green-500);
  display: grid; place-items: center; color: #fff; font-size: 15px;
}
.quest.done .check { background: var(--green-600); border-color: var(--green-600); }
.quest .body { flex: 1; }
.quest .body b { display: block; color: var(--green-800); }
.quest.done .body b { text-decoration: line-through; opacity: .7; }
.quest .body small { color: var(--ink-soft); }
.quest .body .quest-time-hint { display: block; color: var(--gold-dark); font-weight: 600; margin-top: 2px; }
.quest .xp { font-weight: 700; color: var(--gold-dark); font-size: 13px; }

/* --- nhiem vu bi an (mystery quest / gacha reveal) ---------------------
   CHI style vien/nen/animation cua khung .quest ngoai cung va nut CTA -
   KHONG dung lai .quest .check mau/border: cac khoi override theme o duoi
   (body.theme-thuy/hoa/moc[data-page="linh-thu-cua-toi"] .quest .check)
   co specificity cao hon bat ky selector con nao o day co the dat duoc -
   neu co gang doi mau .check o day se BI DE LEN vo hinh, kho debug. De
   check ke thua nguyen mau/theme nhu cac quest thuong, chi diem xuyet
   vien/nen/animation. */
.mystery-quest { margin-top: 10px; }
.mystery-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 8px; }
.mystery-quest .mystery-cta { width: 100%; justify-content: center; }

.mystery-quest .quest.mystery-flicker,
.mystery-quest .quest.mystery-revealed {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(198,161,91,.3) inset;
}
.mystery-quest .quest.mystery-flicker {
  animation: mystery-flicker-pulse .42s ease-in-out infinite alternate;
}
@keyframes mystery-flicker-pulse {
  from { opacity: .55; }
  to   { opacity: 1; }
}
.mystery-quest .quest.mystery-reveal-pop {
  animation: mystery-pop .38s ease-out;
}
@keyframes mystery-pop {
  0%   { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.water-list { display: flex; flex-direction: column; gap: 8px; }
.water-slot {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  border-radius: 12px; background: rgba(255,255,255,.5); border: 1px solid rgba(98,138,82,.14);
}
.water-slot.done { background: rgba(122,162,103,.14); }
.water-slot.window { background: rgba(230,178,84,.16); border-color: rgba(230,178,84,.4); }
.water-slot .check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--green-500);
  display: grid; place-items: center; color: #fff; font-size: 13px; background: transparent;
}
.water-slot.done .check { background: var(--green-600); border-color: var(--green-600); }
.water-slot.window .check { border-color: var(--gold-dark); }
.water-slot .body { flex: 1; }
.water-slot .body b { display: block; color: var(--green-800); font-size: 14px; }
.water-slot .body small { color: var(--ink-soft); }

.pair-box { display: flex; gap: 10px; margin-top: 12px; }
.pair-box input { flex: 1; text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--green-100); color: var(--green-700); }
.tag.live { background: #e7f1e0; color: #3c5a34; }
.tag.live::before { content: "●"; color: #4caf50; margin-right: 6px; }
.device-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(98,138,82,.14); }
.device-row:last-child { border-bottom: 0; }
.row-actions { display: flex; gap: 8px; }
.hint { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.mt-24 { margin-top: 24px; }
.between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
/* Dung o dau-truong.html/hoi.html nhung CHUA TUNG duoc dinh nghia o day -
   xem ghi chu giong het trong site.css (phat hien 2026-09-12). */
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(98,138,82,.12); }
.user-row:last-child { border-bottom: 0; }

/* --- lich nhiem vu ---------------------------------------------- */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.cal-dow { text-align: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(98,138,82,.16);
  background: rgba(255,255,255,.5); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  font-size: 13px; color: var(--ink); transition: background .15s ease, transform .15s ease;
}
.cal-day:hover { background: rgba(255,255,255,.85); transform: translateY(-1px); }
.cal-day.out { opacity: .35; cursor: default; }
.cal-day.out:hover { transform: none; background: rgba(255,255,255,.5); }
.cal-day.today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; font-weight: 700; }
.cal-day.selected { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; }
.cal-day .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dark); }
.cal-day.selected .dot { background: #fff; }

/* --- responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 340px; order: -1; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .feature:nth-child(3) { border-left: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .dash { grid-template-columns: 1fr; }
  /* 2026-10-25: tren dien thoai dua cot Nhiem vu len TRUOC (truoc nam cuoi trang, sau the linh thu + bo suu tap) */
  .dash .stack-quests { order: -1; }
}
/* Nav rieng 1 breakpoint RONG hon - xem ghi chu giong het trong site.css
   (danh sach trang da tang len 13 muc, khong con du cho o desktop "vua"). */
@media (max-width: 680px) {
  .site-header .container { padding-top: 0; padding-bottom: 0; height: 78px; flex-wrap: nowrap; }
  .nav {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--cream-2); box-shadow: var(--shadow-md); padding: 8px 0;
    transform: translateY(-140%); transition: transform .25s ease; margin: 0;
    flex-basis: auto;
    /* 2026-10-25: 14 muc ~700px > man 640px -> muc cuoi (Tin tuc, Dang xuat) khong bam toi duoc */
    max-height: calc(100vh - 78px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 12px 28px; }
  .nav a.active::after { display: none; }
  .nav-toggle { display: grid; }
  .nav-login { display: block; border-top: 1px solid rgba(98,138,82,.16); color: var(--green-800); font-weight: 700; }
  .header-actions .btn-primary:not(.keep-mobile) { display: none; }
  .header-actions .keep-mobile { padding: 7px 12px; font-size: 12px; }
  .header-actions .muted { display: none; }
  .header-actions #site-logout { display: none; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .feature { border-left: 0 !important; }
  .cards { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .container { padding: 0 18px; }
  .section { padding: 56px 0; }
}
@media (max-width: 480px) {
  /* man hinh doc dien thoai: logo + tagline + nut "Ve trang chu" tranh
     cho nhau lam vo dong chu (dau tieng Viet bi tach roi trong luc chu
     dang xuong dong) - thu gon logo, an tagline, giu nut CTA tren 1 dong. */
  .site-header .container { gap: 10px; }
  .brand { gap: 8px; }
  .brand .mark { width: 32px; height: 32px; }
  .brand b { font-size: 15px; letter-spacing: .05em; white-space: nowrap; }
  .brand > span > span { display: none; }
  .header-actions .btn-sm { padding: 8px 14px; font-size: 11px; white-space: nowrap; }
}

/* --- gam mau rieng theo he cua linh thu dang active (Bang dieu khien) --
   2026-09-12: nguoi dung gui 3 anh mau thiet ke lai toan bo giao dien theo
   tong Hoa/Thuy/Moc de tham khao (KHONG dung nguyen anh do lam nen - anh co
   san chu/UI gia trong do). Doi mau THAT bang cach ghi de toan bo bien mau
   goc (:root) ngay tren <body> - moi noi dang dung var(--green-800) v.v.
   (nut, tieu de, thanh XP, huy hieu...) tu dong doi mau theo, khong can sua
   tung dong CSS rieng. Class dat boi dashboard.js applyDashboardTheme() dua
   tren "active_element" cua thiet bi dang xem (server.py
   resolve_active_element()). "theme-sieu-vip" la KHUNG DE SAN cho 1 hang
   linh thu hiem hon Than Thoai, dinh lam sau - mau o day chi la mau tam,
   chua chot, sua lai khi co noi dung that. */
body.theme-hoa {
  --green-900: #5a1f12; --green-800: #8a2e18; --green-700: #c0432a;
  --green-600: #e0693a; --green-500: #ef8f66; --green-300: #f6c4a8; --green-100: #fde8da;
  --gold: #f4a542; --gold-dark: #d9822a;
  --cream: #fdf3ea; --cream-2: #fffaf5;
}
body.theme-thuy {
  --green-900: #123a5c; --green-800: #1d5fa8; --green-700: #2b74c2;
  --green-600: #4a93d8; --green-500: #7db9d8; --green-300: #a9d3ea; --green-100: #e2f1fa;
  --gold: #5bc4e8; --gold-dark: #2e9fc7;
  --cream: #eef7fc; --cream-2: #f7fbfe;
}
body.theme-moc {
  --green-900: #1e3a17; --green-800: #2c5c24; --green-700: #3f7a34;
  --green-600: #5a9c4a; --green-500: #7fbd6a; --green-300: #b3dba0; --green-100: #e6f5df;
  --gold: #c8dd6e; --gold-dark: #9fb84a;
  --cream: #f3f8ec; --cream-2: #f9fcf5;
}
body.theme-sieu-vip {
  --green-900: #2d1b4e; --green-800: #4a2f7a; --green-700: #6b4a9e;
  --green-600: #8f6bc4; --green-500: #ab8ed6; --green-300: #cfbbe8; --green-100: #ede4f7;
  --gold: #e8c468; --gold-dark: #c9a13f;
  --cream: #f7f2fb; --cream-2: #fbf8fd;
}
/* Nen mo hoac theo dung tong mau (giu kieu "anh sang toa nhe" giong ban goc,
   khong dung anh that). */
body.theme-hoa .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #ffe0c9 0%, rgba(255,224,201,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #ffd4b0 0%, rgba(255,212,176,0) 55%),
    linear-gradient(180deg, #fdeadb 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body.theme-thuy .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #cfe9fb 0%, rgba(207,233,251,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #bfe1f5 0%, rgba(191,225,245,0) 55%),
    linear-gradient(180deg, #e3f3fb 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body.theme-moc .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #d7ecc7 0%, rgba(215,236,199,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #c9e6b6 0%, rgba(201,230,182,0) 55%),
    linear-gradient(180deg, #e9f5df 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body.theme-sieu-vip .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #e3d4f5 0%, rgba(227,212,245,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #d8c3ee 0%, rgba(216,195,238,0) 55%),
    linear-gradient(180deg, #f0e6fa 0%, var(--cream) 42%, var(--cream-2) 100%);
}
/* Doi nui xanh trang tri mac dinh khong hop tong mau khi da doi theme -
   an di, de nguyen gradient lo tong mau cho gon. */
body[class*="theme-"] .scenery svg { display: none; }
/* Vien + hieu ung phat sang cho khung linh thu chinh - khac han mau vien
   trang mac dinh, kem 1 icon nho o goc dung dung net ve tay cua tung he
   (giong icon o Bo suu tap, xem dashboard.js SLOT_ICON). */
body[class*="theme-"] .pet-card {
  border: 2px solid var(--green-500);
  box-shadow: 0 0 0 1px var(--green-300) inset, 0 18px 44px rgba(0,0,0,.10), 0 0 46px -12px var(--green-500);
  position: relative;
  overflow: visible;
}
body[class*="theme-"] .pet-card::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold), var(--green-600), var(--gold));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.theme-icon-badge {
  position: absolute; left: -14px; top: -14px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--cream-2); border: 2px solid var(--gold);
  display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--green-700);
  z-index: 1;
}
.theme-icon-badge svg { width: 22px; height: 22px; }

/* Nen mac dinh cho the trong "Bo suu tap linh thu" (dashboard.js
   loadCollection()) - tach ra class thay vi inline style de CSS theo theme
   ben duoi co the ghi de theo tung he ma khong bi inline de len tren. Gia
   tri giu NGUYEN y het inline cu, chi doi cho o. */
.collection-card.owned { background: rgba(255,255,255,.5); }
.collection-card.locked { opacity: .45; filter: grayscale(1); }
/* 2026-10-27: muc menu dang khoa (Dau truong/Xep hang/Hoi) - truoc chi site.css co, trang dung app.css hien nhu link thuong */
.nav a.locked { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.nav a.locked:hover { color: inherit; }

/* ============================================================================
   "Cua toi" (Bang dieu khien) - 1 vong "fantasy polish" RIENG cho HE THUY
   (2026-09-14, phan hoi "giong dashboard quan tri qua"). Chi bo sung/
   override style, KHONG doi cau truc/API/JS logic - moi rule o day scope
   duoi body.theme-thuy[data-page="linh-thu-cua-toi"], khong dung o dau
   khac. Ap dung tuong tu cho Hoa/Moc de lai cho lan sau (tien le da co voi
   pill trang chu - xem docs/VAN-HANH.md).
   ========================================================================== */

/* 1+8. Phong canh cuc mo o 2 mep VA gan cuoi noi dung trang - tai dung SVG
   nui/may/song co san cua .scenery (dang bi an luon o moi theme khac cho
   gon, xem "body[class*=theme-] .scenery svg" o tren) thay vi ve them anh
   moi, chi doi mau sang xanh bang hue-rotate + opacity rat nhe. .dash la
   luoi 2 cot (position: grid) nen ::after phai grid-column:1/-1 de khong bi
   ep vao rieng cot trai 340px. */
body.theme-thuy[data-page="linh-thu-cua-toi"] .scenery svg {
  display: block;
  opacity: .13;
  filter: hue-rotate(150deg) saturate(1.4);
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .dash::after {
  content: "";
  grid-column: 1 / -1;
  display: block;
  height: 110px;
  margin-top: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 60c120 30 240 30 360 5s240-35 360-10 240 35 360 10 240-35 360-10v55H0Z' fill='%232b74c2' opacity='.5'/%3E%3Cpath d='M0 80c150 22 300 22 450 2s300-24 450-4 300 24 540 4v28H0Z' fill='%234a93d8' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .14;
  pointer-events: none;
}

/* 2. The linh thu chinh: glow xanh phia sau + ripple mem duoi chan + vai
   bot nuoc rat nho. Corner ornament (goc tren trai) la .theme-icon-badge co
   san, da dung hinh giot nuoc cho Thuy tu truoc (dashboard.js
   THEME_BADGE_ICON) - khong can them. */
body.theme-thuy[data-page="linh-thu-cua-toi"] .pet-portrait { position: relative; }
body.theme-thuy[data-page="linh-thu-cua-toi"] .pet-portrait::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,196,232,.35), rgba(91,196,232,0) 68%);
  filter: blur(10px);
  z-index: -1;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .pet-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 62%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(91,196,232,.45);
  animation: dash-ripple 3s ease-out infinite;
}
@keyframes dash-ripple {
  0%   { transform: translateX(-50%) scale(.65); opacity: .6; }
  80%  { transform: translateX(-50%) scale(1.3); opacity: 0; }
  100% { transform: translateX(-50%) scale(1.3); opacity: 0; }
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .pet-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(180,230,250,.75), rgba(180,230,250,0) 70%),
    radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  background-repeat: no-repeat;
  background-size: 9px 9px, 6px 6px, 7px 7px;
  background-position: 20% 88%, 72% 92%, 55% 85%;
  animation: dash-bubbles 8s ease-in infinite;
}
@keyframes dash-bubbles {
  0%   { background-position: 20% 88%, 72% 92%, 55% 85%; opacity: 0; }
  10%  { opacity: .85; }
  85%  { opacity: .5; }
  100% { background-position: 20% 35%, 72% 30%, 55% 25%; opacity: 0; }
}

/* 3. Thanh level kieu "ong nuoc" - gradient da tu doi xanh san (--green-500/
   700 doi theo body.theme-thuy o tren), chi them 1 dai sang chay nhe. */
body.theme-thuy[data-page="linh-thu-cua-toi"] .xpbar {
  background: linear-gradient(180deg, rgba(91,196,232,.16), rgba(91,196,232,.26));
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .xpbar > i {
  background: linear-gradient(90deg, #5bc4e8, #2e7fc0);
  position: relative;
  overflow: hidden;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .xpbar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: dash-shimmer 2.6s linear infinite;
}
@keyframes dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

/* 4. Bo suu tap: nen rat nhe theo TUNG he cua o do (data-el gan tu
   dashboard.js), khong phu thuoc theme trang - nhung van scope duoi
   theme-thuy theo dung yeu cau, se mo rong cho Hoa/Moc active sau. Con
   dang active co vien+glow sang ro (class is-active-pet, gan tu JS). */
body.theme-thuy[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="hoa"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,150,80,.18), rgba(255,255,255,.55) 65%);
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="thuy"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(91,196,232,.22), rgba(255,255,255,.55) 65%);
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="moc"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(122,189,106,.20), rgba(255,255,255,.55) 65%);
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .collection-card.is-active-pet {
  border-color: #2e9fc7;
  box-shadow: 0 0 0 2px rgba(46,159,199,.35), 0 10px 26px rgba(46,159,199,.22);
}

/* 5. Ornament song duoi tieu de "Nhiem vu hom nay" - :has() de nham dung
   panel chua #quest-list, khong can them id/class moi vao HTML. Danh sach
   nhiem vu tu no khong doi nen gi them (dung y "khong lam roi"). */
body.theme-thuy[data-page="linh-thu-cua-toi"] .panel:has(#quest-list) h3 {
  position: relative;
  padding-bottom: 10px;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .panel:has(#quest-list) h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M2 5c8 4 16 4 24 0s16-4 24 0 8 3 12 1' fill='none' stroke='%232e9fc7' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .quest:hover { background: rgba(91,196,232,.08); }

/* 6. Checkbox nhiem vu: tron kieu nuoc thay vi vuong bo goc, "splash" nho
   khi hoan thanh (chay 1 lan luc phan tu duoc tao ra tu renderState() -
   khong theo doi rieng "vua moi tick" vi renderState ve lai toan bo list
   moi lan SSE day, du de tao cam giac "vua xong" ma khong can them JS). */
body.theme-thuy[data-page="linh-thu-cua-toi"] .quest .check {
  border-radius: 50%;
  border-color: #2e9fc7;
  position: relative;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .quest.done .check {
  background: linear-gradient(180deg, #5bc4e8, #1d5fa8);
  border-color: #1d5fa8;
  animation: dash-splash .45s ease-out;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] .quest.done .check::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(91,196,232,.55);
  animation: dash-splash-ring .5s ease-out;
}
@keyframes dash-splash {
  0% { transform: scale(.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes dash-splash-ring {
  0% { transform: scale(.4); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 7. The "Da ghep xong!" - gradient xanh cuc nhe trai->phai + net song o
   day. border-left mau da tu doi xanh san (inline style trong HTML dung
   var(--green-600), var nay da doi theo theme-thuy o tren) - khong can sua. */
body.theme-thuy[data-page="linh-thu-cua-toi"] #welcome-card {
  background: linear-gradient(90deg, rgba(226,241,250,.92), rgba(255,255,255,.5) 70%);
  position: relative;
  overflow: hidden;
}
body.theme-thuy[data-page="linh-thu-cua-toi"] #welcome-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6'%3E%3Cpath d='M0 3c25 3 50 3 75 0s50-3 75 0 25 3 50 0' fill='none' stroke='%232e9fc7' stroke-width='2' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 6px;
}

/* ============================================================================
   Cung 1 vong "fantasy polish" nhu tren, giờ lam not cho HE HOA va HE MOC
   (2026-09-14, "lam cho 2 he con lai luon"). Dung LAI cac @keyframes
   dung chung o tren (dash-ripple/dash-bubbles/dash-shimmer/dash-splash/
   dash-splash-ring - da doi ten bo "-thuy-" cho trung tinh, khong dinh mau
   trong keyframe, chi doi mau qua thuoc tinh tinh o tung khoi duoi day).
   Don gian hoa co chu y: "ripple/bubble" giu NGUYEN co che (vong lan +
   hat troi len) cho ca 3 he, chi doi MAU thanh lua (cam/do) hoac la (xanh
   la) - CHUA co art rieng hinh ngon lua/chiec la, dung dung tien le co san
   cua .sparkle/.leaf (2 phan tu trang tri chung, chi doi mau theo theme,
   xem site.css) thay vi ve them SVG hinh dang moi. ========================================================================== */

/* --- HE HOA -------------------------------------------------------------- */
body.theme-hoa[data-page="linh-thu-cua-toi"] .scenery svg {
  display: block;
  opacity: .13;
  filter: hue-rotate(-84deg) saturate(1.5);
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .dash::after {
  content: "";
  grid-column: 1 / -1;
  display: block;
  height: 110px;
  margin-top: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 60c120 30 240 30 360 5s240-35 360-10 240 35 360 10 240-35 360-10v55H0Z' fill='%23c0432a' opacity='.5'/%3E%3Cpath d='M0 80c150 22 300 22 450 2s300-24 450-4 300 24 540 4v28H0Z' fill='%23e0693a' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .14;
  pointer-events: none;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .pet-portrait { position: relative; }
body.theme-hoa[data-page="linh-thu-cua-toi"] .pet-portrait::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,105,58,.35), rgba(224,105,58,0) 68%);
  filter: blur(10px);
  z-index: -1;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .pet-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 62%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(224,105,58,.45);
  animation: dash-ripple 3s ease-out infinite;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .pet-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,190,140,.75), rgba(255,190,140,0) 70%),
    radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  background-repeat: no-repeat;
  background-size: 9px 9px, 6px 6px, 7px 7px;
  background-position: 20% 88%, 72% 92%, 55% 85%;
  animation: dash-bubbles 8s ease-in infinite;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .xpbar {
  background: linear-gradient(180deg, rgba(224,105,58,.16), rgba(224,105,58,.26));
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .xpbar > i {
  background: linear-gradient(90deg, #f0895a, #c0432a);
  position: relative;
  overflow: hidden;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .xpbar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: dash-shimmer 2.6s linear infinite;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="hoa"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,150,80,.18), rgba(255,255,255,.55) 65%);
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="thuy"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(91,196,232,.22), rgba(255,255,255,.55) 65%);
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="moc"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(122,189,106,.20), rgba(255,255,255,.55) 65%);
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .collection-card.is-active-pet {
  border-color: #c0432a;
  box-shadow: 0 0 0 2px rgba(192,67,42,.35), 0 10px 26px rgba(192,67,42,.22);
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .panel:has(#quest-list) h3 {
  position: relative;
  padding-bottom: 10px;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .panel:has(#quest-list) h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M2 5c8 4 16 4 24 0s16-4 24 0 8 3 12 1' fill='none' stroke='%23d9822a' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .quest:hover { background: rgba(224,105,58,.08); }
body.theme-hoa[data-page="linh-thu-cua-toi"] .quest .check {
  border-radius: 50%;
  border-color: #d9822a;
  position: relative;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .quest.done .check {
  background: linear-gradient(180deg, #f0895a, #c0432a);
  border-color: #c0432a;
  animation: dash-splash .45s ease-out;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] .quest.done .check::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(224,105,58,.55);
  animation: dash-splash-ring .5s ease-out;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] #welcome-card {
  background: linear-gradient(90deg, rgba(253,231,218,.92), rgba(255,255,255,.5) 70%);
  position: relative;
  overflow: hidden;
}
body.theme-hoa[data-page="linh-thu-cua-toi"] #welcome-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6'%3E%3Cpath d='M0 3c25 3 50 3 75 0s50-3 75 0 25 3 50 0' fill='none' stroke='%23d9822a' stroke-width='2' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 6px;
}

/* --- HE MOC -------------------------------------------------------------- */
body.theme-moc[data-page="linh-thu-cua-toi"] .scenery svg {
  display: block;
  opacity: .13;
  filter: hue-rotate(4deg) saturate(1.35);
}
body.theme-moc[data-page="linh-thu-cua-toi"] .dash::after {
  content: "";
  grid-column: 1 / -1;
  display: block;
  height: 110px;
  margin-top: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 60c120 30 240 30 360 5s240-35 360-10 240 35 360 10 240-35 360-10v55H0Z' fill='%233f7a34' opacity='.5'/%3E%3Cpath d='M0 80c150 22 300 22 450 2s300-24 450-4 300 24 540 4v28H0Z' fill='%235a9c4a' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .14;
  pointer-events: none;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .pet-portrait { position: relative; }
body.theme-moc[data-page="linh-thu-cua-toi"] .pet-portrait::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,156,74,.35), rgba(90,156,74,0) 68%);
  filter: blur(10px);
  z-index: -1;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .pet-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 62%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(90,156,74,.45);
  animation: dash-ripple 3s ease-out infinite;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .pet-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(170,220,150,.75), rgba(170,220,150,0) 70%),
    radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  background-repeat: no-repeat;
  background-size: 9px 9px, 6px 6px, 7px 7px;
  background-position: 20% 88%, 72% 92%, 55% 85%;
  animation: dash-bubbles 8s ease-in infinite;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .xpbar {
  background: linear-gradient(180deg, rgba(90,156,74,.16), rgba(90,156,74,.26));
}
body.theme-moc[data-page="linh-thu-cua-toi"] .xpbar > i {
  background: linear-gradient(90deg, #7fbd6a, #3f7a34);
  position: relative;
  overflow: hidden;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .xpbar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: dash-shimmer 2.6s linear infinite;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="hoa"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,150,80,.18), rgba(255,255,255,.55) 65%);
}
body.theme-moc[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="thuy"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(91,196,232,.22), rgba(255,255,255,.55) 65%);
}
body.theme-moc[data-page="linh-thu-cua-toi"] .collection-card.owned[data-el="moc"] {
  background: radial-gradient(120% 120% at 50% 0%, rgba(122,189,106,.20), rgba(255,255,255,.55) 65%);
}
body.theme-moc[data-page="linh-thu-cua-toi"] .collection-card.is-active-pet {
  border-color: #3f7a34;
  box-shadow: 0 0 0 2px rgba(63,122,52,.35), 0 10px 26px rgba(63,122,52,.22);
}
body.theme-moc[data-page="linh-thu-cua-toi"] .panel:has(#quest-list) h3 {
  position: relative;
  padding-bottom: 10px;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .panel:has(#quest-list) h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M2 5c8 4 16 4 24 0s16-4 24 0 8 3 12 1' fill='none' stroke='%239fb84a' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .quest:hover { background: rgba(90,156,74,.08); }
body.theme-moc[data-page="linh-thu-cua-toi"] .quest .check {
  border-radius: 50%;
  border-color: #9fb84a;
  position: relative;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .quest.done .check {
  background: linear-gradient(180deg, #7fbd6a, #3f7a34);
  border-color: #3f7a34;
  animation: dash-splash .45s ease-out;
}
body.theme-moc[data-page="linh-thu-cua-toi"] .quest.done .check::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(90,156,74,.55);
  animation: dash-splash-ring .5s ease-out;
}
body.theme-moc[data-page="linh-thu-cua-toi"] #welcome-card {
  background: linear-gradient(90deg, rgba(233,245,223,.92), rgba(255,255,255,.5) 70%);
  position: relative;
  overflow: hidden;
}
body.theme-moc[data-page="linh-thu-cua-toi"] #welcome-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6'%3E%3Cpath d='M0 3c25 3 50 3 75 0s50-3 75 0 25 3 50 0' fill='none' stroke='%239fb84a' stroke-width='2' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 6px;
}

/* --- 2026-10-28: ra soat tren dien thoai 360px ---------------------------------------------- */
body { overflow-x: hidden; }
@media (max-width: 480px) { .panel { padding: 20px; } .auth-wrap { margin: 28px auto; } }
.row-actions { flex-wrap: wrap; }
.between { flex-wrap: wrap; gap: 8px; }
/* O nhap ma ghep: truoc khong co style (o mac dinh nho), font 16px de iOS khong tu zoom */
.pair-box input {
  min-width: 0; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700;
  border: 1px solid rgba(98,138,82,.35); background: #fff;
}
.pair-box input:focus { outline: 2px solid var(--green-300); border-color: transparent; }
/* Copy tu site.css: dau trang (pve/hoi/...) + nut Zalo noi tren cac trang dung app.css */
.page-hero { padding: 48px 0 16px; text-align: center; }
.page-hero .kicker { color: var(--gold-dark); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.page-hero h1 { font-size: clamp(26px, 4.5vw, 46px); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0; }
.page-hero p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; }
.crumbs { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.crumbs a:hover { color: var(--green-800); }
.zalo-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: #0068ff; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 8px 16px 8px 8px;
  box-shadow: 0 6px 20px rgba(0,104,255,.35);
}
.zalo-float b {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  background: #fff; color: #0068ff; border-radius: 50%;
  font-family: var(--serif); font-size: 17px; font-style: normal;
}
.zalo-float span { white-space: nowrap; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
@media (max-width: 480px) {
  .zalo-float { padding: 8px; right: 14px; bottom: 14px; }
  .zalo-float span { display: none; }
}