:root{--green:#163f35;--red:#9f2d25;--gold:#c7953e;--cream:#f5f1e6;--ink:#132720;--muted:#66736e}.beyond-page{margin:0;background:#faf8f2;color:var(--ink);font-family:"Be Vietnam Pro",sans-serif}.beyond-page *{box-sizing:border-box}.tour-topbar{position:relative;z-index:20}.tour-topbar nav a.active{color:var(--red)}.tour-menu-toggle{display:none;border:0;background:transparent;padding:8px}.tour-menu-toggle i{display:block;width:24px;height:2px;margin:5px;background:var(--green)}.eyebrow{display:block;color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase}.tour-hero{height:min(760px,calc(100vh - 76px));min-height:610px;position:relative;overflow:hidden;background:#102c25}.tour-hero-image{position:absolute;inset:0;background:url('/images/heritage/dong-nam-bo/ben-nha-rong-tp-ho-chi-minh.png') center/cover no-repeat;transform:scale(1.02)}.tour-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,26,21,.92),rgba(7,26,21,.65) 43%,rgba(7,26,21,.1) 77%),linear-gradient(0deg,rgba(3,15,12,.55),transparent 50%)}.tour-hero-copy{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);max-width:680px;color:#fff}.tour-hero-copy h1,.section-heading h2,.route-copy h2,.story-heading h2,.source-section h2{font-family:"Playfair Display",serif}.tour-hero-copy h1{font-size:clamp(60px,8vw,118px);line-height:.92;margin:20px 0}.tour-hero-copy p{font-size:18px;line-height:1.7;max-width:620px}.hero-actions{display:flex;gap:12px;margin-top:32px}.hero-actions a,.route-actions a{display:inline-flex;padding:15px 21px;background:var(--gold);color:#162b24;text-decoration:none;font-weight:800}.hero-actions a.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55);color:#fff}.hero-fact{position:absolute;z-index:2;right:5%;bottom:50px;width:350px;padding:22px 25px;background:rgba(247,243,234,.94);border-left:4px solid var(--gold);display:flex;flex-direction:column;gap:8px}.hero-fact b{color:var(--red)}.hero-fact span{font-size:13px;line-height:1.5}.virtual-section,.story-section,.source-section{padding:90px 5%}.section-heading{display:grid;grid-template-columns:1.4fr .7fr;gap:40px;align-items:end;margin-bottom:35px}.section-heading h2,.route-copy h2,.story-heading h2,.source-section h2{font-size:clamp(38px,5vw,68px);line-height:1.08;margin:12px 0}.section-heading p{color:var(--muted);line-height:1.7}.tour-frame-wrap{position:relative;height:min(73vh,780px);min-height:560px;background:#0c1815;border:1px solid #d7d0c0;box-shadow:0 24px 60px rgba(22,45,37,.15)}.tour-frame-wrap iframe{width:100%;height:100%;border:0}.frame-help{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:14px 20px;background:rgba(9,25,20,.9);color:#fff;display:flex;justify-content:space-between;align-items:center;font-size:13px}.frame-help b{display:inline-grid;place-items:center;width:45px;height:45px;border:1px solid var(--gold);border-radius:50%;margin-right:10px;color:var(--gold)}.frame-help a{color:#fff;font-weight:700}.real-note{display:flex;gap:20px;padding:20px 24px;background:#eee9dc;border-left:4px solid var(--gold)}.real-note span{color:var(--muted);font-size:13px;line-height:1.6}.route-section{display:grid;grid-template-columns:minmax(360px,.85fr) 1.55fr;min-height:720px;background:#132f28;color:#fff}.route-copy{padding:85px 7vw 70px}.route-copy p{color:#c6d0cc;line-height:1.75}.destination{margin:30px 0;padding:20px 0;border-block:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:7px}.destination small{color:var(--gold);font-weight:800;letter-spacing:.15em}.destination span{font-size:13px;color:#bbc8c3}.route-copy button{border:0;padding:16px 22px;background:var(--gold);color:#17352d;font:700 14px inherit;cursor:pointer}.route-copy button:disabled{opacity:.72;cursor:wait}.route-status{font-size:12px!important;margin-top:14px}.route-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.route-actions a{font-size:12px}.route-actions a:last-child{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}.hidden{display:none!important}.route-visual{position:relative;min-height:620px}.route-visual #route-map{position:absolute;inset:0;z-index:1}.route-summary{position:absolute;z-index:2;left:28px;bottom:28px;background:#fff;color:var(--ink);border-left:4px solid var(--gold);padding:18px 24px;box-shadow:0 12px 34px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:5px}.route-summary span{font-size:11px;color:#6b7772}.locator-spin{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.story-section{background:var(--cream)}.story-heading{max-width:750px}.timeline{display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px;border-top:1px solid #cfc6b3}.timeline article{padding:28px 25px;border-right:1px solid #d8cfbc}.timeline article.accent{background:#173c33;color:#fff}.timeline article b{color:var(--gold)}.timeline h3{font-family:"Playfair Display",serif;font-size:24px}.timeline p{font-size:13px;line-height:1.7;color:#66736e}.timeline .accent p{color:#d7dfdc}.source-section{background:#fff}.source-section>div{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ddd5c6}.source-section a{display:flex;gap:18px;padding:25px;color:var(--ink);text-decoration:none;border-right:1px solid #ddd5c6}.source-section a>b{color:var(--gold);font-size:24px}.source-section a span{display:flex;flex-direction:column}.source-section small{margin-top:6px;color:#74807b}.beyond-page footer{padding:35px 5%;display:flex;justify-content:space-between;align-items:center;background:#102b24;color:#fff}.beyond-page footer .brand{color:#fff}.beyond-page footer p{color:#aebdb7;font-size:12px}
@media(max-width:900px){.tour-menu-toggle{display:block}.tour-topbar nav{display:none;position:absolute;top:100%;left:0;right:0;padding:18px;background:#fff;flex-direction:column;box-shadow:0 15px 25px rgba(0,0,0,.12)}.tour-topbar nav.open{display:flex}.tour-hero{min-height:670px}.tour-hero-copy{left:7%;right:7%;top:43%}.hero-fact{left:7%;right:auto;bottom:28px;width:min(86%,390px)}.section-heading{grid-template-columns:1fr}.tour-frame-wrap{height:68vh;min-height:500px}.route-section{grid-template-columns:1fr}.route-visual{min-height:540px}.timeline{grid-template-columns:1fr 1fr}.source-section>div{grid-template-columns:1fr}.source-section a{border-bottom:1px solid #ddd5c6}.real-note{flex-direction:column}.beyond-page footer{align-items:flex-start;gap:15px;flex-direction:column}}
@media(max-width:560px){.virtual-section,.story-section,.source-section{padding:65px 20px}.tour-hero-copy h1{font-size:56px}.tour-hero-copy p{font-size:15px}.hero-actions{flex-direction:column;align-items:flex-start}.tour-frame-wrap{height:72vh;min-height:520px;margin-inline:-20px}.frame-help{align-items:flex-start;gap:8px;flex-direction:column}.frame-help b{width:auto;height:auto;border:0;margin:0}.route-copy{padding:65px 22px}.route-visual{min-height:480px}.route-summary{left:14px;right:14px;bottom:14px}.timeline{grid-template-columns:1fr}.timeline article{border-right:0;border-bottom:1px solid #d8cfbc}.source-section a{padding:22px 0}.hero-fact{font-size:12px}}
.photo-route .route-copy{display:flex;flex-direction:column;justify-content:center}.photo-route-help{display:grid;grid-template-columns:34px 1fr;gap:13px 12px;margin:28px 0}.photo-route-help b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#17352d}.photo-route-help span{align-self:center;color:#d4ddda;font-size:13px}.route-fullscreen{align-self:flex-start;padding:15px 20px;background:var(--gold);color:#17352d;text-decoration:none;font-weight:800;font-size:13px}.photo-route-view iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.photo-route-view .route-summary{pointer-events:none}.photo-route-view .route-summary span{color:var(--red);font-weight:800;letter-spacing:.08em}.photo-route-view #street-view{position:absolute;inset:0;width:100%;height:100%;background:#d9dedb}.street-view-loading,.street-view-error{height:100%;display:grid;place-items:center;padding:30px;text-align:center;color:#17352d;font-weight:700}.street-view-note{font-size:12px!important;color:#93a7a0!important;margin-top:22px}
.karta-route-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:44px;text-align:center;color:#fff;text-decoration:none;background:linear-gradient(145deg,rgba(10,45,39,.9),rgba(13,87,72,.8)),url('/images/heritage/dong-nam-bo/ben-nha-rong-tp-ho-chi-minh.png') center/cover}.karta-route-card small{color:#e9c46a;font-weight:800;letter-spacing:.14em}.karta-route-card strong{font-family:'Playfair Display',serif;font-size:clamp(27px,4vw,48px)}.karta-route-card>span:not(.karta-route-pin){color:#d4ddda}.karta-route-card>b{margin-top:18px;padding:13px 18px;background:#e9c46a;color:#17352d}.karta-route-pin{display:grid;place-items:center;width:68px;height:68px;border:2px solid #e9c46a;border-radius:50%;font-size:38px;color:#e9c46a}
.museum-entry-button{position:absolute;z-index:5;top:20px;right:20px;border:0;padding:14px 20px;background:var(--gold);color:#17352d;font:800 14px "Be Vietnam Pro",sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.32);cursor:pointer}.museum-entry-button:hover{background:#e0b55f;transform:translateY(-1px)}
.tour-frame-wrap{overflow:hidden}.tour-frame-wrap iframe{position:absolute;top:-65px;left:0;height:calc(100% + 65px)}
.museum-tour-loader{display:none;position:absolute;z-index:4;inset:0 0 59px;background:#163f35;color:#fff;place-items:center;font-weight:700}.museum-tour-loading .museum-tour-loader{display:grid}.museum-tour-loading #museum-tour-frame{visibility:hidden}
@media(min-width:800px){.tour-frame-wrap #museum-tour-frame{left:-240px;width:calc(100% + 240px)}}
.museum-fullscreen{position:absolute;z-index:5;right:14px;top:14px;border:0;border-radius:7px;padding:10px 14px;background:#173c33;color:#fff;font:700 12px "Be Vietnam Pro",sans-serif;box-shadow:0 5px 18px rgba(0,0,0,.3);cursor:pointer}.tour-frame-wrap #museum-tour-frame{height:calc(100% + 65px)}.tour-frame-wrap:fullscreen{width:100vw;height:100vh;min-height:100vh;border:0}.tour-frame-wrap:fullscreen #museum-tour-frame{top:-65px;height:calc(100% + 65px)}.real-note a{color:var(--red);font-weight:800}
.tour-source{margin-left:auto;text-align:right;white-space:nowrap}.tour-source strong{color:var(--red)}
.tour-hero-image{background-image:url('/images/heritage/dong-nam-bo/ben-nha-rong-hero-v2.png')}
.tour-controls-mask{position:absolute;z-index:4;bottom:5px;height:47px;background:#faf8f2;pointer-events:auto}.tour-controls-mask-left{right:143px;width:112px;border-radius:0 24px 24px 0}.tour-controls-mask-right{right:5px;width:96px;border-radius:24px 0 0 24px}
.tour-frame-wrap:fullscreen .tour-controls-mask{background:#0c1815}
.usage-guide{padding:80px 5%;background:#173c33;color:#fff}.usage-guide-heading{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:36px}.usage-guide-heading h2{margin:10px 0 0;font:700 clamp(38px,5vw,64px)/1.08 "Playfair Display",serif}.usage-guide-heading p{margin:0;color:#c8d5d0;line-height:1.7}.usage-steps{counter-reset:guide;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.22)}.usage-steps li{counter-increment:guide;padding:28px 22px;border-right:1px solid rgba(255,255,255,.18)}.usage-steps li::before{content:counter(guide,decimal-leading-zero);display:block;margin-bottom:24px;color:var(--gold);font-weight:800}.usage-steps b{display:block;margin-bottom:10px}.usage-steps span{display:block;color:#c8d5d0;font-size:13px;line-height:1.65}.usage-steps span strong{display:inline;color:#fff}.usage-tip{margin:28px 0 0;padding:18px 22px;background:rgba(255,255,255,.08);color:#d7e0dd;font-size:13px;line-height:1.6}.usage-tip b{display:inline;color:var(--gold)}
@media(max-width:900px){.usage-guide-heading{grid-template-columns:1fr}.usage-steps{grid-template-columns:1fr 1fr}.usage-steps li{border-bottom:1px solid rgba(255,255,255,.18)}}
@media(max-width:560px){.usage-guide{padding:60px 20px}.usage-steps{grid-template-columns:1fr}.usage-steps li{padding-inline:0;border-right:0}}
.implementation-note{margin-top:30px;padding:28px;background:#f5f1e6;color:var(--ink)}.implementation-note h3{margin:0 0 22px;font:700 24px "Playfair Display",serif}.implementation-note>div{display:block}.implementation-note p{margin:0}.implementation-note p b,.implementation-note p span{display:block}.implementation-note p b{margin-bottom:9px;color:var(--red)}.implementation-note p span{color:var(--muted);font-size:13px;line-height:1.7}.implementation-note strong{color:var(--ink)}
@media(max-width:700px){.implementation-note>div{grid-template-columns:1fr}}
