/* Landing /uu-dai-tet-2027 — CTKM Đông – Tết 2027 + quay số trúng thưởng (template uu_dai_tet_2027.html).
   Cỡ chữ dùng px/clamp: html của site co về 8px trên mobile (app.css), rem ở đây sẽ quá nhỏ. */

/* Bảng màu của landing — đặt ở :root vì header riêng và thanh cuộn của base nằm ngoài .tet27 (file chỉ nạp ở trang này). */
:root {
    --tet-red: #B5262D;
    --tet-red-dark: #7E1016;
    --tet-red-bright: #D7262E;
    --tet-red-deep: #5C0A0F;
    --tet-gold: #F2C14E;
    --tet-gold-light: #FFE7A3;
    --tet-cream: #FFF7E6;
    --tet-ink: #2B1A12;
    --tv-cursor-color: var(--tet-red); /* con trỏ chuột tùy biến (cursor.css) theo màu Tết */
}
.tet27 {
    color: var(--tet-ink);
    font-size: 16px;
    line-height: 1.55;
    background: var(--tet-cream);
}

.tet27-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── Header riêng của landing: Logo · Liên hệ · Website chính (thay block chrome của base) ── */
.tet27-topbar { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.tet27-topbar-inner { max-width: 1200px; height: 92px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tet27-topbar-logo img { display: block; height: 72px; width: auto; }
.tet27-topbar-items { display: flex; align-items: center; gap: 10px; }
.tet27-topbar-item {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1.5px solid var(--tet-red);
    border-radius: 999px;
    color: var(--tet-red);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}
.tet27-topbar-item:hover { background: var(--tet-red); color: #fff; }
.tet27-topbar-item.is-main { background: var(--tet-red); color: #fff; }
.tet27-topbar-item.is-main:hover { background: var(--tet-red-dark); border-color: var(--tet-red-dark); color: #fff; }
.tet27 section { scroll-margin-top: 110px; }

/* ── Header banner / key visual (chờ ảnh KV 1920×686 của Marketing; tạm dựng bằng CSS) ── */
.tet27-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 12% 20%, rgba(242, 193, 78, .35), transparent 32%),
        radial-gradient(circle at 88% 78%, rgba(242, 193, 78, .28), transparent 34%),
        linear-gradient(135deg, var(--tet-red-deep) 0%, var(--tet-red) 55%, var(--tet-red-dark) 100%);
    aspect-ratio: 1920 / 686;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tet27-hero::before,
.tet27-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 231, 163, .35);
    pointer-events: none;
}
.tet27-hero::before { width: 46vw; height: 46vw; left: -14vw; top: -22vw; }
.tet27-hero::after { width: 38vw; height: 38vw; right: -12vw; bottom: -20vw; }
.tet27-hero-inner { position: relative; z-index: 1; padding: 32px 20px; }
.tet27-hero-eyebrow {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid var(--tet-gold);
    border-radius: 999px;
    color: var(--tet-gold-light);
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tet27-hero h1 {
    margin: 18px 0 10px;
    font-size: clamp(26px, 4.2vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--tet-gold-light);
    text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    text-wrap: balance;
}
.tet27-hero-sub {
    font-size: clamp(17px, 2.1vw, 32px);
    font-weight: 700;
    text-wrap: balance;
}
.tet27-hero-date {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 24px;
    border-radius: 999px;
    background: var(--tet-gold);
    color: var(--tet-red-deep);
    font-size: clamp(15px, 1.5vw, 22px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* Có ảnh KV (hero.image): ảnh thay khối CSS — cao theo ảnh, bỏ nền và 2 vòng trang trí, ảnh không tràn ngang. */
.tet27-hero.has-image { display: block; aspect-ratio: auto; min-height: 0; background: var(--tet-red-deep); }
.tet27-hero.has-image::before, .tet27-hero.has-image::after { content: none; }
.tet27-hero-img { display: block; width: 100%; max-width: 100%; height: auto; }

/* Dải "Bản xem trước — chưa đăng" (chỉ khi ?preview= đúng mã) */
.tet27-preview-strip {
    padding: 10px 16px;
    background: var(--tet-gold);
    color: var(--tet-red-deep);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .04em;
}

/* ── Menu neo ── */
.tet27-anchor { padding: 28px 0 8px; }
.tet27-anchor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tet27-anchor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    background: #fff;
    border: 2px solid var(--tet-red);
    color: var(--tet-red);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(126, 16, 22, .10);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tet27-anchor-card:hover { color: var(--tet-red); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(126, 16, 22, .18); }
.tet27-anchor-title { font-size: clamp(16px, 1.6vw, 21px); font-weight: 800; text-transform: uppercase; line-height: 1.3; }
.tet27-anchor-cta {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--tet-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Tiêu đề section ── */
.tet27-section { padding: 48px 0 24px; }
.tet27-heading { text-align: center; margin-bottom: 28px; }
.tet27-heading h2 {
    margin: 0;
    color: var(--tet-red);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 800;
    text-transform: uppercase;
}
.tet27-heading h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: var(--tet-red);
}

/* ── Banner tổng hợp CTKM (chờ ảnh 03 của Marketing) ── */
.tet27-summary {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(126, 16, 22, .10);
}
.tet27-summary-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 32px;
    background: linear-gradient(160deg, var(--tet-red) 0%, var(--tet-red-deep) 100%);
    color: var(--tet-gold-light);
}
.tet27-summary-visual strong { font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; line-height: 1.15; }
.tet27-summary-visual span { color: #fff; font-weight: 600; }
/* Có ảnh tổng hợp (promo.summary_image): ảnh lấp khung, không cắt (contain trên nền đỏ), không tràn. */
.tet27-summary-visual.has-image { padding: 0; }
.tet27-summary-img { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.tet27-summary-text { padding: 32px; align-self: center; font-size: 17px; }
.tet27-summary-text p { margin: 0; }
.tet27-summary-text p + p { margin-top: 12px; }

/* ── Tab nội dung (CTKM + quay số) ── */
.tet27-tabs { display: grid; gap: 12px; margin-top: 24px; }
.tet27-tabs.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tet27-tabs.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-left: auto; margin-right: auto; }
/* Số tab CTKM do Marketing chọn (1–6, lớp cols-<n>): 1 tab hẹp ở giữa; 3, 5 một hàng; 6 tab hai hàng × 3. */
.tet27-tabs.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-left: auto; margin-right: auto; }
.tet27-tabs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tet27-tabs.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tet27-tabs.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tet27-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 12px 16px;
    border: 2px solid var(--tet-red);
    border-radius: 14px;
    background: #fff;
    color: var(--tet-red);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
/* Dòng phụ của tab (vế sau tên chương trình) — nhỏ, nhẹ hơn dòng chính */
.tet27-tab-sub { font-size: .82em; font-weight: 600; opacity: .85; }
.tet27-tab:hover { background: #FDEBEC; }
.tet27-tab[aria-expanded="true"] { background: var(--tet-red); color: #fff; }
.tet27-tab:focus-visible { outline: 3px solid var(--tet-gold); outline-offset: 2px; }
.tet27-panel {
    margin-top: 16px;
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    border-top: 4px solid var(--tet-red);
    box-shadow: 0 8px 24px rgba(126, 16, 22, .08);
}
.tet27-panel[hidden] { display: none; }
.tet27-panel h3 { margin: 0 0 16px; color: var(--tet-red); font-size: 20px; font-weight: 800; }
.tet27-panel h4 { margin: 24px 0 10px; color: #1F497D; font-size: 17px; font-weight: 800; }
.tet27-panel ul { margin: 0; padding-left: 22px; }
.tet27-panel li + li { margin-top: 6px; }
/* Ảnh Marketing chèn trong nội dung (TSP › PAGE) — co theo khung / ô bảng, không tràn trên mobile. */
.tet27-panel img, .tet27-summary-text img { max-width: 100%; height: auto; vertical-align: middle; }
.tet27-muted { color: #6b5a50; }

/* Bảng mức giảm "Đặt sớm săn hời" — cuộn ngang trên màn hẹp. */
.tet27-table-scroll { position: relative; overflow-x: auto; border-radius: 12px; }
.tet27-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.tet27-table th, .tet27-table td { padding: 14px 12px; border: 1px solid #fff; }
.tet27-table thead th { background: #7E0A0A; color: #fff; font-weight: 700; }
.tet27-table thead tr:nth-child(2) th { background: #EFE7E4; color: #7E0A0A; font-weight: 600; }
.tet27-table tbody th { background: #FFF6E3; font-weight: 800; color: var(--tet-ink); }
.tet27-table tbody td { background: #FFF6E3; font-weight: 600; }
.tet27-table tbody tr:nth-child(2) th, .tet27-table tbody tr:nth-child(2) td { background: #EFE7E4; }
/* Bảng mã tour (Nhật, Trung Hoa): ô gộp nhiều dòng nên bỏ sọc xen kẽ — cột mã nền kem, ô ưu đãi nền trắng ngà. */
.tet27-table.is-flat tbody tr:nth-child(n) th { background: #FFF6E3; font-weight: 700; }
.tet27-table.is-flat tbody tr:nth-child(n) td { background: #EFE7E4; }
.tet27-table-codes { max-width: 340px; text-align: left; line-height: 1.6; }

/* ── Quay số: đếm ngược + vòng quay ── */
.tet27-draw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.tet27-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--tet-red) 0%, var(--tet-red-deep) 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 32px rgba(126, 16, 22, .22);
}
.tet27-box-label { color: var(--tet-gold-light); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tet27-box-title { margin: 4px 0 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.25; }
.tet27-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tet27-countdown-cell { padding: 14px 6px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 231, 163, .45); text-align: center; }
.tet27-countdown-num { display: block; color: var(--tet-gold-light); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tet27-countdown-unit { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tet27-countdown-done { padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: var(--tet-gold-light); font-size: 18px; font-weight: 800; text-align: center; }
.tet27-countdown-done[hidden], .tet27-countdown[hidden] { display: none; }
.tet27-schedule { margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(0, 0, 0, .18); }
.tet27-schedule strong { color: var(--tet-gold-light); }
.tet27-fb-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--tet-red-bright);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease;
}
.tet27-fb-btn:hover { color: #fff; transform: translateY(-2px); }

/* Đồng hồ trang trí cuối box đếm ngược: chiếm phần trống còn lại (flex: 1) và nằm giữa. Mặt kem viền vàng, 12 vạch
   đỏ (conic-gradient che bằng mask chỉ còn vành ngoài), kim đỏ quay chậm; giảm chuyển động → đứng yên ở 10:10. */
.tet27-clock-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding-top: 4px; }
.tet27-clock {
    --clock: 132px;
    position: relative;
    width: var(--clock);
    height: var(--clock);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--tet-cream) 70%);
    border: calc(var(--clock) * .07) solid var(--tet-gold);
    box-shadow: 0 0 0 3px rgba(255, 231, 163, .35), 0 10px 24px rgba(0, 0, 0, .3);
}
.tet27-clock-ticks {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: repeating-conic-gradient(from -2deg, var(--tet-red) 0 4deg, transparent 4deg 30deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 74%, #000 75%);
    mask: radial-gradient(circle closest-side, transparent 74%, #000 75%);
}
.tet27-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    border-radius: 999px;
    background: var(--tet-red);
    transform-origin: 50% 100%;
}
.tet27-clock-hand.is-hour { width: 6px; height: 26%; margin-left: -3px; transform: rotate(-60deg); animation: tet27-clock-spin 60s linear infinite; }
.tet27-clock-hand.is-min { width: 4px; height: 36%; margin-left: -2px; background: var(--tet-red-deep); transform: rotate(60deg); animation: tet27-clock-spin 5s linear infinite; }
.tet27-clock-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--tet-gold);
    border: 2px solid var(--tet-red-deep);
}
@keyframes tet27-clock-spin { to { transform: rotate(var(--end, 300deg)); } }
.tet27-clock-hand.is-hour { --end: 300deg; }
.tet27-clock-hand.is-min { --end: 420deg; }
@media (prefers-reduced-motion: reduce) {
    .tet27-clock-hand { animation: none; }
}

.tet27-wheel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(126, 16, 22, .12);
    text-align: center;
}
.tet27-wheel-card .tet27-box-label { color: var(--tet-red); }
.tet27-wheel {
    --wheel: min(400px, 78vw);
    position: relative;
    width: var(--wheel);
    height: var(--wheel);
    margin-top: 14px;
    margin-bottom: calc(var(--wheel) * .16); /* chỗ cho chân linh vật thò xuống dưới vòng */
}
/* Linh vật: anh em của .tet27-wheel-disc nên đứng yên khi đĩa quay; góc trái dưới, đầu/vây chồng lên mép vòng
   nhưng nằm dưới ảnh quà ô trái-dưới, không chạm kim và nút giữa. Chỉ lấn trái .08 vòng để vừa khung trên mobile. */
.tet27-wheel-mascot {
    position: absolute;
    z-index: 3;
    left: calc(var(--wheel) * -.08);
    bottom: calc(var(--wheel) * -.16);
    width: calc(var(--wheel) * .34);
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
}
.tet27-wheel-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: calc(var(--wheel) * .035) solid var(--tet-gold);
    box-shadow: 0 0 0 4px var(--tet-red), 0 14px 30px rgba(126, 16, 22, .3);
    background: conic-gradient(
        var(--tet-red) 0 45deg, var(--tet-cream) 45deg 90deg,
        var(--tet-red) 90deg 135deg, var(--tet-cream) 135deg 180deg,
        var(--tet-red) 180deg 225deg, var(--tet-cream) 225deg 270deg,
        var(--tet-red) 270deg 315deg, var(--tet-cream) 315deg 360deg);
}
/* Mỗi ô: điểm neo ở tâm, xoay theo --deg; ảnh quà tròn đặt trên bán kính, giữa ô.
   Hình học (đơn vị = --wheel): tâm ảnh cách tâm vòng .32, bán kính ảnh .10 → mép ô 45° cách tâm ảnh
   .32 × sin 22.5° ≈ .122 (> .10, không lấn ô bên), mép ngoài .42 (< .465 trong viền vàng), mép trong .22
   (> nút giữa .10). Padding ~9% để ảnh chữ nhật (contain) nằm trọn trong vòng tròn, không bị cắt góc. */
.tet27-wheel-slice { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--deg)); }
.tet27-wheel-item {
    position: absolute;
    left: calc(var(--wheel) * -.10);
    top: calc(var(--wheel) * -.42);
    width: calc(var(--wheel) * .20);
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: calc(var(--wheel) * .018);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.tet27-wheel-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--wheel) * .2);
    height: calc(var(--wheel) * .2);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--tet-gold-light), var(--tet-gold) 60%, #C9931F);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    color: var(--tet-red-deep);
    font-size: clamp(10px, calc(var(--wheel) * .032), 14px);
    font-weight: 800;
    line-height: 1.1;
}
.tet27-wheel-pointer {
    position: absolute;
    left: 50%;
    top: calc(var(--wheel) * -.045);
    z-index: 2;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: calc(var(--wheel) * .045) solid transparent;
    border-right: calc(var(--wheel) * .045) solid transparent;
    border-top: calc(var(--wheel) * .085) solid var(--tet-red-deep);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* ── Cơ cấu giải thưởng (luôn hiện, ảnh không cắt) ── */
.tet27-prizes { margin-top: 32px; padding: 28px; border-radius: 20px; background: linear-gradient(180deg, #fff 0%, #FFF1D6 100%); border: 2px solid var(--tet-red); }
.tet27-prizes-title { margin: 0 0 20px; color: var(--tet-red); font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; text-align: center; text-transform: uppercase; }
.tet27-prize-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tet27-prize { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(126, 16, 22, .10); }
.tet27-prize img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; padding: 8px; }
.tet27-prize-body { flex: 1; padding: 12px 14px 16px; border-top: 3px solid var(--tet-red); text-align: center; }
.tet27-prize-prefix { display: block; color: #8a6d5e; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tet27-prize-name { display: block; margin-top: 4px; color: var(--tet-red); font-size: 17px; font-weight: 800; line-height: 1.3; }
.tet27-prizes-note { margin: 18px 0 0; text-align: center; font-weight: 600; }

.tet27-end { height: 48px; }

/* ── Tablet / mobile ── */
@media (max-width: 991.98px) {
    .tet27-hero { aspect-ratio: auto; min-height: 0; }
    .tet27-hero-inner { padding: 48px 16px; }
    .tet27-summary { grid-template-columns: 1fr; }
    .tet27-draw { grid-template-columns: 1fr; }
    .tet27-tabs.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 3, 5, 6 tab → 2 cột như cols-4; số lẻ thì tab cuối trải hết hàng. */
    .tet27-tabs.cols-3, .tet27-tabs.cols-5, .tet27-tabs.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tet27-tabs.cols-3 > :last-child, .tet27-tabs.cols-5 > :last-child { grid-column: 1 / -1; }
    .tet27-prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .tet27 { font-size: 15px; }
    .tet27-wrap { padding: 0 16px; }
    .tet27-topbar-inner { height: 70px; padding: 0 12px; gap: 8px; }
    .tet27-topbar-logo img { height: 54px; }
    .tet27-topbar-items { gap: 6px; }
    .tet27-topbar-item { padding: 7px 10px; font-size: 12px; border-width: 1px; }
    .tet27-anchor-grid { grid-template-columns: 1fr; gap: 10px; }
    .tet27-anchor-card { padding: 14px 16px; }
    .tet27-section { padding: 36px 0 16px; }
    .tet27-summary-visual, .tet27-summary-text, .tet27-panel, .tet27-box, .tet27-prizes { padding: 20px 16px; }
    .tet27-summary-text { font-size: 15px; }
    .tet27-tab { min-height: 56px; font-size: 15px; }
    .tet27-countdown { gap: 6px; }
    .tet27-countdown-cell { padding: 10px 2px; }
    .tet27-countdown-unit { font-size: 11px; letter-spacing: .02em; }
    .tet27-fb-btn { align-self: stretch; justify-content: center; }
    .tet27-clock { --clock: 104px; }
    .tet27-prize-grid { gap: 10px; }
    .tet27-prize-name { font-size: 14px; }
    .tet27-prize-body { padding: 10px 8px 12px; }
}

/* ── Hoa mai trên viền các nút header: JS tạo vài .tet27-mai trong mỗi nút; mỗi chu kỳ bông hoa nở (phóng to) rồi
   thu nhỏ biến mất, hết chu kỳ JS đổi vị trí trên viền + góc xoay ngẫu nhiên. Lớp ngoài giữ vị trí / góc xoay (không
   animate, đổi lúc hoa đang ẩn), lớp trong <i> animate scale + opacity. Không chặn click; tâm hoa nằm đúng trên viền
   nên chỉ nửa bông vào phần đệm của nút, không chạm chữ. prefers-reduced-motion → ẩn. ── */
.tet27-topbar-item { position: relative; }
.tet27-mai {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 0%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--k, 1));
}
.tet27-mai i {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../../assets/imgs/uudaitet2027/hoa-mai.svg") center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(126, 16, 22, .35));
    opacity: 0;
    transform: scale(0);
    animation: tet27-mai-pop var(--dur, 2.6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes tet27-mai-pop {
    0% { opacity: 0; transform: scale(0) rotate(-90deg); }
    30% { opacity: 1; transform: scale(1.15) rotate(0); }
    55% { opacity: 1; transform: scale(.9) rotate(20deg); }
    80%, 100% { opacity: 0; transform: scale(0) rotate(60deg); }
}
@media (max-width: 575.98px) {
    .tet27-mai { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tet27-mai { display: none; }
}

/* ── Thanh cuộn tùy biến của base (#tvScrollbar, chỉ desktop) trên trang này: thumb vàng chủ đạo, icon máy bay
   thay bằng hoa mai (JS đổi src + xoay theo vị trí cuộn). Các trang khác giữ thanh xanh + máy bay. ── */
.tv-scrollbar-thumb { background: var(--tet-gold); }
.tv-scrollbar-thumb:hover, .tv-scrollbar.dragging .tv-scrollbar-thumb { background: #D9A21E; }
.tv-scrollbar-plane.is-mai { filter: drop-shadow(0 2px 4px rgba(126, 16, 22, .35)); }