/**
 * THÔNG ĐIỆP HÔM NAY — /thong-diep-hom-nay/
 * Kế thừa boi-tarot.css (xào, deck, slot, section) + lenormand.css (loading)
 * + flow-shell.css. File này: màn bắt đầu (quạt 3 lá), poster thông điệp,
 * dải số liệu chuỗi, dải 7 ngày + lưới 30 ngày, chia sẻ có xem trước 3 khổ.
 */
body.page-template-page-thong-diep-hom-nay .page-header,
body.page-template-page-thong-diep-hom-nay .nevo-breadcrumb,
body.page-template-page-thong-diep-hom-nay .rank-math-breadcrumb,
body.page-template-page-thong-diep-hom-nay .breadcrumb { display: none !important; }

/* [hidden] phải thắng display:inline-flex/grid của các pill, badge, lưới */
.daily-page [hidden] { display: none !important; }

/* ---------- Bước 1: bắt đầu ---------- */
.dl-start { width: 100%; max-width: 720px; margin: 0.5rem auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.dl-fan { position: relative; width: 240px; height: 190px; margin: 0 auto 0.2rem; }
.dl-fan img {
    position: absolute; left: 50%; bottom: 0; width: 104px; height: auto; border-radius: 9px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(212,165,116,0.35);
    transform-origin: 50% 110%;
    animation: dlFanIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, dlBreathe 4.5s ease-in-out 1s infinite;
}
.dl-fan img:nth-child(1) { --rot: -18deg; --dx: -58%; animation-delay: 0.05s, 1s; z-index: 1; }
.dl-fan img:nth-child(2) { --rot: 0deg; --dx: -50%; animation-delay: 0.18s, 1.4s; z-index: 3; margin-bottom: 12px; }
.dl-fan img:nth-child(3) { --rot: 18deg; --dx: -42%; animation-delay: 0.31s, 1.8s; z-index: 2; }
@keyframes dlFanIn { from { opacity: 0; transform: translateX(-50%) rotate(0) translateY(30px); } to { opacity: 1; transform: translateX(var(--dx)) rotate(var(--rot)); } }
@keyframes dlBreathe { 0%, 100% { transform: translateX(var(--dx)) rotate(var(--rot)) translateY(0); } 50% { transform: translateX(var(--dx)) rotate(var(--rot)) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .dl-fan img { animation: dlFanIn 0.01s both; } }

.dl-start-date { margin: 0; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-text-muted); }
.dl-start-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.8rem; min-height: 0; }
.dl-start-meta:empty { display: none; }
.dl-streak-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 1rem; border-radius: 999px;
    border: 1px solid var(--theme-border-strong); background: rgba(212, 165, 116, 0.12);
    color: var(--theme-gold-text); font-weight: 700; font-size: 0.95rem;
}
.dl-today-count { font-size: 0.88rem; color: var(--theme-text-muted); }
.dl-today-count strong { color: var(--theme-text-primary); }
.dl-start-text { margin: 0; color: var(--theme-text-body); font-size: 1.05rem; line-height: 1.7; }
.dl-start .continue-btn { margin-top: 0.4rem; }
.dl-start-note { margin: 0; font-size: 0.88rem; color: var(--theme-text-muted); }
.dl-start-note:empty { display: none; }
.dl-yesterday {
    display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; padding: 0.55rem 0.9rem 0.55rem 0.55rem;
    border-radius: 14px; border: 1px solid var(--theme-border); background: var(--theme-surface-1); text-align: left;
}
.dl-yesterday img { width: 38px; height: auto; border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.dl-yesterday span { font-size: 0.9rem; color: var(--theme-text-body); line-height: 1.4; }
.dl-yesterday strong { color: var(--theme-text-primary); }
.dl-yesterday small { display: block; font-size: 0.78rem; color: var(--theme-text-muted); }

/* ---------- Bước 4: bố cục poster + cột phải ---------- */
.dl-layout {
    width: 100%; max-width: var(--flow-w-result, 1500px); margin: 0 auto 1.6rem;
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1.6rem; align-items: start;
}
.dl-poster {
    padding: 2rem 2rem 1.6rem; border-radius: 24px; text-align: center;
    border: 1.5px solid var(--theme-border-strong);
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(212, 165, 116, 0.18), transparent 70%),
        linear-gradient(180deg, rgba(212, 165, 116, 0.08), rgba(212, 165, 116, 0.02));
}
.dl-kicker { margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--theme-gold-text); }
.dl-poster-card { position: relative; width: 300px; max-width: 70vw; margin: 0 auto 1.3rem; }
.dl-glow {
    position: absolute; inset: -18% -30%; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(230, 193, 138, 0.55), rgba(230, 193, 138, 0.18) 55%, transparent 75%);
    animation: dlGlow 5s ease-in-out infinite;
}
@keyframes dlGlow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.dl-poster-card img {
    position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.38), 0 0 0 1px rgba(212,165,116,0.35);
    animation: dlCardIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes dlCardIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.daily-page h2.dl-card-name { margin: 0 0 1rem; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.15; color: var(--theme-text-primary); text-transform: none; letter-spacing: 0; text-align: center; text-shadow: none; }
.daily-page h2.dl-card-name small { display: block; font-size: 0.5em; font-weight: 500; color: var(--theme-text-muted); margin-top: 0.25rem; letter-spacing: 0.02em; }

.dl-kw { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 0 0 1.2rem; }
.dl-kw-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--theme-text-muted); }
.dl-kw strong {
    font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--theme-gold-text); padding: 0.25rem 1.1rem; border-radius: 999px;
    background: rgba(212, 165, 116, 0.14); border: 1px solid var(--theme-border-strong);
}
.dl-message {
    position: relative; margin: 0 auto 1.3rem; max-width: 720px; padding: 0.2rem 1.6rem;
    font-size: 1.15rem; line-height: 1.8; color: var(--theme-text-primary); border: none;
}
.dl-message::before, .dl-message::after {
    position: absolute; font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; color: var(--theme-gold-text); opacity: 0.45;
}
.dl-message::before { content: "\201C"; left: -0.1rem; top: -0.7rem; }
.dl-message::after { content: "\201D"; right: -0.1rem; bottom: -1.6rem; }
.dl-message p { margin: 0; }

.dl-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0 auto 1.1rem; max-width: 760px; text-align: left; }
.dl-tip { padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--theme-border); background: var(--theme-surface-1); }
.dl-tip-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.35rem; font-weight: 700; }
.dl-tip-label i { font-style: normal; font-size: 0.95rem; }
.dl-tip.is-do { border-color: rgba(111,211,154,0.45); } .dl-tip.is-do .dl-tip-label { color: #6fd39a; }
.dl-tip.is-avoid { border-color: rgba(255,138,138,0.4); } .dl-tip.is-avoid .dl-tip-label { color: #ff8a8a; }
:root[data-theme="light"] .dl-tip.is-do .dl-tip-label { color: #1f7a45; }
:root[data-theme="light"] .dl-tip.is-avoid .dl-tip-label { color: #b83232; }
.dl-tip p { margin: 0; color: var(--theme-text-body); line-height: 1.6; font-size: 0.97rem; }
.dl-poster-foot { margin: 0; font-size: 0.9rem; color: var(--theme-text-muted); display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.dl-poster-foot:empty { display: none; }
.dl-poster-foot a { color: var(--theme-gold-text); font-weight: 700; }

/* ---------- Cột phải ---------- */
.dl-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 84px; }
.dl-side-title { margin: 0 0 0.7rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-gold-text); }

.dl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.dl-stat {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.9rem 0.5rem 0.8rem;
    border-radius: 16px; border: 1px solid var(--theme-border); background: var(--theme-surface-1); text-align: center; overflow: hidden;
}
.dl-stat-ico { font-size: 1.2rem; line-height: 1; }
.dl-stat strong { font-size: 1.7rem; line-height: 1.1; font-weight: 800; color: var(--theme-gold-text); }
.dl-stat-label { font-size: 0.72rem; color: var(--theme-text-muted); line-height: 1.2; }
.dl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--theme-surface-3); }
.dl-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--tarot-gold-light,#e6c18a), var(--tarot-gold,#d4a574)); transition: width 0.8s ease; }
.dl-stat.is-done strong { color: var(--theme-text-primary); }
.dl-streak-badge {
    margin: -0.3rem 0 0; padding: 0.55rem 0.9rem; border-radius: 12px; text-align: center; font-weight: 800; font-size: 0.9rem;
    background: linear-gradient(135deg, var(--tarot-gold-light,#e6c18a), var(--tarot-gold,#d4a574)); color: #0a0a0f;
}
.dl-streak-badge.is-soft { background: transparent; color: var(--theme-text-muted); border: 1px dashed var(--theme-border); font-weight: 600; }

/* 7 ngày */
.dl-week-wrap, .dl-share { padding: 1rem 1.1rem 1.1rem; border-radius: 18px; border: 1px solid var(--theme-border); background: var(--theme-surface-1); }
.dl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.dl-wd { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.dl-wd-name { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--theme-text-faint); text-transform: uppercase; }
.dl-wd-box { position: relative; width: 100%; aspect-ratio: 150/256; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.dl-wd-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; box-shadow: 0 6px 14px rgba(0,0,0,0.22); }
.dl-wd.miss .dl-wd-box { border: 1px dashed var(--theme-border); background: var(--theme-surface-0, rgba(255,255,255,0.02)); }
.dl-wd.miss .dl-wd-box::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-border-strong); opacity: 0.7; }
.dl-wd.today .dl-wd-box { outline: 2px solid var(--theme-gold-text); outline-offset: 2px; }
.dl-wd.today .dl-wd-name, .dl-wd.today .dl-wd-num { color: var(--theme-gold-text); font-weight: 700; }
.dl-wd-num { font-size: 0.7rem; color: var(--theme-text-faint); }
.dl-link-btn { margin: 0.8rem auto 0; display: block; background: none; border: none; padding: 0; font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--theme-gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dl-calendar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.3rem; margin-top: 0.8rem; }
.dl-day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.dl-day span, .dl-day img { width: 100%; aspect-ratio: 150/256; border-radius: 4px; display: block; object-fit: cover; }
.dl-day span { border: 1px dashed var(--theme-border); background: var(--theme-surface-0, rgba(255,255,255,0.02)); }
.dl-day small { font-size: 0.62rem; color: var(--theme-text-faint); }
.dl-day.today small { color: var(--theme-gold-text); font-weight: 700; }
.dl-day.today img, .dl-day.today span { outline: 2px solid var(--theme-gold-text); outline-offset: 1px; }

/* Chia sẻ: 3 thumbnail thật */
.dl-share-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.8rem; }
.dl-format {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem 0.4rem 0.55rem;
    border-radius: 14px; border: 1.5px solid var(--theme-border); background: var(--theme-surface-0, rgba(255,255,255,0.03));
    color: var(--theme-text-body); font-family: inherit; font-weight: 700; font-size: 0.84rem; text-align: center; cursor: pointer; transition: all 0.2s ease;
}
.dl-format small { display: block; font-weight: 500; font-size: 0.68rem; color: var(--theme-text-muted); margin-top: 0.1rem; }
.dl-format:hover { border-color: var(--theme-gold-text); }
.dl-format.active { border-color: var(--theme-gold-text); background: rgba(212,165,116,0.12); color: var(--theme-gold-text); box-shadow: 0 0 0 3px rgba(212,165,116,0.18); }
.dl-thumb { display: flex; align-items: center; justify-content: center; height: 96px; width: 100%; }
.dl-thumb img { display: block; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,0.25); max-height: 96px; max-width: 100%; }
.dl-thumb::before { content: ""; display: block; border: 2px solid currentColor; border-radius: 3px; opacity: 0.45; }
.dl-thumb.is-square::before { width: 56px; height: 56px; }
.dl-thumb.is-story::before { width: 42px; height: 74px; }
.dl-thumb.is-wide::before { width: 84px; height: 44px; }
.dl-thumb.has-img::before { display: none; }
.dl-theme-row { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 0.9rem; font-size: 0.82rem; color: var(--theme-text-muted); }
.dl-theme-row span { margin-right: 0.3rem; }
.dl-theme-btn { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--theme-border); background: transparent; color: var(--theme-text-body); font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.dl-theme-btn.active { border-color: var(--theme-gold-text); background: rgba(212,165,116,0.14); color: var(--theme-gold-text); }
.dl-share-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.dl-share-actions .retry-btn, .dl-share-actions .flow-btn-ghost { width: 100%; justify-content: center; }
.dl-share-hint { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--theme-text-muted); text-align: center; line-height: 1.5; }

.dl-deeper { width: 100%; max-width: var(--flow-w-result, 1500px); margin: 0.4rem auto 0; text-align: center; color: var(--theme-text-soft); }
.dl-deeper a { color: var(--theme-gold-text); font-weight: 600; }
.daily-page .flow-crosslinks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .dl-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; } }
@media (max-width: 1000px) { .daily-page .flow-crosslinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .dl-layout { grid-template-columns: 1fr; }
    .dl-side { position: static; }
    .dl-stats { order: -1; }
}
@media (max-width: 760px) {
    .dl-poster { padding: 1.4rem 1.1rem 1.2rem; border-radius: 18px; }
    .dl-poster-card { width: 220px; }
    .dl-message { font-size: 1.05rem; padding: 0.2rem 1.1rem; }
    .dl-message::before, .dl-message::after { font-size: 2.6rem; }
    .dl-tips { grid-template-columns: 1fr; }
    .dl-stat strong { font-size: 1.45rem; }
    .dl-fan { width: 200px; height: 165px; }
    .dl-fan img { width: 92px; }
    .dl-calendar { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .daily-page .flow-crosslinks-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BẢNG XẾP HẠNG CHUỖI
   ============================================================ */
/* Bề rộng đồng bộ với các khu khác của trang (.intro-section: đệm 2rem, khung var(--site-w)). */
.dl-board-section { position: relative; z-index: 1; padding: 0 2rem 3.5rem; }
.dl-board { width: 100%; max-width: var(--site-w); box-sizing: border-box; margin: 0 auto; padding: 1.5rem 1.4rem 1.2rem; border-radius: 22px; border: 1px solid var(--theme-border); background: var(--theme-bg-elevated); }
.dl-board-head { text-align: center; margin-bottom: 1.1rem; }
.daily-page .dl-board-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--theme-text-primary); text-transform: none; letter-spacing: 0; text-shadow: none; }
.dl-board-head p { margin: 0.45rem auto 0; max-width: 58ch; font-size: 0.9rem; line-height: 1.6; color: var(--theme-text-muted); }

.dl-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
@media (min-width: 900px) {
    .dl-board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); column-gap: 0.8rem; }
    .dl-board-list > .dl-board-empty { grid-column: 1 / -1; }
}
.dl-board-row { display: grid; grid-template-columns: 2rem 44px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; border-radius: 14px; border: 1px solid var(--theme-border); background: var(--theme-surface-1); }
.dl-board-pos { font-weight: 800; font-size: 1rem; text-align: center; color: var(--theme-text-muted); font-variant-numeric: tabular-nums; }
.dl-board-row.is-top1 .dl-board-pos { color: #d9a441; }
.dl-board-row.is-top2 .dl-board-pos { color: #a9b3bd; }
.dl-board-row.is-top3 .dl-board-pos { color: #c07a4a; }
.dl-board-row.is-top1 { border-color: var(--theme-border-strong); background: var(--gk-soft, var(--theme-surface-1)); }
.dl-board-row.is-me { outline: 2px solid var(--theme-gold-text); outline-offset: -2px; }

/* Khung hạng thành viên (ảnh 192×192, vòng trong = 66%) bọc ảnh đại diện — như trang Tài khoản */
.dl-board-frame { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: center / contain no-repeat; }
.dl-board-frame > img, .dl-board-frame > i { width: 66%; height: 66%; border-radius: 50%; }
.dl-board-frame > img { object-fit: cover; display: block; }
.dl-board-frame > i { display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 0.9rem; color: var(--theme-gold-text); background: var(--gk-soft, var(--theme-surface-2)); }
.dl-board-frame.is-f1 { background-image: url(../img/ranks/rank-1.png?v=1); }
.dl-board-frame.is-f2 { background-image: url(../img/ranks/rank-2.png?v=1); }
.dl-board-frame.is-f3 { background-image: url(../img/ranks/rank-3.png?v=1); }
.dl-board-frame.is-f4 { background-image: url(../img/ranks/rank-4.png?v=1); }

.dl-board-who { min-width: 0; display: flex; flex-direction: column; }
.dl-board-who strong { font-size: 0.95rem; color: var(--theme-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-board-who em { font-style: normal; font-weight: 600; color: var(--theme-gold-text); }
.dl-board-who small { font-size: 0.76rem; color: var(--theme-text-faint); }
.dl-board-streak { white-space: nowrap; font-size: 0.85rem; color: var(--theme-text-muted); }
.dl-board-streak b { font-size: 1.15rem; font-weight: 800; color: var(--theme-gold-text); font-variant-numeric: tabular-nums; }

.dl-board-empty { padding: 1.1rem; text-align: center; font-size: 0.92rem; color: var(--theme-text-muted); border: 1px dashed var(--theme-border); border-radius: 14px; }
.dl-board-me { margin-top: 0.8rem; padding: 0.7rem 0.95rem; border-radius: 12px; font-size: 0.9rem; text-align: center; color: var(--theme-text-body); background: var(--gk-soft, var(--theme-surface-1)); border: 1px solid var(--theme-border-strong); }
.dl-board-me strong { color: var(--theme-gold-text); }
.dl-board-foot { margin: 0.8rem 0 0; font-size: 0.82rem; line-height: 1.6; text-align: center; color: var(--theme-text-faint); }
.dl-board-foot a { color: var(--theme-gold-text); font-weight: 700; }
.dl-board .dl-link-btn { display: inline; margin: 0; font-size: inherit; }

@media (max-width: 768px) {
    /* 1.2rem = đúng lề của các khu giới thiệu/FAQ trên điện thoại */
    .dl-board-section { padding: 0 1.2rem 3rem; }
    .dl-gifts-section { padding: 0 1.2rem 1.5rem; }
}

@media (max-width: 480px) {
    .dl-board-section { padding: 0 1.2rem 2.5rem; }
    .dl-board { padding: 1.2rem 0.85rem 1rem; border-radius: 18px; }
    .dl-board-row { grid-template-columns: 1.4rem 38px minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.55rem 0.7rem; }
    .dl-board-frame { width: 38px; height: 38px; }
    .dl-board-who strong { font-size: 0.9rem; }
}

/* ============================================================
   XEM LẠI THÔNG ĐIỆP NGÀY ĐÃ QUA
   ============================================================ */
/* Lá của ngày đã qua trong dải 7 ngày / lưới 30 ngày là nút bấm được */
button.dl-wd, button.dl-day { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dl-wd.is-open .dl-wd-box, .dl-day.is-open img { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dl-wd.is-open:hover .dl-wd-box, .dl-day.is-open:hover img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); }
.dl-wd.is-open:focus-visible, .dl-day.is-open:focus-visible { outline: 2px solid var(--theme-gold-text); outline-offset: 2px; border-radius: 6px; }
.dl-yesterday .dl-yesterday-open { display: inline; margin: 0.35rem 0 0; text-align: left; }

/* margin:auto + inset:0 — theme reset mất margin mặc định của <dialog> nên hộp dạt góc trên-trái. */
.dl-past { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--theme-border-strong); border-radius: 20px; background: var(--theme-bg-elevated); color: var(--theme-text-primary); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.dl-past::backdrop { background: rgba(5, 4, 10, 0.65); backdrop-filter: blur(3px); }
.dl-past-in { position: relative; padding: 1.4rem 1.4rem 1.2rem; }
.dl-past-x { position: absolute; top: 0.6rem; right: 0.6rem; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--theme-surface-2); color: var(--theme-text-primary); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dl-past-kicker { margin: 0 2.4rem 0.9rem 0; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--theme-gold-text); }
.dl-past-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center; }
.dl-past-card img { width: 96px; height: auto; aspect-ratio: 150 / 256; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.dl-past-state { margin: 0; font-size: 0.8rem; color: var(--theme-text-muted); }
.daily-page .dl-past-card h3 { margin: 0.2rem 0 0; font-size: 1.35rem; line-height: 1.2; color: var(--theme-text-primary); text-transform: none; letter-spacing: 0; }
.dl-past-card h3 small { display: block; font-size: 0.72em; font-weight: 500; color: var(--theme-text-muted); }
.dl-past-kw { display: inline-block; margin: 0.5rem 0 0; padding: 0.15rem 0.7rem; border-radius: 999px; border: 1px solid var(--theme-border-strong); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--theme-gold-text); }
.dl-past-msg { margin: 1.1rem 0 0; padding: 0 0 0 0.9rem; border-left: 3px solid var(--theme-gold-text); font-size: 1rem; line-height: 1.75; color: var(--theme-text-body); }
.dl-past-tips { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.dl-past-tips p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--theme-text-body); }
.dl-past-tips b { margin-right: 0.35rem; }
.dl-past-tips .is-do { color: #4fae7e; }
.dl-past-tips .is-avoid { color: #d06a5a; }
.dl-past-link { display: inline-block; margin-top: 0.9rem; font-size: 0.9rem; font-weight: 700; color: var(--theme-gold-text); }
.dl-past-wait { margin: 1rem 0; text-align: center; color: var(--theme-text-muted); }
.dl-past-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--theme-border); }
.dl-past-nav button:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 480px) {
    .dl-past-in { padding: 1.2rem 1rem 1rem; }
    .dl-past-card { grid-template-columns: 76px minmax(0, 1fr); gap: 0.8rem; }
    .dl-past-card img { width: 76px; }
}

/* ============================================================
   QUÀ ĐIỂM DANH
   ============================================================ */
.dl-gifts-section { position: relative; z-index: 1; padding: 0 2rem 2rem; }
.dl-gifts { width: 100%; max-width: var(--site-w); box-sizing: border-box; margin: 0 auto; padding: 1.5rem 1.4rem 1.2rem; border-radius: 22px; border: 1px solid var(--theme-border-strong); background: var(--theme-bg-elevated); }
.dl-gifts .dl-board-head a { color: var(--theme-gold-text); font-weight: 700; }
.dl-gifts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.dl-gift { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.8rem 0.4rem 0.9rem; border-radius: 14px; border: 1px solid var(--theme-border); background: var(--theme-surface-1); text-align: center; overflow: hidden; }
.dl-gift-day { font-size: 0.78rem; color: var(--theme-text-muted); }
.dl-gift-day b { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 800; color: var(--theme-text-primary); font-variant-numeric: tabular-nums; }
.dl-gift-amt { font-size: 0.95rem; font-weight: 800; color: var(--theme-gold-text); font-variant-numeric: tabular-nums; }
.dl-gift-st { font-size: 0.72rem; line-height: 1.3; color: var(--theme-text-faint); }
.dl-gift.is-next { border-color: var(--theme-gold-text); background: var(--gk-soft, var(--theme-surface-1)); box-shadow: 0 6px 18px rgba(212, 165, 116, 0.18); }
.dl-gift.is-next .dl-gift-st { color: var(--theme-gold-text); font-weight: 700; }
.dl-gift.is-got { opacity: 0.85; }
.dl-gift.is-got .dl-gift-st { color: #4fae7e; font-weight: 700; }
.dl-gift.is-passed .dl-gift-amt { color: var(--theme-text-muted); }
.dl-gift-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--theme-surface-3); }
.dl-gift-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--tarot-gold-light, #e6c18a), var(--tarot-gold, #d4a574)); }
.dl-gifts-foot { margin: 0.9rem 0 0; font-size: 0.82rem; line-height: 1.6; text-align: center; color: var(--theme-text-faint); }

@media (max-width: 640px) {
    .dl-gifts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .dl-gifts-section { padding: 0 1.2rem 1.5rem; }
    .dl-gifts { padding: 1.2rem 0.85rem 1rem; border-radius: 18px; }
}

/* Dịp nhân quà (Trung Thu): nhãn dưới lời dẫn + giá gốc gạch ngang */
.dl-gifts-boost { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--theme-text-body); line-height: 1.5; }
.dl-gifts-boost b { color: var(--theme-gold-text); }
.dl-gift-amt s { display: block; font-size: 0.72rem; font-weight: 600; color: var(--theme-text-muted); }

/* Quà mỗi ngày (phía trên các mốc) */
.dl-gift-daily { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-radius: 16px; border: 1px solid var(--theme-gold-text); background: var(--gk-soft, var(--theme-surface-1)); box-shadow: 0 6px 18px rgba(212, 165, 116, 0.14); }
.dl-gift-daily-main { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.dl-gift-daily-label { flex: 1 1 200px; font-weight: 800; font-size: 1.02rem; color: var(--theme-text-primary); }
.dl-gift-daily-label small { display: block; margin-top: 0.1rem; font-size: 0.8rem; font-weight: 500; color: var(--theme-text-muted); }
.dl-gift-daily .dl-gift-amt { font-size: 1.35rem; }
.dl-gift-daily .dl-gift-st { font-size: 0.8rem; font-weight: 700; color: var(--theme-gold-text); }
.dl-gift-daily.is-got .dl-gift-st { color: #4fae7e; }
.dl-gift-daily-steps { list-style: none; margin: 0.75rem 0 0; padding: 0.7rem 0 0; border-top: 1px dashed var(--theme-border); display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dl-gift-daily-steps li { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--theme-border); color: var(--theme-text-muted); }
.dl-gift-daily-steps li b { color: var(--theme-text-body); font-variant-numeric: tabular-nums; }
.dl-gift-daily-steps li.is-on { border-color: var(--theme-gold-text); color: var(--theme-text-primary); background: rgba(212, 165, 116, 0.12); }
.dl-gift-daily-steps li.is-on b { color: var(--theme-gold-text); }
.dl-gifts-subhead { margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-text-muted); }