/*
 * SchoolCarto Virtual Tour — Sticker Campus
 * Selected visual direction, 2026-07-10.
 * Loaded after the legacy stylesheet so the existing document structure and
 * JavaScript behavior remain intact.
 */

:root {
    --sc-sky: #87DCFF;
    --sc-page-bg: #38B2FF;
    --sc-pale: #DDF5FF;
    --sc-lemon: #FFD11A;
    --sc-navy: #0737A8;
    --sc-coral: #FF473D;
    --sc-white: #FFFFFF;
    --sc-mint: #8FE6B9;
    --sc-ink-soft: #344E91;
    --sc-action-blue: #1764FF;
    --sc-action-blue-dark: #0E4FD0;
    --sc-font-body: "Noto Serif", Georgia, serif;
    --sc-font-display: "Sigmar One", "Arial Rounded MT Bold", sans-serif;
    --font-body: var(--sc-font-body);
    --font-display: var(--sc-font-display);
    --sc-line: 2.5px solid var(--sc-navy);
    --sc-shadow: 3px 4px 0 var(--sc-navy);
    --sc-shadow-coral: 4px 5px 0 var(--sc-coral);
    --sc-radius-lg: 26px;
    --sc-radius-md: 18px;

    /* Remap the original theme tokens for JS-generated components. */
    --ink: var(--sc-navy);
    --klein-deep: var(--sc-navy);
    --klein: var(--sc-navy);
    --blue: var(--sc-navy);
    --blue-bright: #1764FF;
    --klein-600: #1764FF;
    --klein-400: #66A0FF;
    --klein-200: #BFE4FF;
    --klein-50: var(--sc-pale);
    --sky: var(--sc-sky);
    --paper: var(--sc-pale);
    --white: var(--sc-white);
    --gold: var(--sc-lemon);
    --sun: var(--sc-lemon);
    --hpd-red: var(--sc-coral);
    --red: var(--sc-coral);
    --red-strong: #E12F2A;
    --red-soft: #FFE4E1;
    --mint: #46C89C;
    --mint-soft: var(--sc-mint);
    --pink: #FFDCE7;
    --paper-yellow: #FFF2A4;
    --ink-soft: var(--sc-ink-soft);
    --line: var(--sc-navy);
    --radius: var(--sc-radius-md);
    --shadow-sm: var(--sc-shadow);
    --shadow-md: 5px 6px 0 var(--sc-navy);
    --shadow-lg: 7px 8px 0 var(--sc-navy);
    --border-bold: var(--sc-line);
}

html {
    background: var(--sc-page-bg);
    scroll-behavior: auto;
}

body {
    min-width: 320px;
    background: var(--sc-page-bg);
    color: var(--sc-navy);
    font-family: var(--sc-font-body);
    font-size: 1rem;
    line-height: 1.62;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.info-title,
.tour-copy h1,
.section-heading h2,
.guide-panel h2 {
    font-family: var(--sc-font-display);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.18;
}

h3,
.eyebrow,
.section-kicker,
.guide-kicker,
.panel-label,
.badge,
.btn,
select {
    font-family: var(--sc-font-body);
}

button,
input,
select,
option,
textarea,
.site-nav a,
.language-toggle,
.language-select,
.hero-subtitle,
.hero-subtitle-en,
.hero-sticker-row span,
.marquee-track span,
.section-kicker,
.guide-kicker,
.guide-item,
.map-selector,
.map-legend,
.card-content,
.card-meta,
.tour-status-row,
.tour-video-badge,
.tg-groupname,
.tg-body,
.tg-btn,
.footer-inner {
    font-family: var(--sc-font-body) !important;
    font-synthesis: none;
}

.hero-title,
.brand-text strong,
.school-card-placeholder span,
.site-footer strong {
    font-family: var(--sc-font-display);
    font-weight: 400;
}

button:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 4px solid var(--sc-coral);
    outline-offset: 4px;
}

/* Chuyển động có chủ đích: các section chỉ hiện khi người dùng cuộn tới. */
.page-transition,
.scroll-progress {
    display: none !important;
}

.reveal {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    animation: none !important;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1) !important;
}

.reveal.in {
    opacity: 1 !important;
    transform: none !important;
}

body.page-anim main,
body.page-ready main {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.marquee-track,
.hero-sticker-row span,
.hero-sticker-row span:hover,
.badge-pulse,
.badge-pulse::after,
.pin-mascot,
.hotspot,
.hotspot::after {
    animation: none !important;
}

.btn,
.site-nav a,
.language-toggle,
.school-card,
.school-card img,
.school-tile,
.tg-card,
.tg-thumb img,
.tour-gallery-card,
.tour-gallery-thumb img,
.map-pin,
.hotspot {
    transition: none !important;
}

.school-card.tilt,
.school-card.tilt:hover,
.spotlight,
.spotlight:hover {
    transform: none !important;
}

.spotlight::before {
    display: none !important;
}

/* Header */
.site-header {
    top: 0;
    padding: 12px 0 9px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.header-inner {
    width: min(calc(100% - 28px), 1180px);
    min-height: 72px;
    padding: 9px 14px;
    gap: 14px;
    background: var(--sc-white);
    border: var(--sc-line);
    border-radius: 999px;
    box-shadow: var(--sc-shadow);
}

.brand {
    gap: 10px;
    color: var(--sc-navy);
}

.brand-logo {
    width: 48px;
    height: 48px;
    padding: 4px;
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    border-radius: 13px 13px 16px 10px;
    box-shadow: 2px 3px 0 var(--sc-coral);
    transform: rotate(-2deg);
}

.brand-text {
    line-height: 1.02;
}

.brand-text strong {
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-size: 1.08rem;
    font-weight: 400;
    letter-spacing: -.025em;
}

.brand-text small {
    margin-top: 4px;
    color: var(--sc-coral);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-nav {
    gap: 5px;
}

.site-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    color: var(--sc-navy);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 800;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active,
.site-nav a[aria-current="page"] {
    color: var(--sc-white);
    background: var(--sc-action-blue);
    border-color: var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-lemon);
    transform: none;
}

.language-toggle,
.language-select {
    min-width: 102px;
    min-height: 42px;
    padding: 8px 12px;
    color: var(--sc-navy);
    background: var(--sc-pale);
    border: 2px solid var(--sc-navy);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--sc-navy);
    font-size: .76rem;
    font-weight: 800;
}

.language-toggle:hover,
.language-toggle.is-en,
.language-toggle.is-bi {
    color: var(--sc-navy);
    background: var(--sc-lemon);
    border-color: var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-navy);
    transform: none;
}

.partner-logos {
    gap: 6px;
    padding: 3px 4px;
    border-left: 2px dashed var(--sc-sky);
}

.partner-logos img,
.partner-logos .logo-tdn {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.partner-logos .logo-bdhvs {
    width: auto;
    height: 43px;
}

/* Shared buttons */
.btn {
    min-height: 48px;
    padding: 11px 18px;
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 2.5px solid var(--sc-navy);
    border-radius: 15px 19px 14px 17px;
    box-shadow: 3px 4px 0 var(--sc-navy);
    font-size: .9rem;
    font-weight: 800;
}

.btn:hover,
.btn:focus-visible,
.btn:active {
    color: var(--sc-navy);
    background: var(--sc-pale);
    border-color: var(--sc-navy);
    box-shadow: 3px 4px 0 var(--sc-navy);
    transform: none;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.tour-hero-cta,
.tour-action-only .btn-primary {
    color: var(--sc-white);
    background: var(--sc-action-blue);
    border-color: var(--sc-navy);
    box-shadow: 4px 5px 0 var(--sc-lemon);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.tour-hero-cta:hover,
.tour-action-only .btn-primary:hover {
    color: var(--sc-white);
    background: var(--sc-action-blue-dark);
    box-shadow: 4px 5px 0 var(--sc-coral);
}

.btn-primary::after,
.btn-disabled::after {
    display: none;
}

.btn-ghost,
.btn-map-secondary {
    color: var(--sc-navy);
    background: var(--sc-white);
    border-color: var(--sc-navy);
    box-shadow: 3px 4px 0 var(--sc-navy);
}

.btn-tour-featured {
    order: -1;
    min-height: 62px;
    padding-inline: 23px;
    font-size: 1rem;
    box-shadow: 5px 6px 0 var(--sc-coral);
}

/* Home hero */
.hero-section {
    width: min(calc(100% - 28px), 1320px);
    margin: 5px auto 32px;
    padding: 42px 0 34px;
    overflow: hidden;
    color: var(--sc-navy);
    background: var(--sc-pale) !important;
    border: 3px solid var(--sc-navy);
    border-radius: 34px 38px 30px 35px;
    box-shadow: var(--sc-shadow);
}

.hero-section::before {
    top: -72px;
    right: -48px;
    bottom: auto;
    left: auto;
    width: 158px;
    height: 158px;
    background: var(--sc-lemon) !important;
    border: 2.5px solid var(--sc-navy);
    border-radius: 50%;
    opacity: 1;
    transform: none;
}

.hero-section::after {
    top: auto;
    right: auto;
    bottom: 76px;
    left: -43px;
    width: 86px;
    height: 86px;
    background: var(--sc-sky) !important;
    border: 2.5px solid var(--sc-navy);
    border-radius: 50%;
    opacity: 1;
    transform: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    gap: clamp(24px, 4vw, 48px);
}

.hero-grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 7px;
    right: 30%;
    width: 190px;
    height: 72px;
    border-top: 3px dashed var(--sc-navy);
    border-radius: 50%;
    opacity: .5;
    transform: rotate(-6deg);
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 12px;
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    border-radius: 7px 12px 8px 10px;
    box-shadow: 3px 3px 0 var(--sc-lemon);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .055em;
    transform: rotate(-1.5deg);
}

.hero-title,
.tour-copy h1 {
    color: var(--sc-navy);
    font-size: clamp(2.8rem, 6vw, 5.35rem);
    line-height: 1.04;
    text-shadow: none;
}

.tour-copy h1 {
    font-family: var(--sc-font-display);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.14;
}

.hero-title::after {
    display: none;
}

.hero-title-line {
    width: fit-content;
}

/* Chữ viết tay tên dự án thay cho dòng chữ "SchoolCarto" ở hero */
.hero-wordmark {
    display: block;
    width: clamp(260px, 35vw, 480px);
    height: auto;
    margin-bottom: 2px;
    filter: drop-shadow(0 4px 0 rgba(7, 55, 168, .13));
    transform-origin: 50% 82%;
    will-change: transform;
}

/* Tên dự án nhún nhẹ khi người xem rê chuột vào, như một nhãn dán sống động. */
@media (prefers-reduced-motion: no-preference) {
    .hero-wordmark:hover {
        animation: scWordmarkBob .72s cubic-bezier(.2, .8, .3, 1);
    }

    @keyframes scWordmarkBob {
        0%, 100% { transform: translateY(0); }
        35% { transform: translateY(-9px); }
        58% { transform: translateY(1px); }
        76% { transform: translateY(-3px); }
    }
}

.hero-title-line:last-child {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 6px;
    padding: 0 10px 4px;
    background: var(--sc-lemon);
    border: 2.5px solid var(--sc-navy);
    border-radius: 11px 14px 9px 13px;
    box-shadow: 3px 4px 0 var(--sc-coral);
    transform: rotate(-1deg);
}

.hero-subtitle,
.hero-subtitle-en,
.tour-copy p {
    color: var(--sc-navy);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hero-subtitle {
    max-width: 650px;
    font-size: 1rem;
    font-weight: 600;
}

.hero-subtitle-en {
    color: var(--sc-ink-soft);
    font-family: var(--sc-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.hero-actions {
    align-items: stretch;
    gap: 14px;
    margin-top: 22px;
}

.hero-actions .btn {
    justify-content: center;
}

.hero-sticker-row {
    gap: 7px;
    margin-top: 18px;
}

.hero-sticker-row span {
    padding: 6px 9px;
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 8px 11px 7px 10px;
    box-shadow: 2px 2px 0 var(--sc-lemon);
    font-family: var(--sc-font-body);
    font-size: .68rem;
    font-weight: 800;
    transform: none;
}

.hero-sticker-row span:nth-child(2) {
    background: var(--sc-mint);
    transform: rotate(1deg);
}

.hero-sticker-row span:nth-child(3) {
    background: var(--sc-lemon);
    transform: rotate(-1deg);
}

.hero-media {
    position: relative;
    overflow: visible;
    padding: 8px;
    background: var(--sc-white);
    border: 3px solid var(--sc-navy);
    border-radius: 17px 23px 16px 20px;
    box-shadow: var(--sc-shadow-coral);
    transform: rotate(.7deg);
}

.hero-media::before,
.hero-media::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 58px;
    height: 18px;
    background: var(--sc-lemon);
    border: 1.5px solid var(--sc-navy);
    opacity: .96;
}

.hero-media::before {
    top: -10px;
    left: 19px;
    transform: rotate(-7deg);
}

.hero-media::after {
    right: 18px;
    bottom: -10px;
    transform: rotate(-6deg);
}

.hero-media img {
    width: 100%;
    border: 2px solid var(--sc-navy);
    border-radius: 11px 17px 10px 14px;
    box-shadow: none;
}

.hero-media:hover img,
.tour-viewer:hover img {
    transform: none;
}

.pin-mascot {
    display: none;
}

/* Static feature strip and route */
.marquee {
    width: min(calc(100% - 44px), 850px);
    margin: -6px auto 0;
    padding: 0;
    overflow: hidden;
    background: var(--sc-lemon);
    border: var(--sc-line);
    border-radius: 16px 20px 15px 18px;
    box-shadow: var(--sc-shadow);
    transform: rotate(-.35deg);
}

.marquee-track,
.marquee.is-visible .marquee-track {
    width: 100% !important;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    padding: 11px 14px;
    transform: none !important;
}

.marquee-track span {
    color: var(--sc-navy);
    font-family: var(--sc-font-body);
    font-size: .78rem;
    font-weight: 800;
}

.marquee-track i {
    width: 7px;
    height: 7px;
    background: var(--sc-coral);
    border: 1px solid var(--sc-navy);
    border-radius: 50%;
}

.marquee-track span:nth-of-type(n+4),
.marquee-track i:nth-of-type(n+4) {
    display: none;
}

.route-divider {
    width: min(calc(100% - 30px), 1080px);
    height: 48px;
    margin: 3px auto 0;
    background: transparent;
}

.route-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 7%;
    right: 7%;
    border-top: 3px dashed var(--sc-navy);
    opacity: .5;
    transform: rotate(-1deg);
}

.route-divider span,
.route-divider i,
.route-divider b {
    position: absolute;
    z-index: 1;
    display: block;
    width: 13px;
    height: 13px;
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    border-radius: 50%;
}

.route-divider span { top: 17px; left: 7%; }
.route-divider i { top: 19px; left: 49%; background: var(--sc-coral); }
.route-divider b { top: 15px; right: 7%; background: var(--sc-mint); }

/* Shared headings and guide panels */
.section-heading h2,
.guide-panel h2,
.info-title {
    color: var(--sc-navy);
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.section-kicker,
.guide-kicker {
    width: fit-content;
    padding: 5px 10px;
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    border-radius: 7px 11px 7px 10px;
    box-shadow: 2px 2px 0 var(--sc-lemon);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    transform: rotate(-1deg);
}

.guide-panel {
    position: relative;
    width: min(calc(100% - 28px), 1180px);
    margin: 24px auto 34px;
    padding: 29px 25px 24px;
    background: var(--sc-white);
    border: var(--sc-line);
    border-radius: 23px 29px 22px 26px;
    box-shadow: var(--sc-shadow);
}

.guide-panel::after {
    top: 18px;
    right: 22px;
    width: 28px;
    height: 28px;
    background: var(--sc-lemon);
    border: 0;
    clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 35%);
    opacity: 1;
    transform: rotate(8deg);
}

.guide-panel h2 {
    max-width: 820px;
    margin: 11px 0 8px;
    font-size: clamp(1.7rem, 4vw, 2.75rem);
}

.guide-lead {
    max-width: 800px;
    color: var(--sc-ink-soft);
    font-weight: 600;
}

.guide-list {
    gap: 12px;
    margin-top: 18px;
}

.guide-item {
    padding: 14px;
    background: var(--sc-pale);
    border: 2px solid var(--sc-navy);
    border-radius: 15px 19px 14px 17px;
    box-shadow: 2px 3px 0 var(--sc-lemon);
}

.guide-icon {
    width: 42px;
    height: 42px;
    color: var(--sc-white);
    border: 2px solid var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-navy);
}

.guide-icon-blue { background: var(--sc-navy); }
.guide-icon-gold { color: var(--sc-navy); background: var(--sc-lemon); }
.guide-icon-red { background: var(--sc-coral); }
.guide-icon-pink { color: var(--sc-navy); background: var(--sc-mint); }

.guide-item strong {
    color: var(--sc-navy);
    font-weight: 800;
}

.guide-item p {
    color: var(--sc-ink-soft);
}

/* Map */
.map-section {
    width: min(calc(100% - 28px), 1320px) !important;
    max-width: 1320px !important;
    margin: 36px auto !important;
    padding: 30px 24px 26px !important;
    background: var(--sc-white) !important;
    border: 3px solid var(--sc-navy) !important;
    border-radius: 25px 31px 24px 28px !important;
    box-shadow: var(--sc-shadow) !important;
}

.map-header {
    min-height: 82px;
    padding: 0;
}

.selector-wrap {
    color: var(--sc-navy);
    font-weight: 800;
}

.map-header .selector-wrap {
    right: 0;
}

.map-selector {
    min-height: 46px;
    color: var(--sc-navy);
    background: var(--sc-pale);
    border: 2px solid var(--sc-navy);
    border-radius: 12px 16px 11px 14px;
    box-shadow: 2px 3px 0 var(--sc-navy);
    font-family: var(--sc-font-body);
    font-weight: 800;
}

.map-container {
    padding: 12px !important;
    overflow: visible;
    background: var(--sc-sky) !important;
    border: 3px solid var(--sc-navy) !important;
    border-radius: 18px 24px 17px 21px !important;
    box-shadow: var(--sc-shadow-coral) !important;
}

.map-container::before {
    display: none;
}

.map-stage,
.map-image {
    border-radius: 12px 17px 11px 15px;
}

.map-stage {
    overflow: visible;
    background: var(--sc-pale);
    border: 2px solid var(--sc-navy) !important;
}

.map-image {
    background: var(--sc-pale);
}

.map-legend {
    gap: 8px;
    padding: 9px 12px;
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 12px 16px 11px 14px;
    box-shadow: 2px 3px 0 var(--sc-coral);
}

.dot-school { background: var(--sc-coral); }
.dot-active { background: var(--sc-lemon); }

.map-pin {
    width: 43px;
    height: 43px;
    padding: 0;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    transform: translate(-50%, -50%) !important;
}

.map-pin::before {
    width: 31px;
    height: 31px;
    inset: 5px auto auto 5px;
    background: var(--sc-coral) !important;
    border: 2.5px solid var(--sc-navy);
    border-radius: 50% 50% 50% 7px;
    box-shadow: 2px 2px 0 var(--sc-lemon);
    transform: rotate(-45deg);
}

.map-pin:hover,
.map-pin:focus-visible,
.map-pin.is-active {
    background: transparent !important;
    transform: translate(-50%, -50%) !important;
}

.map-pin:hover::before,
.map-pin:focus-visible::before,
.map-pin.is-active::before {
    background: var(--sc-lemon) !important;
}

.map-pin::after {
    bottom: calc(100% + 5px);
    left: 50%;
    min-width: 150px;
    padding: 7px 9px;
    color: var(--sc-white);
    background: var(--sc-navy);
    border: 2px solid var(--sc-white);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--sc-coral);
    font-family: var(--sc-font-body);
    font-size: .66rem;
    font-weight: 800;
    transform: translateX(-50%);
}

/* School cards */
.schools-section {
    width: min(calc(100% - 28px), 1240px) !important;
    max-width: 1240px !important;
    margin: 42px auto !important;
    padding: 34px 28px 38px !important;
    background: var(--sc-pale) !important;
    border: 3px solid var(--sc-navy) !important;
    border-radius: 28px 34px 27px 31px !important;
    box-shadow: var(--sc-shadow) !important;
}

.schools-section .section-heading.centered {
    margin-bottom: 28px;
}

.card-grid {
    gap: 22px;
}

.school-card {
    overflow: visible;
    background: var(--sc-white);
    border: 3px solid var(--sc-navy);
    border-radius: 18px 24px 17px 21px;
    box-shadow: var(--sc-shadow-coral);
}

.school-card::before {
    display: none;
}

.school-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -11px;
    right: 25px;
    width: 58px;
    height: 18px;
    background: var(--sc-lemon);
    border: 1.5px solid var(--sc-navy);
    opacity: .96;
    transform: rotate(6deg);
}

.school-card:hover {
    border-color: var(--sc-navy);
    box-shadow: var(--sc-shadow-coral);
    transform: none;
}

.school-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-bottom: 3px solid var(--sc-navy);
    border-radius: 15px 21px 0 0;
}

.card-content {
    padding: 18px;
}

.card-content h3 {
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-weight: 400;
    line-height: 1.3;
}

.card-content p {
    color: var(--sc-ink-soft);
}

.badge {
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--sc-lemon);
    font-size: .66rem;
    font-weight: 800;
}

.badge-pulse {
    color: var(--sc-navy);
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-coral);
}

.badge-pulse::after {
    display: none;
}

.card-meta,
.tour-status-row {
    gap: 6px;
}

.card-meta span,
.tour-status-row span {
    color: var(--sc-navy);
    background: var(--sc-pale);
    border: 1.5px solid var(--sc-navy);
    border-radius: 999px;
    font-family: var(--sc-font-body);
    font-size: .64rem;
    font-weight: 800;
}

.school-card .btn {
    width: 100%;
    margin-top: 4px;
}

.school-card-placeholder {
    color: var(--sc-navy);
    background: var(--sc-sky) !important;
    border-bottom: 3px solid var(--sc-navy);
}

.school-card-placeholder span {
    font-family: var(--sc-font-display);
    font-weight: 400;
}

.school-card.is-placeholder {
    box-shadow: 4px 5px 0 var(--sc-navy);
}

.btn-disabled,
.btn-disabled:hover {
    opacity: .62;
    color: var(--sc-navy);
    background: var(--sc-pale);
    box-shadow: 2px 2px 0 var(--sc-navy);
}

/* Static school strip */
.school-strip-section {
    padding: 24px 0 40px;
    background: var(--sc-sky);
}

.school-strip {
    width: min(calc(100% - 28px), 1180px);
    margin: 0 auto;
    overflow: visible;
}

.school-strip-track,
.school-strip.is-visible .school-strip-track {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    transform: none;
}

.school-tile[aria-hidden="true"] {
    display: none;
}

.school-tile {
    min-width: 0;
    overflow: hidden;
    background: var(--sc-white);
    border: 2.5px solid var(--sc-navy);
    border-radius: 15px 20px 14px 18px;
    box-shadow: 3px 4px 0 var(--sc-coral);
}

.school-tile img {
    border-bottom: 2px solid var(--sc-navy);
}

.school-tile span {
    color: var(--sc-navy);
    background: var(--sc-white);
    font-family: var(--sc-font-body);
    font-weight: 800;
}

/* Information page */
.info-hero {
    width: min(calc(100% - 28px), 900px);
    max-width: 900px;
    margin: 16px auto 36px;
    padding: 34px 30px;
    background: var(--sc-pale);
    border: 3px solid var(--sc-navy);
    border-radius: 25px 31px 24px 28px;
    box-shadow: var(--sc-shadow);
}

.info-title {
    margin: 10px 0 13px;
    font-size: clamp(2.2rem, 6vw, 4.7rem);
}

.info-lead {
    color: var(--sc-navy);
    font-weight: 600;
}

.info-note,
.info-section-lead {
    color: var(--sc-ink-soft);
}

.info-video-section,
.info-about-section {
    width: min(calc(100% - 28px), 1180px);
}

.tour-video-grid,
.info-cards {
    gap: 20px;
}

.tour-video-card,
.info-card {
    position: relative;
    padding: 8px;
    background: var(--sc-white);
    border: 2.5px solid var(--sc-navy);
    border-radius: 17px 22px 16px 20px;
    box-shadow: var(--sc-shadow-coral);
}

.tour-video-card::before,
.info-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -10px;
    right: 22px;
    width: 52px;
    height: 17px;
    background: var(--sc-lemon);
    border: 1.5px solid var(--sc-navy);
    transform: rotate(6deg);
}

.tour-video-frame {
    background: var(--sc-navy);
    border: 2px solid var(--sc-navy);
    border-radius: 11px 16px 10px 14px;
}

.tour-video-play {
    width: 44px;
    height: 44px;
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-coral);
}

.tour-video-badge {
    color: var(--sc-white);
    background: var(--sc-navy);
    border: 1.5px solid var(--sc-white);
    font-family: var(--sc-font-body);
    font-weight: 800;
}

.tour-video-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--sc-white);
    background: repeating-linear-gradient(-45deg, var(--sc-sky) 0 22px, var(--sc-pale) 22px 44px);
    font-family: var(--sc-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    -webkit-text-stroke: 2px var(--sc-navy);
    paint-order: stroke fill;
}

.tour-video-card figcaption {
    padding: 2px 5px 4px;
    color: var(--sc-ink-soft);
}

.info-card {
    padding: 22px 18px 19px;
}

.info-card-ico {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    border-radius: 13px;
    box-shadow: 2px 2px 0 var(--sc-coral);
}

.info-card h3 {
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-weight: 400;
}

.info-card p {
    color: var(--sc-ink-soft);
}

/* Tour page */
.tour-page,
body[data-page="tour"] {
    background: var(--sc-page-bg);
}

.tour-hero {
    width: min(calc(100% - 28px), 1320px);
    margin: 5px auto 36px;
    padding: 30px 0 34px;
    color: var(--sc-navy);
    background: var(--sc-pale) !important;
    border: 3px solid var(--sc-navy);
    border-radius: 30px 37px 28px 34px;
    box-shadow: var(--sc-shadow);
}

.tour-topbar {
    margin-bottom: 26px;
}

.back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--sc-navy);
    font-weight: 800;
}

.tour-hero .selector-wrap span,
.tour-hero .tour-selector span {
    color: var(--sc-navy) !important;
    opacity: 1;
}

.tour-hero .tour-selector .map-selector {
    color: var(--sc-navy);
    background: var(--sc-white);
    border-color: var(--sc-navy);
}

.tour-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(2.35rem, 5.8vw, 4.75rem);
}

.tour-copy p {
    font-weight: 600;
}

.tour-hero-cta {
    width: fit-content;
    min-height: 60px;
    margin-top: 4px;
}

.tour-viewer {
    overflow: visible;
    padding: 8px;
    background: var(--sc-white);
    border: 3px solid var(--sc-navy);
    border-radius: 18px 24px 17px 21px;
    box-shadow: var(--sc-shadow-coral);
    transform: rotate(.55deg);
}

.tour-viewer::before {
    top: -11px;
    right: 22px;
    width: 58px;
    height: 18px;
    padding: 0;
    background: var(--sc-lemon);
    border: 1.5px solid var(--sc-navy);
    border-radius: 0;
    box-shadow: none;
    transform: rotate(6deg);
}

.tour-viewer img {
    border: 2px solid var(--sc-navy);
    border-radius: 11px 17px 10px 14px;
}

.tour-sticker-row span {
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-lemon);
}

/* Hashtag của trường luôn nằm thẳng, không nghiêng và bo góc đều bốn phía.
   Thêm :nth-child(n) để thắng các rule xoay theo thứ tự của .hero-sticker-row. */
.hero-sticker-row.tour-sticker-row span:nth-child(n) {
    border-radius: 10px;
    transform: none;
}

.school-overview-section {
    width: min(calc(100% - 28px), 1180px);
}

.school-overview-card {
    background: var(--sc-white);
    border: 3px solid var(--sc-navy);
    border-radius: 23px 29px 22px 26px;
    box-shadow: var(--sc-shadow);
    transform: none;
}

.school-overview-copy h2 {
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-weight: 400;
    letter-spacing: -.018em;
    line-height: 1.16;
}

.school-overview-facts > div:nth-child(n) {
    background: var(--sc-pale);
    border: 2px solid var(--sc-navy);
    border-radius: 13px 17px 12px 15px;
    transform: none;
}

/* Giữ địa chỉ đầy đủ của mọi trường vừa khung mà không làm xoay các thẻ. */
.school-overview-facts .school-address-fact span {
    font-size: .88rem;
    letter-spacing: -.01em;
}

.tg-group {
    background: var(--sc-white);
    border: 3px solid var(--sc-navy);
    border-radius: 22px 28px 21px 25px;
    box-shadow: var(--sc-shadow);
}

.tg-grouphead {
    color: var(--sc-white);
    background: var(--sc-navy) !important;
    border-bottom: 3px solid var(--sc-navy);
}

.tg-num {
    color: var(--sc-navy);
    background: var(--sc-lemon);
    border: 2px solid var(--sc-white);
    box-shadow: 2px 2px 0 var(--sc-coral);
}

.tg-groupname {
    font-family: var(--sc-font-body);
    font-weight: 800;
    color: var(--sc-white);
}

.tg-card {
    overflow: visible;
    background: var(--sc-pale);
    border: 2.5px solid var(--sc-navy);
    border-radius: 16px 21px 15px 19px;
    box-shadow: 3px 4px 0 var(--sc-coral);
}

.tg-card::before {
    z-index: 3;
    top: -9px;
    right: 18px;
    width: 48px;
    height: 15px;
    background: var(--sc-lemon);
    border: 1.5px solid var(--sc-navy);
    opacity: 1;
    transform: rotate(6deg);
}

.tg-thumb {
    border-bottom: 2.5px solid var(--sc-navy);
    border-radius: 13px 18px 0 0;
}

.tg-card:hover .tg-thumb img {
    transform: none;
}

.tg-badge {
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    box-shadow: 2px 2px 0 var(--sc-lemon);
}

.tg-body h3 {
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-weight: 400;
}

.tg-body p {
    color: var(--sc-ink-soft);
}

.tg-btn,
.tg-btn:hover {
    color: var(--sc-navy);
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    border-radius: 12px 16px 11px 14px;
    box-shadow: 3px 3px 0 var(--sc-coral);
    transform: none;
}

.tg-card:nth-child(even) .tg-btn,
.tg-card:nth-child(even) .tg-btn:hover,
.tg-card:nth-child(even) .tg-btn:focus-visible {
    color: var(--sc-white);
    background: var(--sc-action-blue);
    border-color: var(--sc-navy);
    box-shadow: 3px 3px 0 var(--sc-lemon);
}

.tour-action-only {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.tour-action-only .btn-primary {
    min-height: 62px;
    padding-inline: 28px;
}

/* Footer */
.site-footer {
    margin-top: 46px;
    padding-top: 34px;
    color: var(--sc-white);
    background: var(--sc-navy) !important;
    border-top: 6px solid var(--sc-lemon);
    border-radius: 34px 34px 0 0;
    box-shadow: none;
}

.site-footer strong {
    color: var(--sc-lemon);
    font-family: var(--sc-font-display);
    font-weight: 400;
}

.site-footer p,
.footer-links span {
    color: var(--sc-white);
    opacity: .9;
}

.footer-links a {
    color: var(--sc-lemon);
    font-weight: 800;
    text-underline-offset: 4px;
}

.footer-logos {
    padding: 8px 10px;
    background: var(--sc-white);
    border: 2px solid var(--sc-lemon);
    border-radius: 14px 18px 13px 16px;
    box-shadow: 3px 3px 0 var(--sc-coral);
}

@media (max-width: 1040px) {
    .header-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        border-radius: 25px;
    }

    .partner-logos {
        grid-column: 1 / -1;
        justify-content: center;
        padding-top: 7px;
        border-top: 2px dashed var(--sc-sky);
        border-left: 0;
    }

    .hero-grid::before {
        right: 8%;
    }
}

@media (max-width: 900px) {
    .hero-grid,
    .tour-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid::before {
        top: 42%;
        right: 4%;
    }

    .hero-media,
    .tour-viewer {
        max-width: 760px;
        margin-inline: auto;
    }

    .map-header .selector-wrap {
        position: static;
    }
}

@media (max-width: 780px) {
    body {
        font-size: .94rem;
    }

    .container {
        padding-inline: 14px;
    }

    .site-header {
        position: static;
        padding-top: 9px;
    }

    .header-inner {
        width: calc(100% - 18px);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px 7px;
        padding: 9px 10px;
        border-radius: 22px;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
    }

    .brand-text strong {
        font-size: .96rem;
    }

    .brand-text small {
        font-size: .55rem;
    }

    .site-nav {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding-top: 7px;
        border-top: 2px dashed var(--sc-sky);
    }

    .site-nav a {
        min-height: 36px;
        padding: 6px 3px;
        font-size: .66rem;
    }

    .language-select {
        min-width: 76px;
        width: auto;
        min-height: 38px;
        padding: 7px 8px;
        font-size: .68rem;
    }

    .partner-logos {
        grid-column: 1 / -1;
        gap: 5px;
        padding-top: 5px;
    }

    .partner-logos img,
    .partner-logos .logo-tdn {
        width: 31px;
        height: 31px;
    }

    .partner-logos .logo-bdhvs {
        height: 36px;
    }

    .hero-section,
    .tour-hero {
        width: calc(100% - 18px);
        margin-top: 2px;
        padding: 24px 0 22px;
        border-radius: 25px 29px 23px 27px;
    }

    .hero-section::before {
        top: -78px;
        right: -63px;
    }

    .hero-grid::before {
        top: 43%;
        right: -2%;
        width: 135px;
    }

    .hero-title {
        font-size: clamp(2.25rem, 12vw, 3.5rem);
    }

    .tour-copy h1 {
        font-size: clamp(2rem, 10vw, 3.15rem);
    }

    .hero-subtitle {
        font-size: .86rem;
        line-height: 1.55;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .hero-media,
    .tour-viewer {
        margin-inline: 3px;
        padding: 6px;
    }

    .marquee {
        width: calc(100% - 30px);
    }

    .marquee-track {
        gap: 6px 8px;
        padding: 9px 8px;
    }

    .marquee-track span {
        font-size: .65rem;
    }

    .route-divider {
        height: 36px;
    }

    .guide-panel {
        width: calc(100% - 18px);
        margin-block: 20px 30px;
        padding: 24px 15px 18px;
    }

    .guide-panel::after {
        right: 14px;
        width: 21px;
        height: 21px;
    }

    .guide-panel h2 {
        padding-right: 16px;
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .guide-list {
        grid-template-columns: 1fr;
    }

    .map-section,
    .schools-section {
        width: calc(100% - 18px) !important;
        margin: 30px auto !important;
        padding: 22px 14px 20px !important;
        border-radius: 22px 27px 21px 25px !important;
    }

    .map-header {
        align-items: stretch;
        gap: 15px;
        text-align: left;
    }

    .map-header .section-heading {
        margin: 0;
    }

    .map-header .selector-wrap {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .map-selector {
        width: 100%;
    }

    .map-container {
        padding: 5px !important;
    }

    .map-stage {
        aspect-ratio: auto;
    }

    .map-legend {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 7px;
        transform: none;
    }

    .map-hint {
        width: 100%;
        font-size: .65rem;
    }

    .map-pin::after {
        display: none;
    }

    .card-grid,
    .school-strip-track,
    .info-cards,
    .tour-video-grid {
        grid-template-columns: 1fr;
    }

    .school-card::after {
        right: 18px;
    }

    .school-strip {
        width: calc(100% - 18px);
    }

    .info-hero,
    .info-video-section,
    .info-about-section,
    .school-overview-section {
        width: calc(100% - 18px);
    }

    .info-hero {
        padding: 24px 17px;
    }

    .info-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .tour-topbar {
        align-items: stretch;
    }

    .tour-selector {
        width: 100%;
    }

    .tg-groupbody {
        grid-template-columns: 1fr;
    }

    .site-footer {
        border-radius: 26px 26px 0 0;
    }

    .footer-inner {
        gap: 22px;
    }
}

/* ====================================================================
   2026-07-23 — Tăng khả năng đọc + xuất hiện theo nhịp cuộn
==================================================================== */

/* Các cỡ chữ nhỏ trên trang chủ được nâng lên nhưng vẫn giữ bố cục gọn. */
body[data-page="home"] .hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.62;
}

body[data-page="home"] .hero-subtitle-en {
    font-size: .9rem;
    line-height: 1.55;
}

body[data-page="home"] .hero-sticker-row span {
    font-size: .76rem;
}

body[data-page="home"] .journey-section .hero-journey-heading strong {
    font-size: 1.42rem;
}

body[data-page="home"] .journey-section .hero-journey-heading span {
    font-size: .92rem;
}

body[data-page="home"] .journey-section .journey-route b {
    font-size: .76rem;
    line-height: 1.35;
}

body[data-page="home"] .journey-section .journey-school-card span {
    font-size: .82rem;
    line-height: 1.42;
}

body[data-page="home"] .guide-panel-map .guide-kicker {
    font-size: .7rem;
}

body[data-page="home"] .guide-panel-map h2 {
    font-size: clamp(1.12rem, 1.75vw, 1.38rem);
}

body[data-page="home"] .guide-panel-map .guide-lead,
body[data-page="home"] .guide-panel-map .guide-item strong {
    font-size: .84rem;
}

body[data-page="home"] .selector-wrap,
body[data-page="home"] .map-legend {
    font-size: .96rem;
}

body[data-page="home"] .map-hint {
    font-size: .84rem;
}

body[data-page="home"] .card-content h3 {
    font-size: 1.28rem;
}

body[data-page="home"] .card-content > p {
    font-size: 1rem;
}

body[data-page="home"] .card-meta span,
body[data-page="home"] .school-tile span {
    font-size: .82rem;
}

body[data-page="home"] .footer-inner p,
body[data-page="home"] .footer-links {
    font-size: .96rem;
}

/* Khối bên dưới chỉ mở ra khi đi vào vùng đọc; các phần tử con nối tiếp
   nhau để tạo cảm giác hành trình thay vì cùng bật lên một lúc. */
body[data-page="home"] .reveal {
    opacity: 0 !important;
    filter: blur(5px);
    transform: translateY(54px) scale(.985) !important;
    transition:
        opacity .72s ease,
        filter .72s ease,
        transform .82s cubic-bezier(.2, .78, .25, 1) !important;
    will-change: opacity, filter, transform;
}

body[data-page="home"] .reveal.in {
    opacity: 1 !important;
    filter: none;
    transform: none !important;
}

body[data-page="home"] .journey-section.reveal .journey-route,
body[data-page="home"] .journey-section.reveal .journey-school-card,
body[data-page="home"] .guide-panel-map.reveal .guide-heading-compact,
body[data-page="home"] .guide-panel-map.reveal .guide-item,
body[data-page="home"] .map-section.reveal .map-header,
body[data-page="home"] .map-section.reveal .map-container,
body[data-page="home"] .schools-section.reveal .section-heading,
body[data-page="home"] .schools-section.reveal .school-card {
    opacity: 0;
    translate: 0 18px;
    transition:
        opacity .55s ease,
        translate .65s cubic-bezier(.2, .78, .25, 1);
}

body[data-page="home"] .reveal.in .journey-route,
body[data-page="home"] .reveal.in .journey-school-card,
body[data-page="home"] .reveal.in .guide-heading-compact,
body[data-page="home"] .reveal.in .guide-item,
body[data-page="home"] .reveal.in .map-header,
body[data-page="home"] .reveal.in .map-container,
body[data-page="home"] .reveal.in .section-heading,
body[data-page="home"] .reveal.in .school-card {
    opacity: 1;
    translate: 0 0;
}

body[data-page="home"] .reveal.in .journey-route,
body[data-page="home"] .reveal.in .guide-heading-compact,
body[data-page="home"] .reveal.in .map-header,
body[data-page="home"] .reveal.in .section-heading {
    transition-delay: .1s;
}

body[data-page="home"] .reveal.in .journey-school-card:nth-child(1),
body[data-page="home"] .reveal.in .guide-item:nth-child(1),
body[data-page="home"] .reveal.in .school-card:nth-child(1) { transition-delay: .16s; }

body[data-page="home"] .reveal.in .journey-school-card:nth-child(2),
body[data-page="home"] .reveal.in .guide-item:nth-child(2),
body[data-page="home"] .reveal.in .school-card:nth-child(2) { transition-delay: .23s; }

body[data-page="home"] .reveal.in .journey-school-card:nth-child(3),
body[data-page="home"] .reveal.in .guide-item:nth-child(3),
body[data-page="home"] .reveal.in .school-card:nth-child(3) { transition-delay: .3s; }

body[data-page="home"] .reveal.in .journey-school-card:nth-child(4),
body[data-page="home"] .reveal.in .school-card:nth-child(4) { transition-delay: .37s; }

body[data-page="home"] .reveal.in .journey-school-card:nth-child(5),
body[data-page="home"] .reveal.in .school-card:nth-child(5) { transition-delay: .44s; }

body[data-page="home"] .reveal.in .map-container {
    transition-delay: .2s;
}

@media (max-width: 780px) {
    body[data-page="home"] .hero-subtitle {
        font-size: 1rem;
    }

    body[data-page="home"] .hero-subtitle-en {
        font-size: .84rem;
    }

    body[data-page="home"] .journey-section .hero-journey-heading strong {
        font-size: 1.18rem;
    }

    body[data-page="home"] .journey-section .hero-journey-heading span,
    body[data-page="home"] .journey-section .journey-school-card span {
        font-size: .8rem;
    }

    body[data-page="home"] .guide-panel-map h2 {
        font-size: 1.08rem;
    }

    body[data-page="home"] .guide-panel-map .guide-lead,
    body[data-page="home"] .guide-panel-map .guide-item strong,
    body[data-page="home"] .map-hint {
        font-size: .78rem;
    }

    body[data-page="home"] .reveal {
        filter: blur(3px);
        transform: translateY(38px) scale(.99) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .reveal,
    body[data-page="home"] .reveal *,
    body[data-page="home"] .reveal.in * {
        opacity: 1 !important;
        filter: none !important;
        translate: none !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 380px) {
    .brand-text strong {
        font-size: .86rem;
    }

    .hero-title {
        font-size: 2.12rem;
    }

    .hero-title-line:last-child {
        padding-inline: 6px;
    }

    .hero-sticker-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-item {
        grid-template-columns: 39px minmax(0, 1fr);
    }

    .guide-icon {
        width: 38px;
        height: 38px;
    }
}

/* ====================================================================
   LỚP MERGE 2026-07-10 — ghép "Sticker Campus" với base mới
   (style.css đã viết lại). Phần này sửa xung đột giữa 2 file và
   bổ sung các chi tiết sống động: nền doodle, nút bấm lún,
   huy hiệu 360°, ghim nhún nhảy, số bước hành trình.
==================================================================== */

/* 1) Nền trời có doodle mây / sao / đường nét đứt vẽ tay */
body {
    background-color: var(--sc-page-bg);
    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;
}

/* 2) Tiêu đề hero: chữ trắng viền navy như sticker (dòng cuối giữ hộp vàng) */
.hero-title-line {
    color: var(--sc-white);
    -webkit-text-stroke: 2.5px var(--sc-navy);
    paint-order: stroke fill;
    text-shadow: 4px 5px 0 rgba(7, 55, 168, .25);
    transform: rotate(-1deg);
    margin-left: 0;
}
.hero-title-line:last-child {
    color: var(--sc-navy);
    -webkit-text-stroke: 0;
    text-shadow: none;
    transform: rotate(-1deg);
}

/* Tiêu đề trang con: bỏ viền/bóng kế thừa từ base cho gọn */
.info-title,
.tour-copy h1 {
    -webkit-text-stroke: 0;
    text-shadow: none;
    transform: none;
    color: var(--sc-navy);
}

/* 3) Dọn thuộc tính base còn dính vào băng keo hero */
.hero-media::before,
.hero-media::after {
    padding: 0;
    border-radius: 2px;
    box-shadow: none;
    font-size: 0;
    animation: none;
}

/* 4) Khôi phục content cho các hình trang trí mà lớp Sticker Campus
      định vị sẵn (vòng tròn chanh/trời ở hero, ngôi sao ở guide-panel) */
.hero-section { position: relative; overflow: hidden; }
.hero-section::before,
.hero-section::after,
.guide-panel::after {
    content: "";
    position: absolute;
}

/* 5) Hành trình khám phá: giữ số bước, bỏ mũi tên (item đã đóng khung) */
.guide-item:not(:last-child)::after { display: none; }
.guide-icon::after {
    top: -9px;
    right: -9px;
    background: var(--sc-coral);
    border-color: var(--sc-white);
}

/* 6) Footer: bỏ viền răng cưa của base (đã có viền chanh + bo tròn) */
.site-footer::before { display: none; }

/* 6b) Ghim bản đồ: bỏ margin của base để translate(-50%,-50%) định vị đúng */
.map-pin { margin: 0; }

/* 7) Trả lại mũi tên cho select (base đặt ảnh nền, lớp trên đè mất) */
.map-selector,
.language-toggle {
    background-image: 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='%230737A8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* 8) Icon thẻ giới thiệu: sticker dán lệch trên mép thẻ */
.info-card { padding-top: 40px; }
.info-card-ico {
    position: absolute;
    top: -16px;
    left: 18px;
    transform: rotate(-4deg);
}
.info-cards .info-card:nth-child(3n+2) .info-card-ico { background: var(--sc-mint); transform: rotate(3deg); }
.info-cards .info-card:nth-child(3n) .info-card-ico { background: #FFDCE7; transform: rotate(-2deg); }

/* 9) Thanh tiến trình cuộn kiểu kẹo nhiều màu */
.scroll-progress { display: block !important; }

/* 10) Nút "bấm lún xuống" thay vì đứng im (đúng chất hoạt hình) */
.btn,
.tg-btn,
.back-link,
.site-nav a,
.map-selector {
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.btn:hover,
.btn:focus-visible {
    transform: translateY(3px);
    box-shadow: 1px 1px 0 var(--sc-navy);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.tour-hero-cta:hover {
    transform: translateY(3px);
    box-shadow: 1px 2px 0 var(--sc-coral);
}
.tg-btn:hover { transform: translateY(2px); box-shadow: 1px 1px 0 var(--sc-coral); }
.back-link:hover { transform: translateY(2px); box-shadow: 1px 1px 0 var(--sc-navy); }
.map-selector:hover { transform: translateY(2px); box-shadow: 1px 1px 0 var(--sc-navy); }

/* Card nhấc nhẹ khi rê chuột */
.school-card,
.tg-card,
.info-card,
.school-tile {
    transition: transform .22s ease !important;
}
.school-card:hover,
.tg-card:hover,
.info-card:hover,
.school-tile:hover {
    transform: translateY(-5px) !important;
}

/* Video giới thiệu luôn nằm phẳng: không xoay, không có hiệu ứng dựng thẳng. */
.tour-video-grid .tour-video-card:nth-child(n),
.tour-video-grid .tour-video-card:hover {
    transform: none !important;
    transition: none !important;
}

/* 11) Chuyển động nhỏ có chủ đích (tôn trọng reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    /* ghim xanh lá nhún nhảy trên ảnh hero */
    .pin-mascot {
        display: block;
        position: absolute;
        top: -24px;
        left: 7%;
        width: 46px;
        height: 56px;
        z-index: 4;
        animation: scPinHop 2.8s ease-in-out infinite !important;
    }
    .pin-mascot span {
        display: block;
        width: 42px;
        height: 42px;
        background: var(--sc-mint);
        border: 2.5px solid var(--sc-navy);
        border-radius: 50% 50% 50% 6%;
        transform: rotate(-45deg);
        position: relative;
        box-shadow: 2px 2px 0 var(--sc-navy);
    }
    .pin-mascot span::after {
        content: "";
        position: absolute;
        inset: 11px;
        border-radius: 50%;
        background: var(--sc-white);
        border: 2px solid var(--sc-navy);
    }

    /* huy hiệu 360° tròn trên khung tour lắc lư nhẹ */
    .tour-viewer::after { animation: stickerBob 3.2s ease-in-out infinite; }

    /* chuyển trang: màn trời + máy bay giấy */
    .page-transition { display: block !important; }
}
@keyframes scPinHop {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(-9px); }
    60%      { transform: translateY(0); }
    70%      { transform: translateY(-3px); }
    80%      { transform: translateY(0); }
}

@media (max-width: 780px) {
    .pin-mascot { display: none !important; }
}

/* ====================================================================
   LỚP TRANG TRÍ 2026-07-10b — cỏ hoa, máy bay giấy, mây, la bàn,
   dây cờ: thêm "khung cảnh" để web bớt trống trải, lơ lửng.
==================================================================== */

/* 1) Dải cỏ + hoa mọc đè lên mép footer (xuất hiện ở mọi trang) */
.site-footer { position: relative; }
.site-footer::before {
    content: "";
    display: block;
    position: absolute;
    top: -31px;
    left: 0;
    right: 0;
    height: 34px;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 34 Q20 8 40 34 Z M30 34 Q55 14 80 34 Z M70 34 Q95 6 120 34 Z M110 34 Q135 16 160 34 Z M150 34 Q175 9 200 34 Z M190 34 Q215 14 240 34 Z' fill='%231E8F55'/%3E%3Cpath d='M15 34 Q35 16 55 34 Z M58 34 Q80 12 102 34 Z M100 34 Q122 18 144 34 Z M140 34 Q162 11 184 34 Z M178 34 Q202 17 226 34 Z' fill='%232FB673'/%3E%3Cg stroke='%231E8F55' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 32q-2-8 1-13'/%3E%3Cpath d='M126 32q3-9 0-14'/%3E%3Cpath d='M206 32q-3-8-1-12'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M88 32V20' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='88' cy='16' r='4.5' fill='%23FF473D'/%3E%3Ccircle cx='88' cy='16' r='1.8' fill='%23FFD11A'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M168 32V18' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='168' cy='14' r='4.5' fill='%23FFD11A'/%3E%3Ccircle cx='168' cy='14' r='1.8' fill='%23FF473D'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M38 32V22' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='38' cy='18' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='38' cy='18' r='1.6' fill='%23FFD11A'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 240px 34px;
    background-position: bottom left;
    pointer-events: none;
}

/* 2) Doodle bầu trời trong hero (index): máy bay giấy, mây, sao, bụi cỏ */
.sc-sky-doodles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sc-sky-doodles span {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}
.sc-plane {
    top: 16px;
    left: 43%;
    width: 150px;
    height: 84px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='84' viewBox='0 0 150 84'%3E%3Cpath d='M8 64 Q40 24 92 36' fill='none' stroke='%230737A8' stroke-width='2.5' stroke-dasharray='1 9' stroke-linecap='round' opacity='.55'/%3E%3Cg stroke='%230737A8' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M140 18L96 34l14 8z' fill='%23FFFFFF'/%3E%3Cpath d='M140 18L110 42l4 14z' fill='%23DDF5FF'/%3E%3C/g%3E%3C/svg%3E");
}
.sc-cloud {
    width: 96px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40' viewBox='0 0 96 40'%3E%3Cpath d='M14 34q-12-2-9-12 3-9 13-7 2-11 14-11 11 0 14 8 5-5 12-3 8 2 8 9 9 0 10 8 1 9-10 9z' fill='%23FFFFFF' opacity='.95'/%3E%3C/svg%3E");
}
.sc-cloud-a { top: 12px; left: 26%; }
.sc-cloud-b { bottom: 26px; right: 40%; width: 72px; opacity: .85; }
.sc-star {
    top: 46px;
    right: 27%;
    width: 26px;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 2l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z' fill='%23FFD11A' stroke='%230737A8' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    transform: rotate(-12deg);
}
.sc-bush {
    bottom: 0;
    right: 5%;
    width: 240px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 34 Q20 8 40 34 Z M30 34 Q55 14 80 34 Z M70 34 Q95 6 120 34 Z M110 34 Q135 16 160 34 Z M150 34 Q175 9 200 34 Z M190 34 Q215 14 240 34 Z' fill='%231E8F55'/%3E%3Cpath d='M15 34 Q35 16 55 34 Z M58 34 Q80 12 102 34 Z M100 34 Q122 18 144 34 Z M140 34 Q162 11 184 34 Z M178 34 Q202 17 226 34 Z' fill='%232FB673'/%3E%3Cg%3E%3Cpath d='M88 32V20' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='88' cy='16' r='4.5' fill='%23FF473D'/%3E%3Ccircle cx='88' cy='16' r='1.8' fill='%23FFD11A'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M168 32V18' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='168' cy='14' r='4.5' fill='%23FFD11A'/%3E%3Ccircle cx='168' cy='14' r='1.8' fill='%23FF473D'/%3E%3C/g%3E%3C/svg%3E");
}

/* Chú bé chibi chào người xem ở góc hero. */
.hero-chibi {
    position: absolute;
    right: clamp(8px, 1.7vw, 24px);
    bottom: 0;
    z-index: 4;
    width: clamp(106px, 10.5vw, 142px);
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(2px 3px 0 rgba(7, 55, 168, .18));
    transform-origin: 50% 100%;
}

/* 3) La bàn góc bản đồ */
.map-stage::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='26' fill='%23FFFFFF' stroke='%230737A8' stroke-width='4'/%3E%3Ccircle cx='30' cy='30' r='20' fill='%23DDF5FF' stroke='%230737A8' stroke-width='2'/%3E%3Cpath d='M30 14l6 16-6 16-6-16z' fill='%23FFD11A' stroke='%230737A8' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M30 14l6 16h-12z' fill='%23FF473D' stroke='%230737A8' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%230737A8'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: rotate(8deg);
    pointer-events: none;
    z-index: 5;
}

/* 4) Dây cờ tam giác treo trên khu "Danh sách trường" */
.schools-section { position: relative; padding-top: 58px !important; }
.schools-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34px;
    right: 34px;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114' height='26' viewBox='0 0 114 26'%3E%3Cpath d='M0 3h114' stroke='%230737A8' stroke-width='3'/%3E%3Cg stroke='%230737A8' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4l11 15 11-15z' fill='%23FF473D'/%3E%3Cpath d='M42 4l11 15 11-15z' fill='%23FFD11A'/%3E%3Cpath d='M80 4l11 15 11-15z' fill='%238FE6B9'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 114px 26px;
    pointer-events: none;
}

/* 5) Cỏ chân panel trang Thông tin & trang Tour */
.info-hero,
.tour-hero {
    position: relative;
    overflow: hidden;
}
.info-hero::after,
.tour-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 240px;
    height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 34 Q20 8 40 34 Z M30 34 Q55 14 80 34 Z M70 34 Q95 6 120 34 Z M110 34 Q135 16 160 34 Z M150 34 Q175 9 200 34 Z M190 34 Q215 14 240 34 Z' fill='%231E8F55'/%3E%3Cpath d='M15 34 Q35 16 55 34 Z M58 34 Q80 12 102 34 Z M100 34 Q122 18 144 34 Z M140 34 Q162 11 184 34 Z M178 34 Q202 17 226 34 Z' fill='%232FB673'/%3E%3Cg%3E%3Cpath d='M88 32V20' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='88' cy='16' r='4.5' fill='%23FF473D'/%3E%3Ccircle cx='88' cy='16' r='1.8' fill='%23FFD11A'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M168 32V18' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='168' cy='14' r='4.5' fill='%23FFD11A'/%3E%3Ccircle cx='168' cy='14' r='1.8' fill='%23FF473D'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    pointer-events: none;
}
.info-hero::after { right: 18px; }
.tour-hero::after { left: 26px; }

/* 6) Chuyển động nhẹ cho doodle (tôn trọng reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    .sc-plane { animation: scFloat 4.2s ease-in-out infinite; }
    .sc-cloud-a { animation: scFloat 6.5s ease-in-out 1s infinite; }
    .sc-cloud-b { animation: scFloat 7.5s ease-in-out 2s infinite; }
    .hero-chibi { animation: scChibiHello 3.8s ease-in-out infinite; }
}
@keyframes scFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes scChibiHello {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50%      { transform: translateY(-5px) rotate(-1deg); }
}

/* 7) Mobile: giấu doodle bay lượn cho thoáng, giữ cỏ + dây cờ */
@media (max-width: 780px) {
    .sc-plane,
    .sc-cloud,
    .sc-star { display: none; }
    .sc-bush { width: 170px; right: 2%; }
    .hero-chibi { right: 3px; width: clamp(72px, 19vw, 92px); }
    .map-stage::after { width: 44px; height: 44px; }
    .schools-section { padding-top: 50px !important; }
    .schools-section::before { left: 20px; right: 20px; }
}

/* ====================================================================
   LỚP HOA MỸ 2026-07-10c — chiều sâu & khung cảnh: trời gradient,
   mặt trời tia nắng, chim én, sparkle, khinh khí cầu, hàng rào +
   cây + biển gỗ ở chân trang, texture giấy trên panel.
==================================================================== */

/* 1) Bầu trời: màu nền phẳng --sc-page-bg, chỉ giữ lớp doodle vẽ tay */
body {
    background-color: var(--sc-page-bg);
    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"),
        linear-gradient(180deg, var(--sc-page-bg) 0%, var(--sc-page-bg) 100%);
    background-size: 560px 560px, 100% 100%;
}

/* 2) Mặt trời tia nắng xoay chậm (thay vòng tròn chanh trống) */
.hero-section::before { display: none; }
.sc-sun {
    top: -30px;
    right: -26px;
    width: 158px;
    height: 158px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%230737A8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M60 6v14'/%3E%3Cpath d='M60 100v13'/%3E%3Cpath d='M6 60h13'/%3E%3Cpath d='M101 60h13'/%3E%3Cpath d='M22 22l10 10'/%3E%3Cpath d='M88 88l9 9'/%3E%3Cpath d='M98 22L88 32'/%3E%3Cpath d='M32 88l-10 9'/%3E%3Cpath d='M60 14v6' opacity='.4'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='30' fill='%23FFD11A' stroke='%230737A8' stroke-width='3.5'/%3E%3Ccircle cx='60' cy='60' r='21' fill='%23FFDF57'/%3E%3C/svg%3E");
}

/* 3) Chim én + sparkle lấp lánh */
.sc-birds {
    top: 52px;
    left: 12%;
    width: 60px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22' viewBox='0 0 60 22'%3E%3Cg fill='none' stroke='%230737A8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 14Q9 5 15 13Q21 5 28 14'/%3E%3Cpath d='M36 9q5-6 10 0q5-6 10 0' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
}
.sc-spark {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23FFFFFF' stroke='%230737A8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sc-spark-a { top: 118px; left: 3%; }
.sc-spark-b {
    bottom: 116px;
    left: 40%;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23FFD11A' stroke='%230737A8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 4) Khinh khí cầu trôi cạnh dải trường (trang chủ) */
.school-strip-section { position: relative; }
.school-strip-section::before {
    content: "";
    position: absolute;
    left: 3%;
    top: -34px;
    width: 82px;
    height: 116px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='120' viewBox='0 0 90 120'%3E%3Cg stroke='%230737A8' stroke-width='2.5'%3E%3Cpath d='M45 4C68 4 82 22 82 42c0 20-22 34-30 46H38C30 76 8 62 8 42 8 22 22 4 45 4z' fill='%23FFD11A'/%3E%3Cpath d='M45 4c10 0 18 18 18 38 0 18-8 34-12 46H39C35 76 27 60 27 42 27 22 35 4 45 4z' fill='%23FF473D'/%3E%3Cpath d='M45 4c4 0 7 18 7 38 0 18-3 34-5 46h-4C41 76 38 60 38 42 38 22 41 4 45 4z' fill='%23FFFFFF'/%3E%3Cpath d='M38 88l-4 12M52 88l4 12' fill='none'/%3E%3Crect x='32' y='100' width='26' height='15' rx='4' fill='%23A9683F'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}

/* 5) Chân trang: khung cảnh hoàn chỉnh — hàng rào, cây, hoa, biển gỗ */
.site-footer::before {
    top: -53px;
    height: 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='56' viewBox='0 0 480 56'%3E%3Cpath d='M0 56 Q25 30 50 56 Z M40 56 Q70 38 100 56 Z M90 56 Q120 28 150 56 Z M140 56 Q170 40 200 56 Z M190 56 Q220 32 250 56 Z M240 56 Q270 40 300 56 Z M290 56 Q320 30 350 56 Z M340 56 Q370 40 400 56 Z M390 56 Q420 32 450 56 Z M440 56 Q465 42 480 56 Z' fill='%231E8F55'/%3E%3Cpath d='M20 56 Q45 40 70 56 Z M110 56 Q135 42 160 56 Z M205 56 Q230 44 255 56 Z M305 56 Q330 42 355 56 Z M405 56 Q430 44 455 56 Z' fill='%232FB673'/%3E%3Cg stroke='%230737A8' stroke-width='2'%3E%3Crect x='14' y='36' width='78' height='5' rx='2' fill='%23FFFFFF'/%3E%3Crect x='14' y='45' width='78' height='5' rx='2' fill='%23FFFFFF'/%3E%3Crect x='20' y='28' width='9' height='26' rx='3' fill='%23FFFFFF'/%3E%3Crect x='48' y='28' width='9' height='26' rx='3' fill='%23FFFFFF'/%3E%3Crect x='76' y='28' width='9' height='26' rx='3' fill='%23FFFFFF'/%3E%3C/g%3E%3Cg%3E%3Crect x='168' y='28' width='9' height='26' rx='3' fill='%23A9683F' stroke='%230737A8' stroke-width='2'/%3E%3Ccircle cx='172' cy='18' r='15' fill='%232FB673' stroke='%230737A8' stroke-width='2.5'/%3E%3Ccircle cx='158' cy='25' r='10' fill='%231E8F55' stroke='%230737A8' stroke-width='2.5'/%3E%3Ccircle cx='187' cy='24' r='10' fill='%231E8F55' stroke='%230737A8' stroke-width='2.5'/%3E%3Ccircle cx='166' cy='14' r='2.2' fill='%23FF473D'/%3E%3Ccircle cx='179' cy='21' r='2.2' fill='%23FF473D'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M238 54V40' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='238' cy='36' r='4.5' fill='%23FF473D'/%3E%3Ccircle cx='238' cy='36' r='1.8' fill='%23FFD11A'/%3E%3Cpath d='M256 54V42' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='256' cy='38' r='4' fill='%23FFD11A'/%3E%3Ccircle cx='256' cy='38' r='1.6' fill='%23FF473D'/%3E%3Cpath d='M272 54V44' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='272' cy='40' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='272' cy='40' r='1.6' fill='%23FFD11A'/%3E%3C/g%3E%3Cg stroke='%230737A8' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='338' y='12' width='7' height='42' rx='2' fill='%23A9683F'/%3E%3Cpath d='M316 12h44l8 7-8 7h-44z' fill='%23FFD11A'/%3E%3Cpath d='M368 32h-44l-8 7 8 7h44z' fill='%23FF473D'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M424 54V42' stroke='%231E8F55' stroke-width='2'/%3E%3Ccircle cx='424' cy='38' r='4.5' fill='%23FF473D'/%3E%3Ccircle cx='424' cy='38' r='1.8' fill='%23FFD11A'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 480px 56px;
}

/* 6) Texture giấy li ti trên panel — bớt cảm giác phẳng "nhựa" */
.hero-section,
.tour-hero,
.map-section,
.schools-section,
.guide-panel,
.info-hero,
.school-overview-card,
.tg-group {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%230737A8' opacity='.05'%3E%3Ccircle cx='12' cy='22' r='1.2'/%3E%3Ccircle cx='48' cy='8' r='.9'/%3E%3Ccircle cx='86' cy='30' r='1.1'/%3E%3Ccircle cx='120' cy='14' r='.8'/%3E%3Ccircle cx='28' cy='64' r='1'/%3E%3Ccircle cx='70' cy='52' r='1.3'/%3E%3Ccircle cx='108' cy='72' r='.9'/%3E%3Ccircle cx='16' cy='108' r='1.1'/%3E%3Ccircle cx='56' cy='96' r='.8'/%3E%3Ccircle cx='94' cy='118' r='1.2'/%3E%3Ccircle cx='130' cy='98' r='1'/%3E%3Ccircle cx='40' cy='132' r='.9'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* 7) Chuyển động chậm rãi (tôn trọng reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    .sc-sun { animation: scSunSpin 70s linear infinite; }
    .sc-spark-a { animation: scTwinkle 3.2s ease-in-out infinite; }
    .sc-spark-b { animation: scTwinkle 4.1s ease-in-out 1.3s infinite; }
    .school-strip-section::before { animation: scBalloon 8.5s ease-in-out infinite; }
}
@keyframes scSunSpin {
    to { transform: rotate(360deg); }
}
@keyframes scTwinkle {
    0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.1) rotate(18deg); }
}
@keyframes scBalloon {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-13px) rotate(2deg); }
}

/* 8) Mobile: giữ khung cảnh, giấu vật bay cho thoáng */
@media (max-width: 1280px) {
    .school-strip-section::before { display: none; }
}
@media (max-width: 780px) {
    .sc-sun,
    .sc-birds,
    .sc-spark { display: none; }
    .hero-section::before { display: none; }
    .site-footer::before { background-size: 400px 47px; height: 47px; top: -44px; }
}

/* ====================================================================
   2026-07-11 — Nút "Tham quan 360" trong trang tour trường: đổi sang đỏ
==================================================================== */
body[data-page="tour"] .btn-primary,
body[data-page="tour"] .tour-hero-cta,
body[data-page="tour"] .tour-action-only .btn-primary {
    color: var(--sc-white);
    background: var(--sc-coral);
    border-color: var(--sc-navy);
    box-shadow: 4px 5px 0 var(--sc-lemon);
}

body[data-page="tour"] .btn-primary:hover,
body[data-page="tour"] .btn-primary:focus-visible,
body[data-page="tour"] .btn-primary:active {
    color: var(--sc-white);
    background: var(--red-strong, #E12F2A);
    box-shadow: 1px 2px 0 var(--sc-navy);
}

/* ====================================================================
   2026-07-22 — Các chỉnh sửa theo phản hồi tổng hợp
==================================================================== */

/* Hướng dẫn bản đồ thu gọn, đặt sát ngay trước bản đồ. */
.guide-panel-map {
    display: grid;
    grid-template-columns: minmax(230px, .9fr) minmax(0, 2fr);
    align-items: center;
    gap: 18px;
    margin: 18px auto 14px;
    padding: 14px 18px;
    border-radius: 17px 21px 16px 19px;
}

.guide-panel-map::after {
    display: none;
}

.guide-panel-map .guide-kicker {
    margin: 0 0 5px;
    padding: 3px 8px;
    font-size: .58rem;
}

.guide-panel-map h2 {
    margin: 0 0 3px;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.25;
}

.guide-panel-map .guide-lead {
    margin: 0;
    font-size: .72rem;
    line-height: 1.45;
}

.guide-panel-map .guide-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.guide-panel-map .guide-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 7px 8px;
    border-radius: 11px 14px 10px 13px;
    box-shadow: 1px 2px 0 var(--sc-lemon);
}

.guide-panel-map .guide-icon {
    min-width: 34px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    font-size: .72rem;
}

.guide-panel-map .guide-icon::after,
.guide-panel-map .guide-item p {
    display: none;
}

.guide-panel-map .guide-item strong {
    font-size: .74rem;
    line-height: 1.25;
}

.guide-panel-map + .map-section {
    margin-top: 16px !important;
}

/* Hotspot bông hoa đỏ năm cánh, lấy cảm hứng từ mascot trong ảnh mẫu. */
.map-pin {
    width: 58px;
    height: 58px;
    overflow: visible;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

.map-pin::before {
    display: none !important;
}

.map-pin-flower {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: center;
    filter: drop-shadow(2px 3px 0 rgba(7, 55, 168, .78));
    transition: transform .22s ease, filter .22s ease;
}

.map-pin-flower > i {
    position: absolute;
    z-index: 1;
    display: block;
    width: 24px;
    height: 29px;
    background: #FF2D3B;
    border: 2.5px solid #BF1025;
    border-radius: 72% 72% 48% 48%;
    box-shadow: inset 4px 3px 0 rgba(255, 115, 121, .55);
    transform-origin: 50% 88%;
}

.map-pin-flower > i:nth-child(1) { top: -1px; left: 17px; transform: rotate(0deg); }
.map-pin-flower > i:nth-child(2) { top: 9px; left: 35px; transform: rotate(72deg); }
.map-pin-flower > i:nth-child(3) { top: 30px; left: 29px; transform: rotate(144deg); }
.map-pin-flower > i:nth-child(4) { top: 30px; left: 5px; transform: rotate(216deg); }
.map-pin-flower > i:nth-child(5) { top: 9px; left: -1px; transform: rotate(288deg); }

.map-pin-face {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    width: 29px;
    height: 29px;
    background: #FF2636;
    border: 2.5px solid #BF1025;
    border-radius: 50%;
    box-shadow: inset 5px 4px 0 rgba(255, 119, 125, .5);
}

.map-pin-face::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 7px;
    width: 4px;
    height: 5px;
    background: var(--sc-navy);
    border-radius: 50%;
    box-shadow: 9px 0 0 var(--sc-navy);
}

.map-pin-face::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 9px;
    width: 8px;
    height: 5px;
    border-bottom: 2.5px solid var(--sc-white);
    border-radius: 0 0 8px 8px;
    transform: rotate(-5deg);
}

.map-pin:hover .map-pin-flower,
.map-pin:focus-visible .map-pin-flower {
    transform: translateY(-4px) rotate(-5deg) scale(1.06);
}

.map-pin.is-active .map-pin-flower {
    filter: drop-shadow(0 0 2px var(--sc-white)) drop-shadow(0 0 8px var(--sc-lemon)) drop-shadow(2px 3px 0 rgba(7, 55, 168, .78));
    animation: flowerHello .65s cubic-bezier(.2, .8, .3, 1.25);
}

.map-pin::after {
    bottom: calc(100% + 8px);
}

@keyframes flowerHello {
    0% { transform: scale(.72) rotate(-16deg); }
    55% { transform: scale(1.12) rotate(7deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Dải trường tự chạy liên tục và có khoảng thở ở hai mép. */
.school-strip-section {
    overflow: hidden;
    padding: 22px 0 48px;
}

.school-strip {
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 16px max(24px, calc((100vw - 1180px) / 2));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.school-strip-track,
.school-strip.is-visible .school-strip-track {
    display: flex;
    align-items: stretch;
    grid-template-columns: none;
    gap: 18px;
    width: max-content;
    padding: 0;
    transform: none;
    animation: scSchoolStrip 34s linear infinite !important;
    animation-play-state: paused !important;
}

.school-strip.is-visible .school-strip-track {
    animation-play-state: running !important;
}

.school-strip:hover .school-strip-track {
    animation-play-state: paused !important;
}

.school-tile,
.school-tile[aria-hidden="true"] {
    display: flex !important;
    flex: 0 0 clamp(235px, 25vw, 320px);
}

.school-tile-placeholder {
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(-45deg, var(--sc-pale) 0 18px, var(--sc-white) 18px 36px);
}

.school-tile-placeholder b {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 3px solid var(--sc-navy);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--sc-lemon);
    font-family: var(--sc-font-display);
    font-size: 1rem;
    font-weight: 400;
}

@keyframes scSchoolStrip {
    to { transform: translateX(calc(-50% - 9px)); }
}

/* Footer còn hai cột; logo luôn nằm phía trên các liên kết. */
.footer-inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr) !important;
    align-items: start;
}

.footer-community {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-community .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

@media (max-width: 900px) {
    .guide-panel-map {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .footer-inner {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 780px) {
    .hero-copy {
        min-width: 0;
        width: 100%;
    }

    .hero-title {
        max-width: 100%;
        font-size: clamp(28px, 9vw, 36px);
        letter-spacing: -.045em;
    }

    .hero-title-line {
        max-width: 100%;
    }

    .guide-panel-map {
        width: calc(100% - 18px);
        margin-block: 14px 10px;
        padding: 12px;
    }

    .guide-panel-map .guide-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guide-panel-map .guide-item {
        justify-content: center;
        min-height: 42px;
        padding: 5px;
    }

    .guide-panel-map .guide-icon {
        min-width: 30px;
        width: 30px;
        height: 30px;
    }

    .guide-panel-map .guide-item strong {
        display: none;
    }

    .school-strip {
        width: 100%;
        padding-inline: 18px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .school-tile,
    .school-tile[aria-hidden="true"] {
        flex-basis: clamp(220px, 76vw, 292px);
    }

    .footer-community,
    .footer-community .footer-links {
        align-items: stretch;
    }
}

/* ====================================================================
   2026-07-22 — Hero theo ảnh mẫu và hotspot thu nhỏ
==================================================================== */

/* Banner ngang gọn: nội dung bên trái, ảnh trường bên phải, hành trình
   nằm trọn trong cùng một khung như bố cục tham khảo. */
.hero-section {
    width: min(calc(100% - 32px), 1180px);
    margin: 10px auto 24px;
    padding: 24px 0 17px;
    border-radius: 30px 38px 28px 34px;
}

.hero-grid {
    width: calc(100% - 52px);
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: center;
    gap: clamp(22px, 3vw, 38px);
    padding: 0;
}

.hero-grid::before {
    right: 35%;
    width: 145px;
}

.hero-copy {
    min-width: 0;
}

.hero-copy .eyebrow {
    margin-bottom: 9px;
    padding: 5px 9px;
    font-size: .58rem;
}

.hero-title {
    max-width: 100%;
    font-size: clamp(38px, 4.3vw, 57px);
    line-height: 1.01;
    letter-spacing: -.035em;
}

.hero-title-line:last-child {
    margin-top: 3px;
    padding: 0 8px 3px;
    border-width: 2px;
    box-shadow: 2px 3px 0 var(--sc-coral);
}

.hero-subtitle {
    max-width: 530px;
    margin-top: 12px;
    font-size: .78rem;
    line-height: 1.48;
}

.hero-subtitle-en {
    margin-top: 5px;
    font-size: .62rem;
}

.hero-actions {
    gap: 9px;
    margin-top: 14px;
}

.hero-actions .btn {
    min-height: 42px;
    padding: 8px 15px;
    font-size: .72rem;
}

.hero-actions .btn-tour-featured {
    min-height: 42px;
    padding-inline: 17px;
    box-shadow: 3px 4px 0 var(--sc-coral);
}

.hero-sticker-row {
    gap: 5px;
    margin-top: 12px;
}

.hero-sticker-row span {
    padding: 4px 7px;
    font-size: .54rem;
}

.hero-media {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 7px;
    overflow: visible;
    background: var(--sc-white);
    border: 2.5px solid var(--sc-navy);
    border-radius: 18px 23px 17px 21px;
    box-shadow: 4px 5px 0 var(--sc-lemon);
    transform: rotate(.6deg);
}

.hero-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9.7;
    object-fit: cover;
    border: 2px solid var(--sc-navy);
    border-radius: 12px 16px 11px 14px;
}

.hero-chibi,
.pin-mascot {
    display: none !important;
}

.hero-journey {
    position: relative;
    z-index: 2;
    width: calc(100% - 52px);
    margin: 17px auto 0;
    padding-top: 12px;
    border-top: 2px dashed rgba(7, 55, 168, .46);
}

.hero-journey-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 7px;
}

.hero-journey-heading strong {
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-size: .9rem;
    font-weight: 400;
}

.hero-journey-heading span {
    color: var(--sc-ink-soft);
    font-size: .58rem;
    font-weight: 800;
}

.journey-route {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 9px 8px;
}

.journey-route::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 10%;
    left: 10%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--sc-navy) 0 8px, transparent 8px 13px);
    opacity: .72;
}

.journey-route span {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
}

.journey-route i {
    display: block;
    width: 13px;
    height: 13px;
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    border-radius: 50% 50% 50% 4px;
    box-shadow: 1px 1px 0 var(--sc-lemon);
    transform: rotate(-45deg);
}

.journey-route span:nth-child(2) i { background: var(--sc-lemon); }
.journey-route span:nth-child(3) i { background: var(--sc-mint); }
.journey-route span:nth-child(4) i { background: var(--sc-sky); }
.journey-route span:nth-child(5) i { background: var(--sc-coral); }
.journey-route span:nth-child(6) i { background: #A695F4; }

.journey-route b {
    max-width: 100%;
    overflow: hidden;
    color: var(--sc-navy);
    font-size: .5rem;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journey-school-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.journey-school-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 55px;
    padding: 5px;
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 1.5px solid var(--sc-navy);
    border-radius: 10px 13px 9px 12px;
    box-shadow: 2px 2px 0 var(--sc-lemon);
    text-decoration: none;
}

.journey-school-card img,
.journey-school-card > b {
    width: 48px;
    height: 40px;
    object-fit: cover;
    border: 1px solid var(--sc-navy);
    border-radius: 7px 9px 6px 8px;
}

.journey-school-card > b {
    display: grid;
    place-items: center;
    color: var(--sc-white);
    background: var(--sc-coral);
    font-family: var(--sc-font-display);
    font-size: .54rem;
    font-weight: 400;
}

.journey-school-card:nth-child(3) > b { background: #1E8F55; }
.journey-school-card:nth-child(5) > b { background: var(--sc-navy); }

.journey-school-card span {
    display: -webkit-box;
    overflow: hidden;
    font-size: .52rem;
    font-weight: 800;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.journey-school-card:hover,
.journey-school-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 2px 4px 0 var(--sc-coral);
}

/* Vùng bấm vẫn 32px, phần bông hoa nhìn thấy chỉ 20px: nhỏ hơn
   xấp xỉ ba lần so với phiên bản trước. */
.map-pin {
    width: 32px;
    height: 32px;
}

.map-pin-flower {
    inset: 6px;
    width: 20px;
    height: 20px;
    filter: drop-shadow(1px 1px 0 rgba(7, 55, 168, .8));
}

.map-pin-flower > i {
    width: 8px;
    height: 10px;
    border-width: 1px;
    box-shadow: inset 1px 1px 0 rgba(255, 115, 121, .55);
}

.map-pin-flower > i:nth-child(1) { top: 1px; left: 6px; }
.map-pin-flower > i:nth-child(2) { top: 4px; left: 11px; }
.map-pin-flower > i:nth-child(3) { top: 9px; left: 9px; }
.map-pin-flower > i:nth-child(4) { top: 9px; left: 3px; }
.map-pin-flower > i:nth-child(5) { top: 4px; left: 1px; }

.map-pin-face {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-width: 1px;
    box-shadow: inset 1px 1px 0 rgba(255, 119, 125, .5);
}

.map-pin-face::before {
    top: 2px;
    left: 2px;
    width: 1.5px;
    height: 2px;
    box-shadow: 4px 0 0 var(--sc-navy);
}

.map-pin-face::after {
    top: 5px;
    left: 3px;
    width: 3px;
    height: 2px;
    border-bottom-width: 1px;
}

.map-pin:hover .map-pin-flower,
.map-pin:focus-visible .map-pin-flower {
    transform: translateY(-2px) rotate(-5deg) scale(1.08);
}

.map-pin.is-active .map-pin-flower {
    filter: drop-shadow(0 0 1px var(--sc-white)) drop-shadow(0 0 4px var(--sc-lemon)) drop-shadow(1px 1px 0 rgba(7, 55, 168, .8));
}

.map-pin::after {
    bottom: calc(100% + 2px);
    min-width: 116px;
    padding: 4px 6px;
    font-size: .54rem;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        width: calc(100% - 36px);
        gap: 18px;
    }

    .hero-title {
        font-size: clamp(32px, 5.1vw, 45px);
    }

    .hero-journey {
        width: calc(100% - 36px);
    }

    .journey-school-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 680px) {
    .hero-section {
        width: calc(100% - 18px);
        padding: 18px 0 14px;
        border-radius: 23px 28px 21px 25px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        width: calc(100% - 26px);
        gap: 17px;
    }

    .hero-title {
        font-size: clamp(31px, 10vw, 42px);
    }

    .hero-subtitle {
        font-size: .72rem;
    }

    .hero-media {
        padding: 5px;
    }

    .hero-journey {
        width: calc(100% - 26px);
        overflow: hidden;
    }

    .hero-journey-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    .journey-school-cards {
        display: flex;
        width: 100%;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scrollbar-width: thin;
    }

    .journey-school-card {
        flex: 0 0 122px;
    }

    .journey-route {
        display: none;
    }
}

/* Hướng dẫn tối giản: bỏ khung lớn và các ô con, chỉ giữ nội dung cần thiết. */
.guide-panel-map {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr);
    gap: 12px;
    margin: 9px auto 4px;
    padding: 5px 2px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}

.guide-panel-map .guide-kicker {
    margin-bottom: 2px;
    padding: 0;
    color: var(--sc-coral);
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
}

.guide-panel-map h2 {
    margin: 0;
    font-size: clamp(.88rem, 1.25vw, 1.05rem);
}

.guide-panel-map .guide-lead {
    display: none;
}

.guide-panel-map .guide-list {
    gap: 5px;
}

.guide-panel-map .guide-item {
    min-height: 32px;
    gap: 6px;
    padding: 2px 4px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}

.guide-panel-map .guide-icon {
    min-width: 27px;
    width: 27px;
    height: 27px;
    border-width: 1.5px;
    box-shadow: 1px 1px 0 var(--sc-lemon);
    font-size: .58rem;
}

.guide-panel-map .guide-item strong {
    font-size: .65rem;
}

.guide-panel-map + .map-section {
    margin-top: 7px !important;
}

@media (max-width: 900px) {
    .guide-panel-map {
        grid-template-columns: minmax(180px, .75fr) minmax(0, 1.6fr);
        gap: 7px;
    }
}

@media (max-width: 680px) {
    .guide-panel-map {
        grid-template-columns: 1fr;
        width: calc(100% - 26px);
        gap: 5px;
        margin-block: 6px 2px;
        padding: 3px 0;
    }

    .guide-panel-map .guide-heading-compact {
        text-align: center;
    }

    .guide-panel-map .guide-kicker {
        display: none;
    }

    .guide-panel-map .guide-list {
        gap: 2px;
    }

    .guide-panel-map .guide-item {
        min-height: 28px;
    }
}

/* Khôi phục tỷ lệ hiển thị dễ đọc và tách hành trình thành một mục riêng. */
.hero-section {
    margin-bottom: 22px;
    padding: 32px 0 28px;
}

.hero-grid {
    width: calc(100% - 64px);
    gap: clamp(28px, 3.6vw, 46px);
}

.hero-copy .eyebrow {
    margin-bottom: 12px;
    padding: 6px 11px;
    font-size: .68rem;
}

.hero-title {
    /* Cột hero chỉ rộng 468px ở màn 1440px, mà dòng "SchoolCarto" ở 66px đo được
       499px nên chữ tràn ra ngoài cột. 58px là cỡ lớn nhất còn vừa. */
    font-size: clamp(40px, 4.4vw, 58px);
}

.hero-subtitle {
    margin-top: 16px;
    font-size: .92rem;
    line-height: 1.55;
}

.hero-subtitle-en {
    margin-top: 7px;
    font-size: .72rem;
}

.hero-actions {
    gap: 12px;
    margin-top: 19px;
}

.hero-actions .btn,
.hero-actions .btn-tour-featured {
    min-height: 49px;
    padding: 10px 19px;
    font-size: .84rem;
}

.hero-sticker-row {
    margin-top: 16px;
}

.hero-sticker-row span {
    padding: 5px 8px;
    font-size: .62rem;
}

.journey-section.hero-journey {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 32px), 1180px);
    margin: 0 auto 20px;
    padding: 18px 22px 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, .88);
    border: 2.5px solid var(--sc-navy);
    border-radius: 20px 25px 18px 23px;
    box-shadow: 3px 4px 0 var(--sc-lemon);
}

.journey-section::before {
    content: "";
    position: absolute;
    top: -42px;
    right: -34px;
    width: 110px;
    height: 110px;
    background: var(--sc-pale);
    border: 2px solid var(--sc-navy);
    border-radius: 50%;
    opacity: .7;
    pointer-events: none;
}

.journey-section .hero-journey-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 11px;
}

.journey-section .hero-journey-heading strong {
    font-size: 1.28rem;
}

.journey-section .hero-journey-heading span {
    font-size: .78rem;
}

.journey-section .journey-route {
    margin: 0 12px 12px;
}

.journey-section .journey-route::before {
    top: 8px;
}

.journey-section .journey-route i {
    width: 17px;
    height: 17px;
}

.journey-section .journey-route b {
    font-size: .66rem;
}

.journey-section .journey-school-cards {
    gap: 11px;
}

.journey-section .journey-school-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    min-height: 72px;
    padding: 7px;
    border-width: 2px;
}

.journey-section .journey-school-card img,
.journey-section .journey-school-card > b {
    width: 62px;
    height: 54px;
}

.journey-section .journey-school-card > b {
    font-size: .68rem;
}

.journey-section .journey-school-card span {
    font-size: .7rem;
    line-height: 1.4;
}

.guide-panel-map {
    margin-top: 14px;
    padding-block: 9px;
}

.guide-panel-map h2 {
    font-size: clamp(1rem, 1.5vw, 1.22rem);
}

.guide-panel-map .guide-kicker {
    font-size: .68rem;
}

.guide-panel-map .guide-item {
    min-height: 40px;
    gap: 8px;
}

.guide-panel-map .guide-icon {
    min-width: 32px;
    width: 32px;
    height: 32px;
    font-size: .68rem;
}

.guide-panel-map .guide-item strong {
    font-size: .75rem;
}

@media (max-width: 900px) {
    .hero-grid {
        width: calc(100% - 42px);
    }

    .hero-title {
        /* Cột hero ở dải này chỉ rộng ~38% bề ngang, mà "SchoolCarto" cần
           khoảng 7.6 lần cỡ chữ, nên 5.7vw làm chữ tràn khỏi cột. */
        font-size: clamp(32px, 4.8vw, 44px);
    }

    .journey-section .journey-school-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 680px) {
    .hero-section {
        padding: 24px 0 20px;
    }

    .hero-grid {
        width: calc(100% - 28px);
    }

    .hero-title {
        font-size: clamp(34px, 10.5vw, 44px);
    }

    .hero-subtitle {
        font-size: .82rem;
    }

    .journey-section.hero-journey {
        width: calc(100% - 18px);
        margin-bottom: 14px;
        padding: 15px 13px 14px;
    }

    .journey-section .hero-journey-heading strong {
        font-size: 1.05rem;
    }

    .journey-section .hero-journey-heading span {
        font-size: .7rem;
    }

    .journey-section .journey-school-card {
        flex-basis: 150px;
    }

    .guide-panel-map h2 {
        font-size: .96rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ====================================================================
   2026-07-23 — CTA tham quan 360 nổi bật ngay trong hero
==================================================================== */
body[data-page="home"] .hero-actions .btn-tour-featured {
    position: relative;
    isolation: isolate;
    min-height: 62px;
    padding: 12px 25px 12px 76px;
    overflow: visible;
    color: var(--sc-white);
    background: #D9342F;
    border: 3px solid var(--sc-navy);
    border-radius: 16px 22px 15px 20px;
    box-shadow:
        5px 7px 0 var(--sc-navy),
        0 0 0 6px rgba(255, 211, 54, .72);
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: .025em;
    text-transform: uppercase;
    animation: scTourCtaAttention 3.2s ease-in-out infinite;
}

body[data-page="home"] .hero-actions .btn-tour-featured::before {
    content: "360°";
    position: absolute;
    top: 50%;
    left: 12px;
    display: grid;
    place-items: center;
    width: 50px;
    height: 42px;
    color: var(--sc-navy);
    background: var(--sc-lemon);
    border: 2px solid var(--sc-navy);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--sc-white);
    font-family: var(--sc-font-display);
    font-size: .92rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%) rotate(-6deg);
}

body[data-page="home"] .hero-actions .btn-tour-featured::after {
    content: "→";
    display: inline-block;
    margin-left: 4px;
    font-size: 1.35rem;
    line-height: 1;
    transition: transform .2s ease;
}

body[data-page="home"] .hero-actions .btn-tour-featured:hover,
body[data-page="home"] .hero-actions .btn-tour-featured:focus-visible {
    color: var(--sc-white);
    background: #B92320;
    box-shadow:
        2px 3px 0 var(--sc-navy),
        0 0 0 7px rgba(255, 211, 54, .95);
    transform: translateY(4px);
    animation-play-state: paused;
}

body[data-page="home"] .hero-actions .btn-tour-featured:hover::after,
body[data-page="home"] .hero-actions .btn-tour-featured:focus-visible::after {
    transform: translateX(5px);
}

body[data-page="home"] .hero-actions .btn-tour-featured:focus-visible {
    outline: 4px solid var(--sc-white);
    outline-offset: 5px;
}

body[data-page="home"] .hero-actions .btn-map-secondary {
    min-height: 50px;
    padding-inline: 17px;
    font-size: .82rem;
}

@keyframes scTourCtaAttention {
    0%, 68%, 100% {
        box-shadow:
            5px 7px 0 var(--sc-navy),
            0 0 0 6px rgba(255, 211, 54, .72);
        transform: translateY(0) rotate(0);
    }
    76% {
        box-shadow:
            5px 7px 0 var(--sc-navy),
            0 0 0 12px rgba(255, 211, 54, .18);
        transform: translateY(-3px) rotate(-1deg);
    }
    84% {
        box-shadow:
            5px 7px 0 var(--sc-navy),
            0 0 0 7px rgba(255, 211, 54, .55);
        transform: translateY(0) rotate(.7deg);
    }
    91% {
        transform: translateY(-2px) rotate(0);
    }
}

@media (max-width: 680px) {
    body[data-page="home"] .hero-actions .btn-tour-featured {
        min-height: 60px;
        padding: 11px 18px 11px 70px;
        font-size: .92rem;
    }

    body[data-page="home"] .hero-actions .btn-tour-featured::before {
        left: 10px;
        width: 46px;
        height: 40px;
        font-size: .84rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .hero-actions .btn-tour-featured {
        animation: none !important;
    }
}

/* Bộ element nhận diện được duyệt cho trang chủ và trang thông tin. */
.brand-element {
    position: absolute;
    z-index: 3;
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
    filter: drop-shadow(2px 3px 0 rgba(15, 68, 178, .16));
}

body[data-page="home"] .journey-section .journey-school-cards,
body[data-page="home"] .journey-section .journey-route,
body[data-page="home"] .guide-panel-map > :not(.brand-element),
body[data-page="home"] .map-section > :not(.brand-element),
body[data-page="home"] .schools-section > :not(.brand-element),
body[data-page="info"] .info-hero > :not(.brand-element),
body[data-page="info"] .info-about-section > :not(.brand-element) {
    position: relative;
    z-index: 1;
}

.brand-element--journey-plane {
    top: 8px;
    right: 34px;
    width: 48px;
    transform: rotate(-8deg);
}

.brand-element--journey-flower {
    right: 4px;
    bottom: 0;
    z-index: 0;
    width: 62px;
    opacity: .7;
    transform: rotate(7deg);
}

.brand-element--guide-puzzle {
    top: -27px;
    right: 30px;
    width: 68px;
    transform: rotate(7deg);
}

.brand-element--map-accent {
    top: 24px;
    right: 228px;
    width: 54px;
    transform: rotate(-8deg);
}

.brand-element--schools-camera {
    top: 18px;
    right: 28px;
    width: 68px;
    transform: rotate(5deg);
}

body[data-page="info"] .info-hero,
body[data-page="info"] .info-about-section {
    position: relative;
}

body[data-page="info"] .info-hero {
    margin-bottom: 16px;
    padding-right: 156px;
}

.brand-element--info-computer {
    right: 28px;
    bottom: 26px;
    width: 104px;
    transform: rotate(3deg);
}

body[data-page="info"] .info-about-section > .section-heading {
    padding-right: 142px;
}

.brand-element--info-browser {
    top: 8px;
    right: 22px;
    width: 118px;
    transform: rotate(-3deg);
}

.brand-divider {
    display: block;
    width: min(230px, 46vw);
    height: auto;
    margin: 6px auto 28px;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
    filter: drop-shadow(2px 3px 0 rgba(255, 92, 82, .16));
}

.brand-divider--b {
    margin-top: 24px;
    margin-bottom: 18px;
    transform: rotate(-1deg);
}

@media (prefers-reduced-motion: no-preference) {
    .brand-element--journey-plane,
    .brand-element--guide-puzzle,
    .brand-element--schools-camera,
    .brand-element--info-computer {
        animation: brand-element-float 4.8s ease-in-out infinite;
    }

    .brand-element--guide-puzzle,
    .brand-element--info-computer {
        animation-delay: -2.1s;
    }
}

@keyframes brand-element-float {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -5px;
    }
}

@media (max-width: 900px) {
    .brand-element--map-accent {
        display: none;
    }

    .brand-element--guide-puzzle {
        right: 20px;
        width: 56px;
    }

    .brand-element--schools-camera {
        right: 18px;
        width: 56px;
    }

    body[data-page="info"] .info-hero {
        padding-right: 128px;
    }

    .brand-element--info-computer {
        right: 22px;
        width: 82px;
    }
}

@media (max-width: 680px) {
    .brand-element--journey-plane {
        top: 9px;
        right: 16px;
        width: 37px;
    }

    .brand-element--journey-flower {
        width: 45px;
    }

    .brand-element--guide-puzzle {
        top: -18px;
        right: 12px;
        width: 42px;
    }

    .brand-element--schools-camera {
        top: 14px;
        right: 12px;
        width: 43px;
    }

    body[data-page="info"] .info-hero {
        padding-right: 24px;
    }

    .brand-element--info-computer,
    .brand-element--info-browser {
        display: none;
    }

    body[data-page="info"] .info-about-section > .section-heading {
        padding-right: 0;
    }

    .brand-divider {
        width: min(190px, 58vw);
        margin-bottom: 20px;
    }
}

/* ====================================================================
   2026-07-23 — Tên trường gọn hơn + căn giữa hàng cuối danh sách tour
==================================================================== */
body[data-page="tour"] .tour-copy h1 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    font-size: clamp(1.9rem, 3.4vw, 3.25rem);
    line-height: 1.12;
    overflow-wrap: normal;
    text-wrap: wrap;
    word-break: normal;
}

@media (min-width: 901px) {
    body[data-page="home"] .card-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body[data-page="home"] .card-grid .school-card {
        grid-column: span 2;
    }

}

@media (max-width: 780px) {
    body[data-page="tour"] .tour-copy h1 {
        font-size: clamp(1.6rem, 6.4vw, 2rem);
        line-height: 1.14;
    }
}

/* Tuyến hành trình chuyển thành nét đứt chéo và viết đầy đủ "Chuyên". */
body[data-page="home"] .journey-section .journey-route::before {
    display: none;
}

body[data-page="home"] .journey-section .journey-route span {
    --route-shift: 0px;
    --route-angle: 2.2deg;
    padding-top: var(--route-shift);
    isolation: isolate;
}

body[data-page="home"] .journey-section .journey-route span:nth-child(even) {
    --route-shift: 9px;
    --route-angle: -2.2deg;
}

body[data-page="home"] .journey-section .journey-route span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(7px + var(--route-shift));
    left: calc(50% + 10px);
    z-index: 0;
    width: calc(100% - 20px);
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--sc-navy) 0 8px,
        transparent 8px 13px
    );
    opacity: .72;
    transform: rotate(var(--route-angle));
    transform-origin: left center;
}

body[data-page="home"] .journey-section .journey-route i,
body[data-page="home"] .journey-section .journey-route b {
    position: relative;
    z-index: 1;
}

body[data-page="home"] .journey-section .journey-route b {
    max-width: 95%;
    min-height: 2.5em;
    overflow: visible;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
}

/* ====================================================================
   2026-07-23 — Bảng màu phụ đã duyệt + cặp CTA nằm cạnh nhau
==================================================================== */
body[data-page="home"] .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: 10px;
}

body[data-page="home"] .hero-actions .btn-tour-featured {
    min-height: 54px;
    padding: 10px 19px;
    color: var(--sc-white);
    background: #D9342F;
    box-shadow:
        4px 5px 0 var(--sc-navy),
        0 0 0 5px rgba(255, 209, 26, .62);
    font-size: .96rem;
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: none;
    animation: scTourCtaAttention 3.8s ease-in-out infinite;
}

body[data-page="home"] .hero-actions .btn-tour-featured::before,
body[data-page="home"] .hero-actions .btn-tour-featured::after {
    content: none;
    display: none;
}

body[data-page="home"] .hero-actions .btn-tour-featured:hover,
body[data-page="home"] .hero-actions .btn-tour-featured:focus-visible {
    color: var(--sc-white);
    background: #B92320;
    box-shadow:
        2px 3px 0 var(--sc-navy),
        0 0 0 6px rgba(255, 209, 26, .88);
    transform: translateY(3px);
}

body[data-page="home"] .hero-actions .btn-map-secondary {
    align-self: center;
    min-height: 50px;
    padding: 9px 14px;
    color: var(--sc-navy);
    background: #8FE6B9;
    border-color: var(--sc-navy);
    box-shadow: 3px 4px 0 #5CB5EA;
    font-size: .84rem;
}

body[data-page="home"] .hero-actions .btn-map-secondary:hover,
body[data-page="home"] .hero-actions .btn-map-secondary:focus-visible {
    color: var(--sc-navy);
    background: #70D9A3;
    box-shadow: 1px 2px 0 var(--sc-navy);
}

@keyframes scTourCtaAttention {
    0%, 78%, 100% {
        box-shadow:
            4px 5px 0 var(--sc-navy),
            0 0 0 5px rgba(255, 209, 26, .62);
        transform: translateY(0);
    }
    88% {
        box-shadow:
            4px 5px 0 var(--sc-navy),
            0 0 0 10px rgba(255, 209, 26, .14);
        transform: translateY(-1px);
    }
}

/* Ba nhãn chiến dịch dùng ba màu riêng. */
body[data-page="home"] .hero-sticker-row span:nth-child(1) {
    color: var(--sc-navy);
    background: #FFD11A;
    box-shadow: 2px 2px 0 #FF8A5B;
}

body[data-page="home"] .hero-sticker-row span:nth-child(2) {
    color: var(--sc-navy);
    background: #8FE6B9;
    box-shadow: 2px 2px 0 #5CB5EA;
}

body[data-page="home"] .hero-sticker-row span:nth-child(3) {
    color: var(--sc-navy);
    background: #CEC5FF;
    box-shadow: 2px 2px 0 #FF8B82;
}

/* Mỗi điểm trong hành trình có một nền pastel riêng. */
body[data-page="home"] .journey-section .journey-school-card:nth-child(1) { background: #E8F7FF; }
body[data-page="home"] .journey-section .journey-school-card:nth-child(2) { background: #FFF5C2; }
body[data-page="home"] .journey-section .journey-school-card:nth-child(3) { background: #E5F8ED; }
body[data-page="home"] .journey-section .journey-school-card:nth-child(4) { background: #FFE7E2; }
body[data-page="home"] .journey-section .journey-school-card:nth-child(5) { background: #EEE9FF; }
body[data-page="home"] .journey-section .journey-school-card:nth-child(6) { background: #E5F3FF; }

body[data-page="home"] .journey-section .journey-route span:nth-child(1) i { background: #5CB5EA; }
body[data-page="home"] .journey-section .journey-route span:nth-child(2) i { background: #FFD11A; }
body[data-page="home"] .journey-section .journey-route span:nth-child(3) i { background: #63D19B; }
body[data-page="home"] .journey-section .journey-route span:nth-child(4) i { background: #FF8B82; }
body[data-page="home"] .journey-section .journey-route span:nth-child(5) i { background: #A695F4; }
body[data-page="home"] .journey-section .journey-route span:nth-child(6) i { background: #5CB5EA; }

/* Ba trạng thái hướng dẫn bản đồ được phân biệt bằng màu. */
body[data-page="home"] .guide-panel-map .guide-icon-blue {
    color: var(--sc-navy);
    background: #BFE4FF;
}

body[data-page="home"] .guide-panel-map .guide-icon-gold {
    color: var(--sc-navy);
    background: #FFD11A;
}

body[data-page="home"] .guide-panel-map .guide-icon-red {
    color: var(--sc-navy);
    background: #FF8B82;
}

/* Bộ chọn khu vực dùng tím nhạt, chuyển vàng kem khi tương tác. */
body[data-page="home"] .map-selector {
    background-color: #F1EDFF;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background-color .2s ease !important;
}

body[data-page="home"] .map-selector:hover,
body[data-page="home"] .map-selector:focus-visible {
    background-color: #FFF5C2;
}

/* Nhãn nhỏ trên danh sách trường luân phiên theo bảng màu phụ. */
body[data-page="home"] .card-grid .school-card:nth-child(5n+1) .badge {
    color: var(--sc-navy);
    background: #FFD11A;
}

body[data-page="home"] .card-grid .school-card:nth-child(5n+2) .badge {
    color: var(--sc-navy);
    background: #8FE6B9;
}

body[data-page="home"] .card-grid .school-card:nth-child(5n+3) .badge {
    color: var(--sc-navy);
    background: #FF8B82;
}

body[data-page="home"] .card-grid .school-card:nth-child(5n+4) .badge {
    color: var(--sc-navy);
    background: #BFE4FF;
}

body[data-page="home"] .card-grid .school-card:nth-child(5n) .badge {
    color: var(--sc-navy);
    background: #CEC5FF;
}

@media (max-width: 680px) {
    body[data-page="home"] .hero-actions {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        gap: 8px;
    }

    body[data-page="home"] .hero-actions .btn-tour-featured {
        min-height: 52px;
        padding: 9px 11px;
        font-size: .86rem;
    }

    body[data-page="home"] .hero-actions .btn-map-secondary {
        min-height: 48px;
        padding: 8px 9px;
        font-size: .78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .hero-actions .btn-tour-featured {
        animation: none !important;
    }
}

/* === Ghim bản đồ dạng ảnh (pin-marker) + animation === */
.map-pin {
    width: 30px !important;
    height: 40px !important;
    overflow: visible;
}
/* Ẩn ghim vẽ bằng CSS và hoa cũ, dùng ảnh dấu ghim thay thế */
.map-pin::before { display: none !important; }
.map-pin-flower,
.map-pin-face { display: none !important; }

.map-pin-marker {
    position: absolute;
    left: 50%;
    bottom: 50%;                 /* mũi ghim trỏ đúng toạ độ trường */
    width: 28px;
    height: auto;
    transform: translateX(-50%) translateY(0);
    transform-origin: 50% 100%;
    filter: drop-shadow(1px 2px 2px rgba(7, 55, 168, .35));
    animation: pinBob 1.8s ease-in-out infinite;
    transition: transform .2s ease, filter .2s ease;
    pointer-events: none;
    -webkit-user-drag: none;
}

@keyframes pinBob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

/* Đang chọn: viền sáng vàng, hơi to hơn */
.map-pin.is-active .map-pin-marker {
    animation: none;
    transform: translateX(-50%) translateY(-2px) scale(1.16);
    filter: drop-shadow(0 0 3px var(--sc-lemon)) drop-shadow(1px 2px 2px rgba(7, 55, 168, .4));
}

/* Rê chuột / focus: phóng to nổi bật */
.map-pin:hover .map-pin-marker,
.map-pin:focus-within .map-pin-marker {
    animation: none;
    transform: translateX(-50%) translateY(-3px) scale(1.32);
    filter: drop-shadow(0 0 4px var(--sc-lemon)) drop-shadow(1px 3px 3px rgba(7, 55, 168, .5));
}

/* Nhãn tên trường nằm trên đầu ghim, tránh đè ảnh */
.map-pin::after {
    bottom: calc(100% + 12px) !important;
}

@media (prefers-reduced-motion: reduce) {
    .map-pin-marker { animation: none !important; }
}

/* === Popup card khi rê tới ghim: có nút Vào tour 360 === */
/* Ẩn tooltip chữ cũ, dùng card thay thế */
.map-pin::after { display: none !important; }

.map-pin-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 58px;
    height: 66px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    overflow: visible;
    touch-action: manipulation;
    transform: translate(-50%, -50%);
}

/* Vùng bấm rộng 58 x 66px, còn hình ghim vẫn nhỏ để không che bản đồ. */
.map-pin-btn:focus-visible {
    outline: 2px solid var(--sc-lemon);
    outline-offset: 3px;
    border-radius: 50%;
}

.map-pin:hover,
.map-pin:focus-within,
.map-pin.is-active { z-index: 30; }

.map-pin-card {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%) translateY(6px) scale(.96);
    transform-origin: 50% 120%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 190px;
    padding: 10px 12px;
    background: var(--sc-white);
    border: 2.5px solid var(--sc-navy);
    border-radius: 14px;
    box-shadow: 3px 4px 0 var(--sc-coral);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 5;
}

/* Cầu nối trong suốt giữ hover khi di chuột từ ghim lên card */
.map-pin-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 30px;
}

/* Mũi nhọn dưới card */
.map-pin-card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--sc-white);
    border-right: 2.5px solid var(--sc-navy);
    border-bottom: 2.5px solid var(--sc-navy);
    transform: translate(-50%, -60%) rotate(45deg);
    display: block !important;
}

.map-pin--popup-below .map-pin-card {
    top: calc(100% + 18px);
    bottom: auto;
    transform-origin: 50% -20%;
}

.map-pin--popup-below .map-pin-card::before {
    top: auto;
    bottom: 100%;
}

.map-pin--popup-below .map-pin-card::after {
    top: auto;
    bottom: 100%;
    border-top: 2.5px solid var(--sc-navy);
    border-right: 0;
    border-bottom: 0;
    border-left: 2.5px solid var(--sc-navy);
    transform: translate(-50%, 60%) rotate(45deg);
}

.map-pin:hover .map-pin-card,
.map-pin:focus-within .map-pin-card,
.map-pin.is-open .map-pin-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.map-pin-card__name {
    color: var(--sc-navy);
    font-family: var(--sc-font-body);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.map-pin-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--sc-lemon);
    font-family: var(--sc-font-body);
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.map-pin-card__btn::before { content: "\25B6"; font-size: .6em; }
.map-pin-card__btn:hover,
.map-pin-card__btn:focus-visible {
    background: var(--sc-navy);
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 var(--sc-lemon);
}

.map-pin-card__pending {
    color: var(--sc-navy);
    opacity: .7;
    font-family: var(--sc-font-body);
    font-size: .68rem;
    font-weight: 700;
}

/* 2026-08-03 - Nội dung bổ sung theo tài liệu THÔNG TIN MAP */
.hero-project-credit {
    max-width: 720px;
    margin: 10px 0 0;
    padding: 10px 14px;
    color: var(--sc-navy);
    background: rgba(255, 255, 255, .78);
    border: 2px solid var(--sc-navy);
    border-radius: 12px 16px 12px 5px;
    box-shadow: 3px 3px 0 var(--sc-lemon);
    font-size: clamp(.82rem, 1.15vw, .96rem);
    font-weight: 700;
    line-height: 1.55;
}

.about-story-grid {
    display: grid;
    gap: clamp(26px, 4vw, 44px);
    width: min(calc(100% - 28px), 1180px);
    margin: 0 auto clamp(52px, 7vw, 88px);
}

.about-story {
    position: relative;
    padding: clamp(22px, 4vw, 42px);
    overflow: hidden;
    color: var(--sc-navy);
    background: var(--sc-white);
    border: 3px solid var(--sc-navy);
    border-radius: 24px 31px 25px 34px;
    box-shadow: 8px 8px 0 var(--sc-coral);
}

.about-story:nth-child(even) {
    background: #F2FAFF;
    border-radius: 31px 24px 34px 25px;
    box-shadow: 8px 8px 0 var(--sc-lemon);
}

.about-story::after {
    content: "";
    position: absolute;
    top: -24px;
    right: -18px;
    width: 112px;
    height: 58px;
    background: rgba(255, 221, 91, .72);
    border: 2px solid var(--sc-navy);
    transform: rotate(12deg);
}

.about-story__header {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 2px dashed rgba(20, 53, 112, .34);
}

.about-story__header img {
    width: clamp(58px, 7vw, 82px);
    height: clamp(58px, 7vw, 82px);
    padding: 7px;
    object-fit: contain;
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 18px;
}

.about-story__number {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--sc-white);
    background: var(--sc-coral);
    border: 2px solid var(--sc-navy);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--sc-lemon);
    font-family: var(--sc-font-display);
    font-size: 1.05rem;
}

.about-story__header .section-kicker {
    margin: 0 0 12px;
}

.about-story__header h2 {
    max-width: 900px;
    margin: 0;
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-size: clamp(1.42rem, 3.2vw, 2.35rem);
    font-weight: 400;
    line-height: 1.18;
}

.about-story__copy {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    color: var(--sc-ink-soft);
    font-size: clamp(.96rem, 1.4vw, 1.05rem);
    line-height: 1.75;
}

.about-story__copy p,
.about-story__copy ul {
    margin: 0;
}

.about-story__copy h3,
.about-story__subtitle {
    margin: 24px 0 12px;
    color: var(--sc-navy);
    font-family: var(--sc-font-display);
    font-size: clamp(1.2rem, 2vw, 1.48rem);
    font-weight: 400;
}

.about-activities {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(160px, .72fr);
    gap: 16px;
}

.about-activity {
    margin: 0;
    overflow: hidden;
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 15px 20px 14px 18px;
    box-shadow: 4px 4px 0 rgba(20, 53, 112, .12);
}

.about-activity--featured img,
.about-activity--photo img {
    display: block;
    width: 100%;
    height: auto;
}

.about-activity--featured figcaption,
.about-activity--photo figcaption {
    padding: 12px 14px;
    color: var(--sc-navy);
    font-weight: 800;
    line-height: 1.4;
}

.about-activity--photo figcaption {
    font-size: .9rem;
}

/* Ảnh minh họa đặt cuối khối câu chuyện (chiến dịch, đội hình) */
.about-story__photo {
    margin: 22px 0 0;
    padding: 9px;
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 18px 24px 17px 22px;
    box-shadow: 5px 5px 0 var(--sc-lemon);
}

.about-story__photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1.5px solid var(--sc-navy);
    border-radius: 11px 15px 10px 13px;
}

.about-activity--label {
    display: grid;
    align-content: center;
    gap: 12px;
    min-height: 150px;
    padding: 20px;
    background: var(--sc-pale);
}

.about-activity--label span,
.about-team-list span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--sc-white);
    background: var(--sc-navy);
    border-radius: 50%;
    font-weight: 900;
}

.about-team-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.about-team-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 12px 18px 12px 16px;
}

.about-team-list li:nth-child(2n) span {
    color: var(--sc-navy);
    background: var(--sc-lemon);
}

/* Bốn ảnh đội hình: giữ nguyên tỷ lệ, chỉ co giãn theo đúng hàng nhãn bên trên. */
.about-team-card {
    --team-accent: var(--sc-action-blue);
    --team-soft: #EAF5FF;
    display: grid !important;
    grid-template-rows: auto auto;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-color: var(--team-accent) !important;
}

.about-team-card--digital { --team-accent: #1675EF; --team-soft: #E8F3FF; }
.about-team-card--media { --team-accent: #E7A51A; --team-soft: #FFF5DC; }
.about-team-card--children { --team-accent: #438B25; --team-soft: #ECF7E7; }
.about-team-card--history { --team-accent: #D33332; --team-soft: #FFF0F0; }

.about-team-card__label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 16px;
    color: var(--team-accent);
    background: var(--team-soft);
    border-bottom: 2px solid var(--team-accent);
}

.about-team-card__label span,
.about-team-list li:nth-child(2n) .about-team-card__label span {
    flex: none;
    color: var(--sc-white);
    background: var(--team-accent);
}

.about-team-card__label strong {
    color: var(--team-accent);
}

.about-team-card > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.about-project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    align-items: start;
    gap: clamp(22px, 4vw, 38px);
}

.about-goal-list {
    display: grid;
    gap: 10px;
    padding-left: 1.25rem;
}

.about-goal-list li::marker {
    color: var(--sc-coral);
}

.about-project-gallery {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 18px;
    margin: 24px 0 0;
    align-self: center;
}

.about-project-map {
    margin: 0;
    padding: 9px;
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 18px 24px 17px 22px;
    box-shadow: 5px 5px 0 var(--sc-lemon);
}

.about-project-map img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border: 1.5px solid var(--sc-navy);
    border-radius: 11px 15px 10px 13px;
}

.about-project-map figcaption {
    padding: 11px 8px 5px;
    color: var(--sc-navy);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.45;
}

.about-film-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 28px);
    margin-top: 26px;
}

.about-film {
    margin: 0;
    padding: 9px;
    background: var(--sc-white);
    border: 2px solid var(--sc-navy);
    border-radius: 18px 24px 17px 22px;
    box-shadow: 5px 5px 0 var(--sc-coral);
}

.about-film:nth-child(even) {
    border-radius: 24px 18px 22px 17px;
    box-shadow: 5px 5px 0 var(--sc-coral);
}

.about-film__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--sc-navy);
    border: 1.5px solid var(--sc-navy);
    border-radius: 11px 15px 10px 13px;
}

.about-film__caption {
    display: grid;
    gap: 4px;
    padding: 11px 8px 5px;
    color: var(--sc-navy);
    line-height: 1.45;
}

.about-film__caption strong {
    font-size: .95rem;
    font-weight: 800;
}

.about-film__caption span {
    color: var(--sc-ink-soft);
    font-size: .86rem;
    font-weight: 600;
}

@media (max-width: 860px) {
    .about-activities,
    .about-project-layout,
    .about-film-grid {
        grid-template-columns: 1fr;
    }

    .about-activities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-activity--featured {
        grid-column: 1 / -1;
    }

    .about-project-gallery,
    .about-project-map {
        position: static;
        margin-top: 0;
    }
}

@media (max-width: 620px) {
    .about-story {
        padding: 20px 16px;
        border-radius: 20px;
        box-shadow: 5px 5px 0 var(--sc-coral);
    }

    .about-story:nth-child(even) {
        border-radius: 20px;
        box-shadow: 5px 5px 0 var(--sc-lemon);
    }

    .about-story__header {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
    }

    .about-story__number {
        width: 40px;
        height: 40px;
    }

    .about-story__header img {
        grid-row: 2;
        width: 56px;
        height: 56px;
    }

    .about-story__header > div {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .about-activities,
    .about-team-list {
        grid-template-columns: 1fr;
    }

    .about-activity--featured {
        grid-column: auto;
    }
}

/* 2026-08-04 - Tinh chỉnh bố cục trang chủ và bảng màu trang giới thiệu */
html {
    overflow-x: hidden;
}

body[data-page="home"],
body[data-page="info"] {
    overflow-x: hidden;
}

body[data-page="home"] .hero-project-credit {
    font-size: clamp(.8rem, 1.05vw, .9rem);
    letter-spacing: -.008em;
    line-height: 1.48;
}

body[data-page="home"] .journey-school-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

body[data-page="home"] .journey-school-card {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 72px;
    padding: 7px;
    gap: 10px;
}

body[data-page="home"] .journey-school-card img,
body[data-page="home"] .journey-school-card > b {
    width: 78px;
    height: 54px;
}

body[data-page="home"] .journey-school-card span {
    overflow: visible;
    font-size: .82rem;
    line-height: 1.35;
    -webkit-line-clamp: unset;
}

/* Nhạc nền trang chủ: luôn nằm trong thanh đầu trang, sát phía phải. */
.home-music {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    color: var(--sc-navy);
    background: #F1EDFF;
    border: 2px solid var(--sc-navy);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--sc-navy);
    font-weight: 800;
}

.home-music__toggle,
.tour-music__toggle {
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: var(--sc-navy);
    background: var(--sc-lemon);
    border: 1.5px solid var(--sc-navy);
    border-radius: 999px;
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.home-music .site-music-icon,
.tour-music .site-music-icon {
    font-size: 1.45rem;
    line-height: 1;
}

.home-music__toggle.is-playing,
.tour-music__toggle.is-playing {
    color: var(--sc-white);
    background: var(--sc-action-blue);
}

.home-music__toggle:hover,
.tour-music__toggle:hover {
    filter: brightness(.96);
}

.home-music__toggle:focus-visible,
.tour-music__toggle:focus-visible {
    outline: 3px solid var(--sc-coral);
    outline-offset: 2px;
}

@media (max-width: 780px) {
    .home-music {
        justify-self: end;
        justify-content: center;
    }
}

body[data-page="home"] .card-content h3 {
    font-size: 1.15rem;
}

body[data-page="info"] .about-story {
    --about-accent: var(--sc-coral);
    --about-soft: #FFF0EA;
    --about-shadow: var(--sc-coral);
    --about-tape: rgba(255, 221, 91, .72);
    background: linear-gradient(135deg, #FFFDFB 0%, var(--about-soft) 100%);
    box-shadow: 8px 8px 0 var(--about-shadow);
}

body[data-page="info"] .about-story--campaign {
    --about-accent: #1764FF;
    --about-soft: #EAF2FF;
    --about-shadow: #FFB703;
    --about-tape: rgba(135, 220, 255, .75);
}

body[data-page="info"] .about-story--digital {
    --about-accent: #1E8F55;
    --about-soft: #E8F8EF;
    --about-shadow: #35B779;
    --about-tape: rgba(255, 221, 91, .72);
}

body[data-page="info"] .about-story--project {
    --about-accent: #7357D7;
    --about-soft: #F0ECFF;
    --about-shadow: #A695F4;
    --about-tape: rgba(255, 121, 102, .68);
}

body[data-page="info"] .about-story::after {
    background: var(--about-tape);
}

body[data-page="info"] .about-story__number {
    background: var(--about-accent);
    box-shadow: 3px 3px 0 var(--about-shadow);
}

body[data-page="info"] .about-story__header img {
    background: var(--about-soft);
    border-color: var(--about-accent);
}

body[data-page="info"] .about-story__header .section-kicker,
body[data-page="info"] .about-story__copy h3,
body[data-page="info"] .about-story__subtitle {
    color: var(--about-accent);
}

/* Nhãn từng câu chuyện ở trang Về chúng tôi dùng nền vàng thay cho đỏ. */
body[data-page="info"] .about-story__header .section-kicker {
    background: var(--sc-lemon);
}

body[data-page="info"] .about-activity,
body[data-page="info"] .about-team-list li {
    border-color: var(--about-accent);
}

body[data-page="info"] .about-activity--label {
    background: var(--about-soft);
}

body[data-page="info"] .about-activity--label span,
body[data-page="info"] .about-team-list span {
    background: var(--about-accent);
}

body[data-page="info"] .about-team-list li:nth-child(2n) span {
    color: var(--sc-white);
    background: var(--about-accent);
}

body[data-page="info"] .about-project-map {
    border-color: var(--about-accent);
    box-shadow: 5px 5px 0 var(--about-shadow);
}

/* Khung ghi chú và cụm ảnh dự án giữ thẳng, cân giữa theo phần nội dung. */
body[data-page="info"] .info-note {
    transform: none;
}

@media (max-width: 900px) {
    body[data-page="home"] .journey-school-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body[data-page="home"] .journey-school-card {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    body[data-page="home"] .journey-school-card img,
    body[data-page="home"] .journey-school-card > b {
        width: 62px;
        height: 48px;
    }
}

/* 2026-08-09 - Giữ các nhãn dài gọn trên một hàng và thu ghim bản đồ ở mobile. */
body[data-page="home"] .hero-title-line:last-child,
body[data-page="info"] .about-story--union .about-story__header h2 {
    white-space: nowrap;
    text-wrap: nowrap;
}

body[data-page="home"] .hero-title-line:last-child {
    background: #FFF5C2;
}

body[data-page="tour"] .tour-copy h1 {
    display: grid;
    gap: .08em;
    font-size: clamp(1.2rem, 2.6vw, 2.45rem);
    line-height: 1.08;
    white-space: normal;
    text-wrap: wrap;
}

body[data-page="tour"] .tour-title-line {
    display: block;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    text-wrap: nowrap;
}

body[data-page="info"] .about-story--union .about-story__header h2 {
    font-size: clamp(.5rem, 1.95vw, 1.8rem);
}

body[data-page="info"] .info-lead {
    font-size: clamp(.78rem, 1.3vw, .95rem);
    line-height: 1.6;
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: normal;
    word-break: normal;
}

@media (min-width: 621px) {
    body[data-page="info"] .info-note {
        white-space: nowrap;
        text-wrap: nowrap;
    }

    body[data-page="info"] .info-note {
        font-size: clamp(.66rem, 1.3vw, .78rem);
    }
}

@media (max-width: 780px) {
    body[data-page="home"] .hero-title-line:last-child {
        font-size: clamp(1.75rem, 7.6vw, 2.05rem);
        line-height: 1.05;
    }

    body[data-page="home"] .map-pin-marker {
        width: 19px;
    }

    body[data-page="tour"] .tour-copy h1 {
        font-size: clamp(.92rem, 4.45vw, 1.12rem);
    }

    body[data-page="home"] .map-pin.is-active .map-pin-marker {
        transform: translateX(-50%) translateY(-1px) scale(1.08);
    }

    body[data-page="home"] .map-pin:hover .map-pin-marker,
    body[data-page="home"] .map-pin:focus-within .map-pin-marker {
        transform: translateX(-50%) translateY(-2px) scale(1.14);
    }
}

@media (max-width: 620px) {
    body[data-page="info"] .info-lead {
        font-size: .68rem;
        line-height: 1.55;
    }

    body[data-page="info"] .info-note {
        font-size: .72rem;
        line-height: 1.55;
    }
}