/* ====================================================================
   SchoolCarto VR Tour — theme hoạt hình "bản đồ phiêu lưu"
   Đại tu 2026-07-10
   Bảng màu: trời xanh #AEE1FF · mực navy #113A73 · nắng #FFC93A
             lá #2FB673 · phượng #F04E3E · kem #FFF9EC
   Font: Baloo 2 (display) + Be Vietnam Pro (body)
   Nguyên tắc chống "mùi AI": sticker nghiêng lệch nhau, nút bấm lún
   xuống thay vì phóng to, đường nét đứt kiểu bản đồ, KHÔNG gradient
   tím, KHÔNG icon mảnh rải đều, nhịp bất đối xứng có chủ đích.
==================================================================== */

:root {
    /* nền trời */
    --sky: #AEE1FF;
    --sky-deep: #8CCDF8;
    --sky-soft: #D9F1FF;

    /* mực & nét vẽ */
    --ink: #113A73;
    --ink-soft: #3D608F;
    --line: #16437F;

    /* màu chính */
    --blue: #1D6FD6;
    --blue-deep: #0E4DA8;
    --blue-pale: #E8F4FF;

    /* nắng (nút chính) */
    --sun: #FFC93A;
    --sun-deep: #F2A81D;
    --sun-shade: #C97F00;

    /* accent */
    --leaf: #2FB673;
    --leaf-soft: #D6F5E4;
    --flame: #F04E3E;
    --flame-soft: #FFE3DE;
    --pink: #FF8FB5;
    --cream: #FFF9EC;
    --white: #FFFFFF;

    /* tương thích code cũ (main.js dùng các biến này cho gallery) */
    --klein: #1D6FD6;
    --klein-600: #0E4DA8;
    --gold: #FFC93A;
    --hpd-red: #F04E3E;
    --mint: #2FB673;

    --radius: 20px;
    --radius-lg: 28px;
    --border: 3px solid var(--line);
    --border-thin: 2.5px solid var(--line);
    --shadow-sticker: 4px 5px 0 rgba(22, 67, 127, .85);
    --shadow-sticker-sm: 3px 3px 0 rgba(22, 67, 127, .85);
    --shadow-lift: 6px 8px 0 rgba(22, 67, 127, .85);

    --font-display: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
    --font-body: "Be Vietnam Pro", "Baloo 2", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    line-height: 1.6;
    /* Trời xanh + doodle mây / sao / đường nét đứt vẽ tay */
    background-color: var(--sky);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M60 96c8-18 34-20 44-6 14-12 36-2 34 14-2 14-18 18-30 16-16 8-42-4-48-24z' transform='rotate(-4 82 100)'/%3E%3Cpath d='M420 420c8-18 34-20 44-6 14-12 36-2 34 14-2 14-18 18-30 16-16 8-42-4-48-24z' transform='rotate(3 442 424)'/%3E%3Cpath d='M300 180l7 16 16 3-12 12 3 17-14-9-15 8 4-16-12-13 17-2z'/%3E%3Cpath d='M110 350l5 11 11 2-8 9 2 12-10-6-10 5 3-11-9-9 12-1z' transform='rotate(14 110 350)'/%3E%3Ccircle cx='480' cy='140' r='5'/%3E%3Ccircle cx='190' cy='500' r='4'/%3E%3Cpath d='M486 260q14 12 0 26'/%3E%3Cpath d='M40 230q-12 10 0 22'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-dasharray='2 12' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M170 60q80 50 40 130t60 150'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 560px 560px;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.18;
    margin: 0 0 .4em;
    letter-spacing: .01em;
}

p { margin: 0 0 .8em; }

a { color: var(--blue-deep); }

button, select { font-family: inherit; }

:focus-visible {
    outline: 3px solid var(--blue-deep);
    outline-offset: 2px;
    border-radius: 6px;
}

.container {
    width: min(1160px, 100% - 40px);
    margin-inline: auto;
}

/* ---------- Song ngữ ---------- */
.i18n-en {
    display: block;
    margin-top: 3px;
    font-size: .72em;
    font-style: italic;
    font-weight: 600;
    line-height: 1.35;
    opacity: .72;
}

.site-nav .i18n-en,
.btn .i18n-en,
.badge .i18n-en { font-size: .68em; }

/* ---------- Thanh tiến trình cuộn ---------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 5px;
    z-index: 3000;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(90deg,
        var(--flame) 0 14px, var(--sun) 14px 28px, var(--leaf) 28px 42px, var(--blue) 42px 56px);
    border-radius: 0 4px 4px 0;
}

/* ---------- Chuyển trang ---------- */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: radial-gradient(130% 130% at 50% 42%, var(--sky-soft) 0%, var(--sky) 40%, var(--blue) 130%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}
.page-transition::after {
    content: "✈";
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-size: 54px;
    color: var(--blue-deep);
}
.page-transition.is-active {
    opacity: 1;
    pointer-events: all;
}
body.page-anim main {
    animation: pageEnter .55s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ====================================================================
   HEADER — thanh trắng bo tròn nổi trên nền trời
==================================================================== */
.site-header {
    position: sticky;
    top: 10px;
    z-index: 2000;
    padding-inline: 14px;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--white);
    border: var(--border);
    border-radius: 999px;
    padding: 8px 12px 8px 10px;
    box-shadow: var(--shadow-sticker);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    padding-left: 4px;
}
.brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 50%;
    border: var(--border-thin);
    background: var(--blue-pale);
    padding: 3px;
}
.brand-text { line-height: 1.05; }
.brand-text strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--blue-deep);
}
.brand-text small {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--flame);
}

.site-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.site-nav a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    border: 2.5px solid transparent;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.site-nav a:hover { background: var(--blue-pale); transform: rotate(-1.5deg); }
.site-nav a.is-active {
    background: var(--sun);
    border-color: var(--line);
    box-shadow: 0 3px 0 var(--sun-shade);
}

.language-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: var(--border-thin);
    border-radius: 999px;
    background: var(--blue-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23113A73' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--ink);
    font-weight: 700;
    font-size: .86rem;
    padding: 7px 32px 7px 14px;
    cursor: pointer;
}

.partner-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--cream);
    border: var(--border-thin);
    border-radius: 999px;
}
.partner-logos img,
.footer-logos img {
    height: 30px;
    width: auto;
    object-fit: contain;
}
.partner-logos .logo-bdhvs { height: 26px; }

/* ====================================================================
   NÚT & NHÃN
==================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    text-decoration: none;
    border-radius: 999px;
    padding: 12px 26px;
    border: var(--border);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
/* Nút vàng chunky — hover thì "bấm lún" thay vì phóng to */
.btn-primary {
    background: var(--sun);
    color: var(--ink);
    box-shadow: 0 5px 0 var(--sun-shade), var(--shadow-sticker-sm);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--sun-shade), 2px 2px 0 rgba(22, 67, 127, .85);
}
.btn-primary::after {
    content: "›";
    font-size: 1.2em;
    line-height: 0;
    transform: translateY(-1px);
}
.btn-disabled {
    background: #E3E9F2;
    color: var(--ink-soft);
    box-shadow: none;
    cursor: not-allowed;
    border-style: dashed;
}
.btn-disabled::after { content: none; }

.badge {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    background: var(--leaf-soft);
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: 999px;
    padding: 3px 12px;
    transform: rotate(-1.5deg);
}

.badge-pulse {
    position: absolute;
    top: -12px;
    right: 14px;
    z-index: 3;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--white);
    background: var(--flame);
    border: 2.5px solid var(--line);
    border-radius: 10px 14px 12px 6px;
    padding: 4px 12px;
    transform: rotate(6deg);
    box-shadow: var(--shadow-sticker-sm);
    animation: stickerBob 2.6s ease-in-out infinite;
}

@keyframes stickerBob {
    0%, 100% { transform: rotate(6deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(-4px); }
}

.eyebrow,
.section-kicker,
.guide-kicker {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--flame);
    border: 2.5px solid var(--line);
    border-radius: 8px 16px 8px 16px;
    padding: 4px 14px;
    transform: rotate(-2deg);
    box-shadow: var(--shadow-sticker-sm);
    margin: 0 0 14px;
}

.section-heading h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 800;
    color: var(--blue-deep);
}
.section-heading.centered { text-align: center; }
.section-heading.centered .section-kicker { transform: rotate(2deg); }

/* ====================================================================
   HERO
==================================================================== */
.hero-section {
    padding: clamp(30px, 5vw, 64px) 0 10px;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.hero-title {
    font-size: clamp(2.6rem, 6.2vw, 4.4rem);
    font-weight: 800;
    line-height: .98;
    margin: 14px 0 6px;
}
.hero-title-line {
    display: block;
    color: var(--white);
    -webkit-text-stroke: 2px var(--line);
    paint-order: stroke fill;
    text-shadow: 4px 5px 0 rgba(22, 67, 127, .8);
    transform: rotate(-1.2deg);
}
.hero-title-line + .hero-title-line {
    color: var(--sun);
    transform: rotate(.8deg);
    margin-left: .35em;
}

.hero-subtitle {
    max-width: 560px;
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink);
    background: rgba(255, 255, 255, .55);
    border-radius: 14px;
    padding: 6px 10px;
}
.hero-subtitle-en {
    font-size: .95rem;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 2px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 20px 0 18px;
}
.hero-actions .btn-primary {
    font-size: 1.14rem;
    padding: 14px 32px;
}

/* hàng sticker hashtag — mỗi cái một màu, nghiêng lệch nhau */
.hero-sticker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hero-sticker-row span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    border: 2.5px solid var(--line);
    border-radius: 999px;
    padding: 4px 13px;
    background: var(--white);
    box-shadow: var(--shadow-sticker-sm);
}
.hero-sticker-row span:nth-child(4n+1) { background: var(--sun);        transform: rotate(-2.5deg); }
.hero-sticker-row span:nth-child(4n+2) { background: var(--leaf-soft);  transform: rotate(1.6deg); }
.hero-sticker-row span:nth-child(4n+3) { background: var(--flame-soft); transform: rotate(-1deg); }
.hero-sticker-row span:nth-child(4n+4) { background: var(--white);      transform: rotate(2.2deg); }

/* Ảnh hero: khung polaroid dán băng keo, huy hiệu 360 */
.hero-media {
    position: relative;
    margin: 0;
    transform: rotate(1.6deg);
}
.hero-media img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: 10px;
    box-shadow: var(--shadow-lift);
}
/* băng keo vàng góc trên */
.hero-media::before {
    content: "";
    position: absolute;
    top: -16px;
    right: 12%;
    width: 110px;
    height: 34px;
    background: rgba(255, 214, 90, .85);
    border: 2px dashed rgba(201, 127, 0, .55);
    transform: rotate(8deg);
    z-index: 2;
    border-radius: 3px;
}
/* huy hiệu 360° VR */
.hero-media::after {
    content: "360° VR";
    position: absolute;
    left: -20px;
    bottom: 30px;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--white);
    background: var(--blue-deep);
    border: var(--border);
    border-radius: 18px 22px 18px 4px;
    padding: 10px 18px;
    transform: rotate(-7deg);
    box-shadow: var(--shadow-sticker);
    animation: stickerBob 3.4s ease-in-out infinite;
}

/* ghim bản đồ nhún nhảy trên ảnh hero */
.pin-mascot {
    position: absolute;
    top: -26px;
    left: 8%;
    width: 46px;
    height: 60px;
    z-index: 3;
    animation: pinHop 2.8s ease-in-out infinite;
}
.pin-mascot span {
    display: block;
    width: 44px;
    height: 44px;
    background: var(--leaf);
    border: var(--border-thin);
    border-radius: 50% 50% 50% 6%;
    transform: rotate(-45deg);
    position: relative;
    box-shadow: var(--shadow-sticker-sm);
}
.pin-mascot span::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--white);
    border: 2.5px solid var(--line);
}
@keyframes pinHop {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(-10px); }
    60%      { transform: translateY(0); }
    70%      { transform: translateY(-4px); }
    80%      { transform: translateY(0); }
}

/* ====================================================================
   MARQUEE — dải vé sự kiện chạy ngang
==================================================================== */
.marquee {
    overflow: hidden;
    margin: 46px 0 30px;
    border-block: var(--border-thin);
    background: var(--white);
    padding: 12px 0;
    transform: rotate(-.6deg) scale(1.02);
    box-shadow: var(--shadow-sticker-sm);
}
.marquee-track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    animation: marquee 22s linear infinite;
    animation-play-state: paused;
}
.marquee.is-visible .marquee-track { animation-play-state: running; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    white-space: nowrap;
    color: var(--blue-deep);
}
.marquee-track span:nth-child(6n+3) { color: var(--flame); }
.marquee-track span:nth-child(6n+5) { color: var(--leaf); }
.marquee-track i {
    width: 12px;
    height: 12px;
    flex: none;
    background: var(--sun);
    border: 2px solid var(--line);
    border-radius: 3px;
    transform: rotate(24deg);
}
@keyframes marquee {
    to { transform: translateX(-50%); }
}

/* ---------- Đường phân đoạn: lộ trình nét đứt ---------- */
.route-divider {
    position: relative;
    height: 60px;
    margin: 8px auto 4px;
    width: min(700px, 84%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='60' viewBox='0 0 700 60'%3E%3Cpath d='M8 46 Q 180 6 350 34 T 692 18' fill='none' stroke='%2316437F' stroke-width='3.5' stroke-dasharray='1 14' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.route-divider span,
.route-divider b {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2.5px solid var(--line);
    border-radius: 50%;
    background: var(--sun);
}
.route-divider span { left: 0; top: 38px; background: var(--flame); }
.route-divider b { right: 0; top: 10px; background: var(--leaf); }
.route-divider i {
    position: absolute;
    left: 49%;
    top: 20px;
    width: 12px;
    height: 12px;
    background: var(--white);
    border: 2.5px solid var(--line);
    border-radius: 50%;
}

/* ====================================================================
   GUIDE PANEL — "hành trình khám phá": số bước + mũi tên nét đứt
==================================================================== */
.guide-panel {
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 3.4vw, 40px);
    margin: 26px auto 44px;
    box-shadow: var(--shadow-lift);
    position: relative;
}
/* băng keo dán góc panel */
.guide-panel::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 7%;
    width: 92px;
    height: 28px;
    background: rgba(140, 205, 248, .8);
    border: 2px dashed rgba(14, 77, 168, .4);
    transform: rotate(-5deg);
    border-radius: 3px;
}
.guide-panel h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    color: var(--blue-deep);
    max-width: 640px;
}
.guide-lead {
    color: var(--ink-soft);
    max-width: 560px;
}

.guide-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.6vw, 34px);
    margin-top: 22px;
    counter-reset: guidestep;
}
.guide-item {
    position: relative;
    counter-increment: guidestep;
    padding-top: 6px;
}
/* mũi tên nét đứt nối các bước */
.guide-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px;
    right: -30px;
    width: 34px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14' viewBox='0 0 34 14'%3E%3Cpath d='M2 8 Q 14 2 26 7' fill='none' stroke='%2316437F' stroke-width='2.6' stroke-dasharray='1 7' stroke-linecap='round'/%3E%3Cpath d='M22 2l6 5-7 4' fill='none' stroke='%2316437F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.guide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding-inline: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
    border: var(--border-thin);
    border-radius: 50%;
    box-shadow: var(--shadow-sticker-sm);
    margin-bottom: 10px;
    position: relative;
}
/* nhãn số bước nhỏ */
.guide-icon::after {
    content: "0" counter(guidestep);
    position: absolute;
    top: -10px;
    right: -14px;
    font-size: .68rem;
    font-weight: 800;
    background: var(--ink);
    color: var(--white);
    border-radius: 999px;
    padding: 1px 7px;
    border: 2px solid var(--white);
}
.guide-icon-blue { background: var(--sky-soft); transform: rotate(-3deg); }
.guide-icon-gold { background: var(--sun); transform: rotate(2deg); }
.guide-icon-red  { background: var(--flame-soft); transform: rotate(-2deg); }
.guide-icon-pink { background: var(--pink); transform: rotate(3deg); }
.guide-item strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.04rem;
    color: var(--blue-deep);
}
.guide-item p {
    margin: 4px 0 0;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* ====================================================================
   BẢN ĐỒ
==================================================================== */
.map-section { margin-bottom: clamp(44px, 6vw, 80px); }

.map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.selector-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .84rem;
    color: var(--ink-soft);
}
.map-selector {
    appearance: none;
    -webkit-appearance: none;
    border: var(--border-thin);
    border-radius: 14px;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23113A73' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    padding: 10px 40px 10px 16px;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(22, 67, 127, .55);
    transition: transform .15s ease, box-shadow .15s ease;
}
.map-selector:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(22, 67, 127, .55); }

.map-container {
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-lift);
    transform: rotate(-.4deg);
}
.map-stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: var(--border-thin);
}
.map-image { width: 100%; height: auto; }
.map-pins { position: absolute; inset: 0; }

/* Ghim bản đồ: giọt nước xanh lá, chọn thì vàng + nhảy */
.map-pin {
    position: absolute;
    width: 34px;
    height: 34px;
    margin: -30px 0 0 -17px;
    padding: 0;
    background: var(--leaf);
    border: var(--border-thin);
    border-radius: 50% 50% 50% 8%;
    transform: rotate(-45deg);
    cursor: pointer;
    transition: background .2s ease;
    box-shadow: var(--shadow-sticker-sm);
}
.map-pin::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 50%;
}
.map-pin:hover,
.map-pin:focus-visible,
.map-pin.is-active {
    background: var(--sun);
    animation: pinBounce .5s ease;
}
.map-pin::after {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%) rotate(45deg);
    transform-origin: bottom left;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    color: var(--ink);
    background: var(--white);
    border: 2.5px solid var(--line);
    border-radius: 12px 14px 14px 2px;
    padding: 5px 12px;
    box-shadow: var(--shadow-sticker-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.map-pin:hover::after,
.map-pin:focus-visible::after,
.map-pin.is-active::after { opacity: 1; }

@keyframes pinBounce {
    0%   { transform: rotate(-45deg) translate(0, 0); }
    40%  { transform: rotate(-45deg) translate(-7px, -7px); }
    70%  { transform: rotate(-45deg) translate(2px, 2px); }
    100% { transform: rotate(-45deg); }
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 12px 6px 2px;
    font-size: .88rem;
}
.map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.dot {
    width: 15px;
    height: 15px;
    border: 2.5px solid var(--line);
    border-radius: 50% 50% 50% 8%;
    transform: rotate(-45deg);
    flex: none;
}
.dot-school { background: var(--leaf); }
.dot-active { background: var(--sun); }
.map-hint {
    margin-left: auto;
    color: var(--ink-soft);
    font-style: italic;
}

/* ====================================================================
   DANH SÁCH TRƯỜNG — card sticker, mỗi card một tính cách
==================================================================== */
.schools-section { margin-bottom: clamp(40px, 6vw, 72px); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: clamp(18px, 2.6vw, 30px);
    margin-top: 26px;
}

.school-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    box-shadow: var(--shadow-sticker);
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-grid .school-card:nth-child(3n+1) { transform: rotate(-1.1deg); }
.card-grid .school-card:nth-child(3n+2) { transform: rotate(.7deg) translateY(10px); }
.card-grid .school-card:nth-child(3n)   { transform: rotate(1.3deg); }
.school-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: var(--shadow-lift);
}
.school-card > img,
.school-card-placeholder {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: var(--border-thin);
    border-radius: var(--radius);
}
.school-card-placeholder {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(-45deg, var(--sky-soft) 0 18px, var(--white) 18px 36px);
}
.school-card-placeholder span {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink-soft);
    background: var(--white);
    border: 2px dashed var(--ink-soft);
    border-radius: 999px;
    padding: 4px 16px;
    transform: rotate(-3deg);
}
.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 20px;
    gap: 6px;
}
.card-content .badge { align-self: flex-start; }
.card-content h3 {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--blue-deep);
    margin: 2px 0;
}
.card-content > p {
    font-size: .92rem;
    color: var(--ink-soft);
    flex: 1;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.card-meta span {
    font-size: .74rem;
    font-weight: 600;
    border: 2px dashed var(--ink-soft);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 2px 10px;
    background: var(--cream);
}
.school-card.is-placeholder { opacity: .82; }
.school-card .btn { align-self: flex-start; }

/* đèn rọi vàng theo con trỏ (main.js đặt --mx/--my) */
.spotlight { position: relative; }
.spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(210px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 90, .18), transparent 65%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }

/* ---------- Dải trường chạy ngang cuối trang ---------- */
.school-strip-section {
    padding: 6px 0 clamp(48px, 7vw, 92px);
    overflow: hidden;
}
.school-strip {
    overflow: hidden;
    padding: 14px 0;
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.school-strip-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    width: max-content;
    padding-inline: 10px;
    animation: schoolStrip 34s linear infinite;
    animation-play-state: paused;
}
.school-strip.is-visible .school-strip-track { animation-play-state: running; }
.school-strip:hover .school-strip-track { animation-play-state: paused; }
.school-tile {
    position: relative;
    flex: 0 0 auto;
    width: clamp(230px, 26vw, 330px);
    aspect-ratio: 16 / 10;
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sticker-sm);
    text-decoration: none;
    transform: rotate(-.8deg);
    transition: transform .3s ease, box-shadow .3s ease;
}
.school-tile:nth-child(even) { transform: rotate(.9deg); }
.school-tile:hover,
.school-tile:focus-visible {
    transform: translateY(-5px) rotate(0);
    box-shadow: var(--shadow-sticker);
    outline: none;
}
.school-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.school-tile span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 14px 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .92rem;
    line-height: 1.25;
    color: var(--white);
    background: linear-gradient(transparent, rgba(17, 58, 115, .92));
}
@keyframes schoolStrip {
    to { transform: translateX(-50%); }
}

/* ====================================================================
   FOOTER — tấm bưu thiếp navy có viền răng cưa tem thư
==================================================================== */
.site-footer {
    background: var(--ink);
    color: var(--white);
    position: relative;
    padding: clamp(30px, 4.5vw, 52px) 0 26px;
    margin-top: 16px;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background-image: radial-gradient(circle at 13px 0, transparent 9px, var(--ink) 9.5px);
    background-size: 26px 12px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr .9fr;
    gap: clamp(20px, 3.5vw, 48px);
    align-items: start;
}
.footer-inner strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    display: block;
    margin-bottom: 8px;
    color: var(--sun);
}
.footer-inner p {
    font-size: .88rem;
    color: #C8DCF5;
    margin: 0 0 6px;
}
.footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: var(--border-thin);
    border-radius: 16px;
    padding: 10px 14px;
    transform: rotate(-1.2deg);
    box-shadow: var(--shadow-sticker-sm);
    justify-self: start;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .9rem;
}
.footer-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    border-bottom: 2px dashed rgba(255, 255, 255, .5);
    transition: border-color .2s ease, color .2s ease;
}
.footer-links a:hover { color: var(--sun); border-color: var(--sun); }
.footer-links span { color: #9DBBE0; font-size: .8rem; margin-top: 6px; }

/* ====================================================================
   TRANG THÔNG TIN
==================================================================== */
.info-hero {
    padding: clamp(30px, 5vw, 60px) 0 8px;
    max-width: 760px;
}
.info-title {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 800;
    color: var(--white);
    -webkit-text-stroke: 2px var(--line);
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 rgba(22, 67, 127, .8);
    transform: rotate(-.8deg);
    width: fit-content;
}
.info-lead {
    font-size: 1.06rem;
    background: rgba(255, 255, 255, .55);
    border-radius: 14px;
    padding: 8px 12px;
}
.info-note {
    display: inline-block;
    font-size: .86rem;
    font-style: italic;
    color: var(--ink-soft);
    background: #FFF4BC;
    border: 2px dashed var(--sun-shade);
    border-radius: 4px 14px 4px 14px;
    padding: 6px 14px;
    transform: rotate(-1deg);
}

.info-video-section,
.info-about-section { margin: clamp(28px, 4.5vw, 56px) auto; }
.info-section-lead { color: var(--ink-soft); }

.tour-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(18px, 2.6vw, 28px);
    margin-top: 20px;
}
.tour-video-card {
    margin: 0;
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 10px 6px;
    box-shadow: var(--shadow-sticker);
    transition: transform .25s ease;
}
.tour-video-grid .tour-video-card:nth-child(3n+1) { transform: rotate(-1.3deg); }
.tour-video-grid .tour-video-card:nth-child(3n+2) { transform: rotate(.9deg) translateY(8px); }
.tour-video-grid .tour-video-card:nth-child(3n)   { transform: rotate(1.1deg); }
.tour-video-card:hover { transform: rotate(0) translateY(-5px); }
.tour-video-frame {
    position: relative;
    border: var(--border-thin);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.tour-video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tour-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--sun);
    border: var(--border-thin);
    border-radius: 50%;
    box-shadow: 0 3px 0 var(--sun-shade);
    transition: transform .2s ease;
    z-index: 3;
    pointer-events: none;
}
.tour-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left: 13px solid var(--ink);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.tour-video-card:hover .tour-video-play { transform: translate(-50%, -50%) scale(1.12); }
.tour-video-frame:has(video) .tour-video-play { display: none !important; }
.tour-video-card figcaption {
    font-size: .84rem;
    color: var(--ink-soft);
    font-style: italic;
    padding: 8px 6px 6px;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(18px, 2.6vw, 28px);
    margin-top: 26px;
}
.info-card {
    position: relative;
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: 46px 22px 22px;
    box-shadow: var(--shadow-sticker);
    transition: transform .25s ease;
}
.info-cards .info-card:nth-child(3n+1) { transform: rotate(-1deg); background: var(--cream); }
.info-cards .info-card:nth-child(3n+2) { transform: rotate(.8deg) translateY(10px); }
.info-cards .info-card:nth-child(3n)   { transform: rotate(1.2deg); background: var(--blue-pale); }
.info-card:hover { transform: rotate(0) translateY(-5px); }
.info-card-ico {
    position: absolute;
    top: -16px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding-inline: 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--sun);
    border: var(--border-thin);
    border-radius: 14px 18px 14px 4px;
    transform: rotate(-4deg);
    box-shadow: var(--shadow-sticker-sm);
}
.info-cards .info-card:nth-child(3n+2) .info-card-ico { background: var(--leaf-soft); transform: rotate(3deg); }
.info-cards .info-card:nth-child(3n) .info-card-ico { background: var(--flame-soft); transform: rotate(-2deg); }
.info-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--blue-deep);
}
.info-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ====================================================================
   TRANG TOUR 360
==================================================================== */
.tour-hero { padding: clamp(24px, 4vw, 48px) 0 8px; }

.tour-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(20px, 3.5vw, 38px);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    color: var(--ink);
    background: var(--white);
    border: var(--border-thin);
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 4px 0 rgba(22, 67, 127, .55);
    transition: transform .15s ease, box-shadow .15s ease;
}
.back-link:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(22, 67, 127, .55);
}

.tour-grid {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: clamp(22px, 3.6vw, 48px);
    align-items: center;
}
.tour-copy h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 800;
    color: var(--white);
    -webkit-text-stroke: 2px var(--line);
    paint-order: stroke fill;
    text-shadow: 3px 4px 0 rgba(22, 67, 127, .8);
    transform: rotate(-.8deg);
}
.tour-copy p {
    color: var(--ink);
    background: rgba(255, 255, 255, .55);
    border-radius: 14px;
    padding: 6px 10px;
    max-width: 480px;
}
.tour-hero-cta { margin: 8px 0 16px; }
.tour-sticker-row { margin-bottom: 16px; }

.tour-viewer {
    position: relative;
    margin: 0;
    transform: rotate(1.1deg);
}
.tour-viewer img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: 10px;
    box-shadow: var(--shadow-lift);
}
.tour-viewer::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 10%;
    width: 96px;
    height: 30px;
    background: rgba(140, 205, 248, .85);
    border: 2px dashed rgba(14, 77, 168, .4);
    transform: rotate(-6deg);
    z-index: 2;
    border-radius: 3px;
}
.tour-viewer::after {
    content: "360°";
    position: absolute;
    right: -14px;
    top: -18px;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--sun);
    border: var(--border-thin);
    border-radius: 50%;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    transform: rotate(9deg);
    box-shadow: var(--shadow-sticker-sm);
    animation: stickerBob 3.2s ease-in-out infinite;
}

/* thẻ giới thiệu sơ lược trường */
.school-overview-section { margin: clamp(30px, 4.5vw, 54px) auto; }
.school-overview-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(20px, 3.4vw, 44px);
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 3.4vw, 40px);
    box-shadow: var(--shadow-lift);
    transform: rotate(-.35deg);
    position: relative;
}
.school-overview-card::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 8%;
    width: 88px;
    height: 28px;
    background: rgba(255, 214, 90, .85);
    border: 2px dashed rgba(201, 127, 0, .5);
    transform: rotate(6deg);
    border-radius: 3px;
}
.school-overview-copy h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    color: var(--blue-deep);
}
.school-overview-copy p { color: var(--ink-soft); }
.school-overview-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.school-overview-facts > div {
    display: flex;
    flex-direction: column;
    background: var(--cream);
    border: 2px dashed var(--sun-shade);
    border-radius: 14px;
    padding: 10px 16px;
    transform: rotate(-.6deg);
}
.school-overview-facts > div:nth-child(even) {
    transform: rotate(.7deg);
    background: var(--blue-pale);
    border-color: var(--blue);
}
.school-overview-facts strong {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
}
.school-overview-facts span { font-weight: 600; }

/* ---------- Khung Chi tiết Trường (Lịch sử, Thành tích, Kiến trúc) ---------- */
.school-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.school-detail-card {
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-lift);
    position: relative;
}

.school-detail-card h3 {
    font-size: 1.25rem;
    color: var(--blue-deep);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.school-detail-card h3 span {
    text-wrap: balance;
}

.history-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 14px;
    border-left: 3px dashed var(--blue);
    margin-top: 8px;
}

.history-item {
    position: relative;
    padding-left: 12px;
}

.history-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sun);
    border: 2.5px solid var(--line);
}

.history-year {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.84rem;
    color: var(--flame);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 1px 8px;
    margin-bottom: 4px;
}

.history-item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--blue-deep);
    margin-bottom: 2px;
}

.history-item p {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 0;
}

.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.achievement-item {
    background: var(--blue-pale);
    border: 2px dashed var(--blue);
    border-radius: 14px;
    padding: 12px 16px;
}

.achievement-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--blue-deep);
    margin-bottom: 4px;
}

.achievement-item span {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.45;
    display: block;
}

.architecture-text {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.65;
}

/* ---------- Video Section ---------- */
.tour-video-section {
    margin: clamp(30px, 4.5vw, 56px) auto;
}

.tour-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.tour-video-card {
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    margin: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.tour-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sticker);
}

.tour-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.tour-video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-video-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    background: var(--sun);
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
    box-shadow: 0 2px 0 var(--sun-shade);
    z-index: 2;
}

.video-code-tag {
    display: inline-block;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--sun);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 2px 8px;
    margin-top: 8px;
}

.tour-video-card figcaption {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tour-video-card figcaption strong {
    display: block;
    font-size: 1.05rem;
    color: var(--blue-deep);
    margin-bottom: 6px;
}

.tour-video-card figcaption p {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 0;
    flex: 1;
}

/* ---------- Gallery khu vực tiêu biểu ---------- */
.tour-gallery-section { margin: clamp(30px, 4.5vw, 56px) auto; }
.tour-section-lead { color: var(--ink-soft); }

.tg-group {
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    margin-top: 20px;
}
.tg-grouphead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--blue-pale);
    border-bottom: var(--border-thin);
}
.tg-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-family: var(--font-display);
    font-weight: 800;
    background: var(--sun);
    border: 2.5px solid var(--line);
    border-radius: 50%;
    transform: rotate(-6deg);
    box-shadow: 0 3px 0 var(--sun-shade);
}
.tg-groupname {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--blue-deep);
}
.tg-groupbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    padding: 20px;
}
.tg-card {
    border: var(--border-thin);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sticker-sm);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
}
.tg-groupbody .tg-card:nth-child(4n+1) { transform: rotate(-.9deg); }
.tg-groupbody .tg-card:nth-child(4n+2) { transform: rotate(.6deg); }
.tg-groupbody .tg-card:nth-child(4n+3) { transform: rotate(-.4deg); }
.tg-groupbody .tg-card:nth-child(4n)   { transform: rotate(1deg); }
.tg-card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-sticker); }
.tg-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 3px solid var(--tg-accent, var(--blue));
}
.tg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tg-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .76rem;
    background: var(--sun);
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: 999px;
    padding: 2px 10px;
    transform: rotate(4deg);
    box-shadow: 0 2px 0 var(--sun-shade);
}
.tg-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tg-body h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--blue-deep);
    margin: 0 0 2px;
}
.tg-body h3.tg-title-single-line {
    font-size: clamp(.64rem, .75vw, .74rem);
    letter-spacing: -.035em;
    white-space: nowrap;
}
.tg-body p {
    font-size: .84rem;
    color: var(--ink-soft);
    flex: 1;
    margin: 0 0 10px;
}
.tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .84rem;
    text-decoration: none;
    color: var(--ink);
    background: var(--sun);
    border: 2.5px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: 0 3px 0 var(--sun-shade);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tg-btn:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-shade); }
.tg-ico { display: inline-flex; }
.tg-arrow { font-size: 1.15em; line-height: 0; }

.tour-info { margin: clamp(26px, 4vw, 44px) auto clamp(40px, 6vw, 70px); }
.tour-full-action { display: flex; justify-content: center; }
.tour-full-action .btn { font-size: 1.12rem; padding: 14px 34px; }

/* hotspot cũ (nếu còn dùng) */
.hotspot {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--line);
    border-radius: 50%;
    background: var(--sun);
    cursor: pointer;
    box-shadow: 0 0 0 5px rgba(255, 201, 58, .35);
}
.hotspot.is-active { background: var(--flame); }

/* thẻ địa chỉ (addressGrid) */
.address-card {
    background: var(--white);
    border: var(--border-thin);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sticker-sm);
}
.address-card h3 { font-size: 1.02rem; color: var(--blue-deep); margin: 6px 0 2px; }
.address-card p { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.school-address { font-weight: 600; }
.school-en { font-style: italic; font-size: .88rem; color: var(--ink-soft); }

/* ====================================================================
   HIỆU ỨNG XUẤT HIỆN
==================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(22px) rotate(-.4deg);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}

/* ====================================================================
   RESPONSIVE
==================================================================== */
@media (max-width: 1040px) {
    .partner-logos { display: none; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-media { max-width: 620px; }
    .tour-grid { grid-template-columns: 1fr; }
    .school-overview-card { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; }
}

@media (max-width: 780px) {
    .site-header { top: 8px; padding-inline: 8px; }
    .header-inner {
        flex-wrap: wrap;
        border-radius: 24px;
        gap: 8px;
        padding: 10px 14px;
    }
    .site-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-left: 0;
        gap: 2px;
    }
    .site-nav a { padding: 7px 12px; font-size: .9rem; }
    .language-toggle { margin-left: auto; }

    .hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .hero-media::after { left: -6px; font-size: 1rem; padding: 8px 14px; }
    .guide-list { grid-template-columns: 1fr; gap: 20px; }
    .guide-item:not(:last-child)::after {
        top: auto;
        bottom: -20px;
        right: auto;
        left: 18px;
        transform: rotate(80deg);
    }
    .map-header { align-items: start; flex-direction: column; }
    .map-hint { margin-left: 0; width: 100%; }
    .card-grid .school-card:nth-child(3n+2) { transform: rotate(.7deg); }
    .school-details-grid { grid-template-columns: minmax(0, 1fr); }
    .school-detail-card { padding: clamp(18px, 5vw, 24px); }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-logos { justify-self: stretch; justify-content: center; }
    .tour-topbar { flex-direction: column; align-items: stretch; }
    .back-link { align-self: flex-start; }
    .tour-viewer::after { width: 58px; height: 58px; font-size: .9rem; right: -6px; }
    .marquee { transform: none; }
}

@media (max-width: 380px) {
    .container { width: calc(100% - 24px); }
    .brand-text small { display: none; }
    .hero-actions .btn-primary { width: 100%; }
}

/* ====================================================================
   GIẢM CHUYỂN ĐỘNG
==================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee-track,
    .school-strip-track,
    .badge-pulse,
    .hero-media::after,
    .tour-viewer::after,
    .pin-mascot { animation: none; }
    .page-transition { display: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    body.page-anim main { animation: none; }
}

/* Hiệu ứng mở đầu khi vào tour */
#sc-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #00185F;
    overflow: hidden;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 2s ease-out;
}

.sc-intro-map {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: sepia(0.8) hue-rotate(180deg) brightness(0.6) contrast(1.2); 
}

.sc-intro-grid {
    position: absolute;
    inset: 0;
}

.sc-intro-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 80px 80px;
    background-image: 
        linear-gradient(to right, rgba(135, 220, 255, 0.95) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(135, 220, 255, 0.95) 2px, transparent 2px),
        linear-gradient(to right, rgba(135, 220, 255, 0.3) 6px, transparent 6px),
        linear-gradient(to bottom, rgba(135, 220, 255, 0.3) 6px, transparent 6px);
    background-position: 0 0, 0 0, -2px -2px, -2px -2px;
    
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,1) 98%, rgba(255,255,255,1) 100%);
    -webkit-mask-size: 50% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: -100% 0;
    /*quét lưới có vệt mờ 2.5s*/
    animation: radarSweep 2.5s ease-in-out forwards;
}

.sc-intro-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 80px 80px;
    background-image: 
        linear-gradient(to right, rgba(135, 220, 255, 0.4) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(135, 220, 255, 0.4) 2px, transparent 2px),
        linear-gradient(to right, rgba(135, 220, 255, 0.1) 6px, transparent 6px),
        linear-gradient(to bottom, rgba(135, 220, 255, 0.1) 6px, transparent 6px);
    background-position: 0 0, 0 0, -2px -2px, -2px -2px;
    
    opacity: 0;
    /*ở 1.8s hiện lớp lưới full tĩnh*/
    animation: gridSolidify 0.4s ease-out 2.5s forwards;
}

.sc-intro-target {
    position: absolute;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    opacity: 0;
    /*bắt đầu ở 2.1s nhấp nháy 4 mỗi lần 0.5s*/
    animation: targetAppear 0.3s ease 2.5s forwards, targetBlink 0.5s ease 2.8s 4; 
}

.sc-intro-target .spin-ring {
    transform-origin: 50% 50%;
    animation: spinTarget 4s linear infinite;
}

.sc-intro-flash {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    /*ở 3.7s chạy nền sáng 0.6s*/
    animation: whiteFlash 2s ease-in 4.4s forwards;
}

@keyframes radarSweep {
    0%   { -webkit-mask-position: -100% 0; }
    100% { -webkit-mask-position: 200% 0; }
}

@keyframes gridSolidify {
    0%   { opacity: 0; filter: brightness(2); }
    100% { opacity: 1; filter: brightness(1); }
}

@keyframes targetAppear {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(2); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes targetBlink {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px #FF473D); }
    50%      { opacity: 0.2; filter: none; }
}

@keyframes spinTarget {
    100% { transform: rotate(360deg); }
}

@keyframes whiteFlash {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}