/* Shared interaction layer. Content stays visible without JavaScript. */
:root { --ux-ease: cubic-bezier(.22,1,.36,1); }
html { scroll-padding-top: 100px; }
[hidden] { display: none !important; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #ab7c26; outline-offset: 4px; }
:where(button, input, select, textarea) { font-family: inherit; }
.nav-hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-links a:not(.nav-cta) {
 position: relative;
 border-radius: 999px;
 padding: 8px 11px;
 margin: -8px -11px;
 transition: background .22s var(--ux-ease), color .22s var(--ux-ease);
}
.nav-links a:not(.nav-cta):hover,
.nav-links a.is-current {
 background: rgba(211, 173, 93, .15);
 color: #9a7328;
}
.nav.scrolled .nav-links a:not(.nav-cta):hover,
.nav.scrolled .nav-links a.is-current {
 background: rgba(211, 173, 93, .18);
 color: #f3c86d;
}
.home-page .nav .nav-links a.is-current:not(.nav-cta),
.home-page .nav .nav-links a:not(.nav-cta):hover {
 background-color: rgba(211, 173, 93, .15);
 color: #9a7328;
 text-decoration: none;
}
.home-page .nav.scrolled .nav-links a.is-current:not(.nav-cta),
.home-page .nav.scrolled .nav-links a:not(.nav-cta):hover,
.home-page .nav-links.open a.is-current:not(.nav-cta) {
 background-color: rgba(211, 173, 93, .18);
 color: #f3c86d;
 text-decoration: none;
}
.reading-progress { position: fixed; top: 72px; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none; background: #d3ad5d; transform: scaleX(0); transform-origin: left; }
.ux-reveal { transition: opacity .65s var(--ux-ease), translate .65s var(--ux-ease); }
.ux-reveal.is-pending { opacity: 0; translate: 0 22px; }
.story-toc a { border-left: 2px solid transparent; padding-left: 12px; transition: border-color .2s, color .2s; }
.story-toc a.is-current { border-color: #a57925; color: #0a1628; font-weight: 700; }
.story-button, .form-submit-btn, .visa-open, .visa-filters button, .service-link, .svc-detail-link { transition: transform .25s var(--ux-ease), box-shadow .25s, background .25s, color .25s; }
.story-button:active, .btn:active, .form-submit-btn:active, .visa-filters button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
 .story-button:hover, .form-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #0a162818; }
 .visa-open:hover { transform: translateY(-4px); box-shadow: 0 12px 25px #0a16281c; }
 .svc-detail-link:hover, .service-link:hover { transform: translateX(3px); }
 .spotlight-image img { transition: transform .6s var(--ux-ease); }
 .spotlight-image:hover img { transform: scale(1.025); }
}
.visa-viewer[open] { animation: viewer-enter .25s var(--ux-ease); }
@keyframes viewer-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.service-section details[open] > p { animation: viewer-enter .25s var(--ux-ease); }
.service-section summary { padding-right: 16px; }
.service-section summary:hover { color: #165e6a; }
.home-page .testi-loc { color: #59636f; }
.home-page .contact-detail .cd-label { color: #aeb8c5; }
.home-page .form-box-sub { color: #9299a4; }
.home-page .hero-sub, .home-page .about-body p, .home-page .vm-text,
.home-page .why-desc, .home-page .svc-desc, .home-page .team-bio,
.home-page .testi-text, .home-page .faq-a-inner, .footer-about { text-align: left; }
.home-page .section { padding-top: 76px; padding-bottom: 76px; }
.home-page .float-chat { bottom: max(22px, env(safe-area-inset-bottom)); gap: 12px; }
.home-page .float-btn {
 width: 56px;
 min-width: 56px;
 height: 56px;
 padding: 0;
 border: 1px solid var(--gold);
 border-radius: 50%;
 background: var(--navy) !important;
 color: var(--gold);
 box-shadow: 0 6px 20px #0a162830;
 justify-content: center;
}
.home-page .float-icon {
 display: grid;
 place-items: center;
 width: 32px;
 height: 32px;
}
.home-page .float-icon > svg { display: block; width: 26px; height: 26px; fill: currentColor; }
.home-page .fb-zalo .float-icon > svg { width: 34px; height: 34px; }
.home-page .float-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #0a162838; }
.home-page .float-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.home-page .float-tip {
 position: absolute;
 right: 68px;
 opacity: 0;
 padding: 6px 12px;
 background: var(--navy);
 color: var(--gold);
 font-size: 13px;
 font-weight: 600;
 pointer-events: none;
}
.home-page .float-btn:hover .float-tip,
.home-page .float-btn:focus-visible .float-tip { opacity: 1; }
html:not(.motion-ready) .home-page .fade-in { opacity: 1; transform: none; }
html:not(.motion-ready) .home-page .hero-content > *, html:not(.motion-ready) .home-page .hero-visual,
html:not(.motion-ready) .home-page .section .s-head, html:not(.motion-ready) .home-page .contact-info { opacity: 1; transform: none; }
html:not(.motion-ready) .home-page .faq-a { max-height: none; }
.home-page .cd-value a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.form-field:focus-within .form-label { color: #f3c86d; }
.form-input, .form-select, .form-textarea { scroll-margin-top: 110px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { box-shadow: 0 0 0 3px #d3ad5d24; }
.field-error { display: block; color: #fca5a5; font-size: 13px; margin-top: 6px; }
.form-privacy { color: #c5cbd3; font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.form-privacy a { color: #f3c86d; text-underline-offset: 3px; }
.form-submit-btn { min-height: 48px; }
.form-submit-btn:disabled { cursor: wait; opacity: .7; }
.form-success:focus { outline-offset: 8px; }
@media (max-width: 768px) {
 .home-page .hero { padding: 112px 24px 48px; text-align: left; }
 .home-page .hero-title { font-size: clamp(30px, 8.5vw, 44px); }
 .home-page .hero-sub { font-size: 15px; line-height: 1.8; margin-bottom: 28px; }
 .home-page .hero-actions { justify-content: flex-start; gap: 12px; }
 .home-page .hero-badge { font-size: 11px; }
 .home-page .section { padding-top: 48px; padding-bottom: 48px; }
 .home-page .contact-wrap { padding-top: 48px; padding-bottom: 48px; }
 .home-page .s-head { margin-bottom: 32px; }
 .home-page .form-box { padding: 28px 20px; }
 .story-detail .side-card { position: static; }
 .service-aside img { max-height: 240px; object-fit: contain; object-position: left; }
 .form-input, .form-select, .form-textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto !important; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .ux-reveal.is-pending { opacity: 1; translate: none; }
 .fade-in, .hero-visual, .hero-content > *, .section .s-head, .contact-info { opacity: 1 !important; transform: none !important; }
}

/* Focused motion: finite accents and explicit interaction feedback. */
@keyframes menu-enter { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes field-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes submit-spin { to { transform: rotate(360deg); } }
@keyframes success-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@media (max-width: 1200px) {
 .nav-links.open { animation: menu-enter .2s var(--ux-ease); }
 .nav-links.open li { animation: menu-enter .22s var(--ux-ease) both; }
 .nav-links.open li:nth-child(2) { animation-delay: 30ms; }
 .nav-links.open li:nth-child(3) { animation-delay: 60ms; }
 .nav-links.open li:nth-child(4) { animation-delay: 90ms; }
 .nav-links.open li:nth-child(n+5) { animation-delay: 120ms; }
}
@media (min-width: 1101px) {
 .process-ready .process-step:nth-of-type(3) .process-num { transition-delay: .18s; }
 .process-ready .process-step:nth-of-type(4) .process-num { transition-delay: .36s; }
 .process-ready .process-step:nth-of-type(5) .process-num { transition-delay: .54s; }
}
.viewer-stage { position: relative; touch-action: pan-y pinch-zoom; }
.viewer-status { position: absolute; top: 50%; left: 16px; right: 16px; transform: translateY(-50%); margin: 0; text-align: center; color: #526365; font-size: 14px; }
.viewer-status:empty { display: none; }
.form-submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
form[aria-busy="true"] .form-submit-btn::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: submit-spin .7s linear infinite; }
.form-success { animation: field-enter .3s var(--ux-ease); }
.form-success .success-icon polyline { stroke-dasharray: 60; stroke-dashoffset: 0; animation: success-draw .6s ease-out; }
@media (max-width: 480px) {
 .home-page .float-chat { right: 12px; gap: 9px; }
 .home-page .float-btn { width: 52px; min-width: 52px; height: 52px; }
 .home-page .float-tip { right: 64px; }
}
@media (prefers-reduced-motion: reduce) {
 .process-ready .process-connector::after { transform: scaleX(1); }
 .process-num { transition-delay: 0s !important; }
}