.teaching-slide.slide-hcm-map{padding:8px 0;overflow:hidden;container-type:size}
.hcm-stage{position:relative;flex:none;width:min(100%,calc((100cqh - 104px)*1.3333333333));min-height:0;margin:auto;overflow:hidden;border-radius:12px;border:1px solid #a89155;background:#132c30;isolation:isolate;display:flex;flex-direction:column}
.hcm-viewport{position:relative;flex:none;width:100%;aspect-ratio:1448/1086;min-height:0;margin:0;overflow:hidden;border-radius:6px;user-select:none;cursor:zoom-in}
.hcm-viewport.is-panning{cursor:grabbing}
.hcm-world{position:absolute;background:url('../../assets/experience/hcm-relief-clean.png') center/100% 100% no-repeat}
.hcm-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.hcm-label{font:700 15px Georgia,'Times New Roman',serif;fill:#17291e;paint-order:stroke fill;stroke:#fff3cf;stroke-width:3.5px;stroke-linejoin:round}
.hcm-date{font-size:13px;font-weight:600}
.hcm-label.hcm-small{font-size:13px}.hcm-label.hcm-saigon{font-size:20px;stroke-width:4px;fill:#3b1e0c}
.hcm-label.hcm-country{font:700 25px Georgia,serif;fill:#0b6456;stroke:#dce8b0;stroke-width:2px;letter-spacing:1px}
.hcm-label.hcm-water{font:700 26px Georgia,serif;fill:#e2f6fc;stroke:#125a81;stroke-width:3px;letter-spacing:1px}
.hcm-label.hcm-island{font-size:17px;fill:#f5f0cd;stroke:#104760;stroke-width:3px}
.hcm-map-title text{font:700 11px var(--sans,Arial,sans-serif);letter-spacing:2px;fill:#fff2ca;paint-order:stroke fill;stroke:#153a24;stroke-width:3px}
.hcm-map-title text+text{font:700 29px var(--serif,Georgia,serif);letter-spacing:0}
.hcm-legend text{font:600 13px var(--sans,Arial,sans-serif);fill:#fff4d5;paint-order:stroke fill;stroke:#173f2b;stroke-width:3px}
.hcm-legend path{stroke-width:9;stroke-linecap:round}.hcm-legend-gold{stroke:#ffbd32}.hcm-legend-red{stroke:#ef3025}
.hcm-route{opacity:0;pointer-events:none}
.hcm-arrow{fill:#ee3022;stroke:#6e1c0e;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #38140088)}
[data-hcm-layer=gold] .hcm-arrow{fill:#ffbd32;stroke:#684b15}
.hcm-reveal{stroke-dasharray:1;stroke-dashoffset:1}
.hcm-stage[data-phase] [data-hcm-layer=gold],.hcm-stage[data-phase=red] [data-hcm-layer=red]{opacity:1}
.hcm-stage[data-phase=gold] [data-hcm-layer=gold] .hcm-reveal,.hcm-stage[data-phase=red] [data-hcm-layer=red] .hcm-reveal{animation:hcm-draw 3.2s var(--delay,0s) ease both}
.hcm-stage[data-phase=red] [data-hcm-layer=gold] .hcm-reveal{stroke-dashoffset:0}
.hcm-victory{opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px #ffcc4c)}
.hcm-victory circle{fill:#7d2316;stroke:#ffdc73;stroke-width:2}.hcm-victory path{fill:#ffe893}
.hcm-stage[data-phase=red] .hcm-victory{animation:hcm-victory 1.5s 3s ease both}
.hcm-info{position:absolute;left:75.7%;top:43.7%;transform:translate(-50%,-50%);width:3.8%;min-width:22px;max-width:40px;height:auto;aspect-ratio:1;display:grid;place-items:center;padding:0;border:2px solid #ffe3a1;border-radius:50%;background:#152e29ed;color:#fff2cc;font:700 italic clamp(14px,1.8vw,24px)/1 Georgia,serif;cursor:pointer;animation:hcm-pulse 1.8s infinite}
.hcm-controls{position:absolute;right:12px;bottom:8px;display:flex;flex-direction:row;gap:8px;z-index:2}
.hcm-controls button{position:relative;appearance:none;width:60px;height:60px;min-height:60px;display:grid;place-content:center;margin:0;padding:0;border:1px solid #b6a071;border-radius:50%;background:radial-gradient(circle at 35% 25%,#775c29,#342b1b 75%);color:#f6e5bf;font:750 18px/1.2 var(--sans,Arial,sans-serif);box-shadow:inset 0 0 0 4px #2c271c,inset 0 0 0 5px #b69c5f55,0 4px 12px #0005;cursor:pointer;transition:transform .2s,box-shadow .2s}
.hcm-controls button[data-hcm-phase=red]{background:radial-gradient(circle at 35% 25%,#883c37,#4b2023 75%)}
.hcm-controls button[data-hcm-reset]{background:radial-gradient(circle at 35% 25%,#3d453f,#18201d 75%);font-size:26px}
.hcm-controls button:hover{transform:translateY(-2px);border-color:#ffe0a2}
.hcm-controls button[aria-pressed=true]{border-color:#ffe5ab;box-shadow:inset 0 0 0 4px #352b20,inset 0 0 0 5px #e8c78499,0 0 18px #f7c96c77}
.hcm-controls button::after{content:attr(data-tooltip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:7px 10px;border:1px solid #b6a07188;border-radius:5px;background:#14251cf5;color:#f6e5bf;font:500 13px/1.4 var(--sans,Arial,sans-serif);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none}
.hcm-controls button:hover::after,.hcm-controls button:focus-visible::after{opacity:1;visibility:visible}
.hcm-stage button:focus-visible{outline:3px solid #ffe5ab;outline-offset:4px;animation:none}
.hcm-status{position:relative;margin:0;padding:4px 8px 70px;min-height:100px;box-sizing:border-box;display:grid;place-items:center;font:500 12px/1.5 var(--sans,Arial,sans-serif);color:#e7d9ad;text-align:center}
.hcm-dialog{width:min(780px,92vw);max-height:88dvh;padding:24px 28px;border:2px solid #c5a365;border-radius:12px;background:#14271ffb;color:#fff0cd;box-shadow:0 12px 60px #0008}
.hcm-dialog::backdrop{background:#07110cc4;backdrop-filter:blur(3px)}
.hcm-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.hcm-dialog h2{margin:0;font:600 28px/1.3 var(--serif,Georgia,serif);color:#ffdf9f}
.hcm-dialog header button{width:38px;height:38px;flex-shrink:0;padding:0;border:1px solid #c5a365;border-radius:50%;background:transparent;color:#ffe9b9;font-size:26px}
.hcm-dialog ol{padding-left:24px;margin:0}.hcm-dialog li{font:400 18px/1.7 var(--sans,Arial,sans-serif);margin:0 0 12px}.hcm-dialog strong{color:#ffe0a4}
.hcm-dialog .hcm-source-note{font:400 13px/1.7 var(--sans,Arial,sans-serif);color:#c9c7ad;border-top:1px solid #c5a36555;padding-top:14px;margin:18px 0}
.hcm-dialog summary{cursor:pointer;font:500 14px/1.5 var(--sans,Arial,sans-serif);color:#ffe0a4}.hcm-dialog details img{display:block;width:100%;height:auto;margin-top:14px;border-radius:5px}
@keyframes hcm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hcm-victory{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes hcm-pulse{0%,100%{box-shadow:0 0 0 4px #f7d17d38}50%{box-shadow:0 0 0 9px #f7d17d00}}
@media(max-width:600px){.hcm-controls{right:10px;bottom:8px;gap:10px}.hcm-controls button{width:52px;height:52px;min-height:52px;font-size:16px}.hcm-info{width:28px;height:28px;font-size:20px}.hcm-status{font-size:11px}.hcm-dialog{padding:18px}.hcm-dialog h2{font-size:23px}.hcm-dialog li{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hcm-info,.hcm-stage .hcm-reveal,.hcm-stage .hcm-victory{animation:none!important}.hcm-stage[data-phase] [data-hcm-layer=gold] .hcm-reveal,.hcm-stage[data-phase=red] [data-hcm-layer=red] .hcm-reveal{stroke-dashoffset:0}.hcm-stage[data-phase=red] .hcm-victory{opacity:1}.hcm-controls button{transition:none}}