/* Vietnam Legacy Travel — UIUXPROMAX design system.
   Kept separate from legacy CSS while the application is progressively refactored. */
:root {
  --ui-navy: #1e3a8a;
  --ui-navy-deep: #102657;
  --ui-blue: #3b82f6;
  --ui-orange: #c2410c;
  --ui-orange-hover: #9a3412;
  --ui-ink: #10213f;
  --ui-copy: #43536d;
  --ui-canvas: #eff6ff;
  --ui-surface: #ffffff;
  --ui-soft: #e9eef5;
  --ui-line: #cbdaf2;
  --ui-success: #047857;
  --ui-danger: #b91c1c;
  --ui-radius-sm: 10px;
  --ui-radius: 16px;
  --ui-radius-lg: 24px;
  --ui-shadow: 0 10px 30px rgba(30, 58, 138, .09);
  --ui-shadow-hover: 0 18px 44px rgba(30, 58, 138, .16);
}

html { scroll-behavior: smooth; }
body { font-family: "Atkinson Hyperlegible", Arial, sans-serif; background: var(--ui-canvas); color: var(--ui-ink); }
button, input, select, textarea { font-family: inherit; }
a, button, select { touch-action: manipulation; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid rgba(59,130,246,.72); outline-offset: 3px; }
:is(button, input, select, textarea):disabled, .mud-disabled { opacity: .56; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; }
button[aria-busy="true"] { cursor: wait !important; }

/* Shared asynchronous and zero-data states */
.ui-state { display:grid; width:100%; min-height:280px; place-items:center; align-content:center; gap:14px; padding:clamp(24px,5vw,44px); border:1px solid var(--ui-line); border-radius:var(--ui-radius); background:var(--ui-surface); color:var(--ui-copy); text-align:center; box-shadow:var(--ui-shadow); }
.ui-state--compact { min-height:210px; box-shadow:none; }
.ui-state__icon { display:grid; width:58px; height:58px; place-items:center; border-radius:18px; background:#eaf2ff; color:var(--ui-navy); font-size:1.45rem; }
.ui-state--error .ui-state__icon { background:#fff0f1; color:var(--ui-danger); }
.ui-state__spinner { width:34px; height:34px; border:3px solid #dbeafe; border-top-color:var(--ui-blue); border-radius:50%; animation:ui-state-spin .75s linear infinite; }
.ui-state__copy { display:grid; max-width:520px; gap:7px; }
.ui-state__copy h2,.ui-state__copy p { margin:0; }
.ui-state__copy h2 { color:var(--ui-ink); font:700 clamp(1.05rem,3vw,1.3rem)/1.25 "DM Sans",sans-serif; }
.ui-state__copy p { color:var(--ui-copy); line-height:1.55; overflow-wrap:anywhere; }
.ui-state__action { display:inline-flex; min-height:44px; align-items:center; justify-content:center; border:0; border-radius:9px; padding:0 18px; background:var(--ui-orange); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; }
.ui-state__action:hover { background:var(--ui-orange-hover); color:#fff; }
@keyframes ui-state-spin { to { transform:rotate(360deg); } }

/* Public shell */
.hlt-topbar { background: var(--ui-navy-deep); color: #dbeafe; }
.hlt-topbar .hlt-container { min-height: 38px; }
.hlt-navbar { top: 38px; background: rgba(255,255,255,.96); border-color: var(--ui-line); box-shadow: 0 2px 14px rgba(30,58,138,.05); }
main { padding-top: 110px !important; }
.hlt-container { max-width: 1240px; }
.hlt-logo { font-family: "DM Sans", sans-serif; color: var(--ui-navy-deep); letter-spacing: .04em; }
.hlt-logo-icon { background: var(--ui-navy); border-radius: 10px; }
.hlt-accent, .hlt-nav-link:hover { color: var(--ui-blue); }
.hlt-nav-link { font-family: "DM Sans", sans-serif; color: var(--ui-copy); font-size: .84rem; letter-spacing: .03em; text-transform: none; }
.hlt-btn-book, .hlt-search-btn { background: var(--ui-orange); border-radius: var(--ui-radius-sm); box-shadow: 0 5px 14px rgba(194,65,12,.2); text-transform: none; letter-spacing: 0; }
.hlt-btn-book:hover, .hlt-search-btn:hover { background: var(--ui-orange-hover); }
.language-currency-select { min-height: 34px; background-color: var(--ui-navy-deep); border-color: rgba(191,219,254,.55); border-radius: 8px; font-family: "DM Sans", sans-serif; font-size: .75rem; }
.hlt-footer { background: var(--ui-navy-deep); color: #eaf1ff; }
.hlt-footer-brand p, .hlt-footer-col ul li a, .hlt-footer-contact li, .hlt-footer-bottom p, .hlt-footer-links a { color: #b8c7e1; }
.hlt-footer-col h4, .hlt-footer-logo { color: #fff; }
.hlt-social-btn { border-color: #486495; color: #fff; }.hlt-social-btn:hover { background: var(--ui-blue); border-color: var(--ui-blue); }

/* Shared public page components */
.public-page { background: var(--ui-canvas); min-height: 65vh; }
.public-page-header { padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 56px); background: linear-gradient(118deg, var(--ui-navy-deep), var(--ui-navy) 62%, #2563eb); color: white; }
.public-page-header .hlt-container { max-width: 1000px; }
.public-kicker, .hlt-eyebrow { color: var(--ui-orange); font: 700 .75rem "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.public-page-title, .hlt-sec-title { font-family: "DM Sans", sans-serif; color: var(--ui-ink); letter-spacing: -.035em; }
.public-page-header .public-page-title { color: white; font-size: clamp(2.1rem, 4vw, 3.55rem); line-height: 1.06; margin: 10px 0 14px; }
.public-page-lead { max-width: 650px; color: #dbeafe; font-size: 1.12rem; line-height: 1.6; }
.tour-grid { padding: clamp(32px, 5vw, 64px) 0; }
.tour-card { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; box-shadow: none !important; background: var(--ui-surface); overflow: hidden; }
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-hover) !important; }
.tour-card .mud-card-content { padding: 22px !important; }
.tour-card .mud-button-root { border-radius: 9px !important; background: var(--ui-orange) !important; color: #fff !important; box-shadow: none !important; }
.tour-card .mud-chip { border-radius: 7px; background: #edf4ff; color: var(--ui-navy); }
.tour-empty { max-width: 660px; margin: 12px auto; padding: 44px 30px; background: white; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); text-align: center; }
.tour-detail-page { background: var(--ui-canvas); padding-bottom: 72px; }.tour-detail-page .mud-container { max-width: 1240px; }.tour-detail-page .mud-paper { border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); }.tour-detail-page .mud-table { background: #fff; border: 1px solid var(--ui-line); }.tour-detail-page [style*="#C8860A"], .tour-detail-page [style*="#c8860a"] { color: var(--ui-navy) !important; }.tour-detail-page .mud-button-filled { background: var(--ui-orange) !important; border-radius: 9px !important; box-shadow: 0 6px 18px rgba(194,65,12,.2) !important; }.tour-detail-page .mud-input-control { margin-top: 4px; }.tour-detail-page .mud-input-outlined-border { border-color: var(--ui-line); }.tour-detail-page .mud-timeline-item .mud-paper { box-shadow: none; }

/* Home */
.hlt-hero-carousel { border-bottom: 1px solid var(--ui-line); }
.hlt-hero-overlay { background: linear-gradient(90deg, rgba(16,38,87,.81), rgba(16,38,87,.4) 62%, rgba(16,38,87,.2)); }
.hlt-hero-content-absolute { justify-content: flex-start; text-align: left; pointer-events: none; }
.hlt-hero-content-absolute > * { width: min(1240px, 100%); padding: 0 clamp(16px,4vw,24px); }
.hlt-hero-kicker { color: #fed7aa; letter-spacing: .14em; }
.hlt-hero-title-carousel { font-family: "DM Sans", sans-serif; font-size: clamp(2.6rem, 5.2vw, 4.9rem); max-width: 690px; letter-spacing: -.055em; }
.hlt-hero-cta { background: var(--ui-orange); color: white; border-radius: 9px; text-transform: none; letter-spacing: 0; font-family: "DM Sans", sans-serif; }.hlt-hero-cta:hover { background: #fff; color: var(--ui-navy-deep); }
.hlt-cat-grid { position: relative; z-index: 4; margin-top: -34px; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hlt-cat-item { border-color: var(--ui-line); border-radius: var(--ui-radius-sm); padding: 23px 18px; box-shadow: var(--ui-shadow); text-align: left; }.hlt-cat-item:hover { border-color: var(--ui-blue); box-shadow: var(--ui-shadow-hover); }.hlt-cat-icon { color: var(--ui-navy); font-size: 1.5rem; margin-bottom: 12px; }.hlt-cat-title { color: var(--ui-ink); font-family: "DM Sans", sans-serif; }
.hlt-section { padding: clamp(48px, 7vw, 86px) 0; }.hlt-sec-title { font-size: clamp(2rem, 3vw, 2.75rem); }.hlt-sec-desc { color: var(--ui-copy); max-width: 620px; }.hlt-grid { gap: 20px; }.hlt-card { border-color: var(--ui-line); border-radius: var(--ui-radius); }.hlt-card:hover { box-shadow: var(--ui-shadow-hover); }.hlt-badge { color: var(--ui-navy); }.hlt-badge-hot { background: #ffedd5; color: var(--ui-orange); }.hlt-card-price { color: var(--ui-navy); }.hlt-newsletter { background: var(--ui-navy-deep); border-radius: var(--ui-radius-lg); }.hlt-nl-title,.hlt-nl-desc { color: white; }.hlt-nl-desc { opacity: .8; }.hlt-nl-form { border-radius: var(--ui-radius-sm); }.hlt-nl-form button { background: var(--ui-orange); border-radius: 8px; }

/* Authentication is intentionally calm and task-focused. */
.auth-layout { background: var(--ui-canvas); }.auth-language-switch { background: var(--ui-navy-deep) !important; border-color: rgba(191,219,254,.55) !important; border-radius: 8px; }.auth-panel-left { background: linear-gradient(145deg, var(--ui-navy-deep), var(--ui-navy)); }.auth-panel-left::before { background: radial-gradient(circle,rgba(96,165,250,.28),transparent 70%); }.auth-panel-left::after { background: radial-gradient(circle,rgba(249,115,22,.18),transparent 70%); }.auth-logo,.auth-tagline { font-family: "DM Sans", sans-serif; }.auth-logo span span,.auth-logo-icon { color: white; background: var(--ui-orange); }.auth-panel-right { background: #fff; }.auth-form-title { font-family: "DM Sans", sans-serif; color: var(--ui-ink); }.auth-input { min-height: 46px; border-radius: 9px; }.auth-input:focus { border-color: var(--ui-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.16); }.auth-submit-btn { min-height: 48px; border-radius: 9px; background: var(--ui-orange); }.auth-submit-btn:hover { background: var(--ui-orange-hover); }.auth-inline-link,.auth-switch-link { color: var(--ui-navy); }.auth-hint-button:hover,.auth-hint-button.is-open { background: #dbeafe; color: var(--ui-navy); }

/* Dedicated Admin product shell */
.admin-shell { grid-template-columns: 272px minmax(0,1fr); background: #f5f8fe; color: var(--ui-ink); }
.admin-sidebar { background: var(--ui-navy-deep); padding: 28px 18px; }.admin-brand { font-family: "DM Sans", sans-serif; margin-bottom: 48px; }.admin-brand b,.admin-nav i,.admin-sidebar-footer i { color: #93c5fd; }.admin-brand-mark { background: var(--ui-blue); color: white; border-radius: 10px; }.admin-nav a { min-height: 44px; border-radius: 9px; }.admin-nav a:hover,.admin-nav a.active { background: rgba(96,165,250,.18); color: white; }.admin-sidebar-footer { border-color: rgba(191,219,254,.16); }.admin-topbar { height: 76px; border-color: var(--ui-line); padding: 0 38px; }.admin-topbar-kicker { color: var(--ui-navy); }.admin-language.language-currency-select { min-height: 36px; color: var(--ui-navy-deep); border-color: var(--ui-line); }.admin-user { background: #eff6ff; color: var(--ui-navy-deep); min-height: 38px; }.admin-user span { background: var(--ui-navy); }.admin-content { padding: 0 24px 48px; }.admin-content .mud-container { max-width: 1320px !important; }
.admin-dashboard,.admin-standard-page { padding: clamp(26px, 4vw, 48px) 0 !important; }.admin-page-heading { margin-bottom: 32px !important; }.admin-eyebrow { color: var(--ui-orange) !important; }.admin-page-title { font-family: "DM Sans", sans-serif !important; color: var(--ui-ink) !important; }.admin-page-subtitle { color: var(--ui-copy) !important; }.admin-primary-action { min-height: 44px; background: var(--ui-orange) !important; border-radius: 9px !important; box-shadow: none !important; }.admin-stat-card,.admin-table-card,.admin-panel { border-color: var(--ui-line) !important; border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow) !important; }.admin-stat-icon { background: #dbeafe; color: var(--ui-navy); }.admin-stat-icon.teal { background: #d1fae5; color: var(--ui-success); }.admin-stat-icon.gold { background: #ffedd5; color: var(--ui-orange); }.admin-stat-label { color: var(--ui-copy) !important; }.admin-stat-value { color: var(--ui-ink) !important; }.admin-table-title h2 { font-family: "DM Sans", sans-serif; color: var(--ui-ink); }.admin-table-title p,.admin-operations-table small { color: var(--ui-copy); }.admin-table-count,.admin-seat-pill { background: #dbeafe; color: var(--ui-navy); }.admin-operations-table .mud-table-head { background: #f4f8ff; }.admin-operations-table .mud-table-head .mud-table-cell { color: var(--ui-copy) !important; }.admin-operations-table .mud-table-cell { color: var(--ui-ink) !important; border-color: #e4edf9 !important; }
.admin-standard-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.admin-standard-heading h1 { margin:6px 0 8px; font:700 clamp(1.8rem,3vw,2.45rem)/1.1 "DM Sans",sans-serif; letter-spacing:-.04em; }.admin-standard-heading p { margin:0; color:var(--ui-copy); }.admin-count { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:999px; background:#dbeafe; color:var(--ui-navy); font-weight:700; font-variant-numeric:tabular-nums; }.admin-data-table { overflow:hidden; }.admin-data-table .mud-table-head { background:#f4f8ff; }.admin-data-table .mud-table-cell { padding:16px 20px !important; border-color:#e4edf9 !important; color:var(--ui-ink); }.admin-data-table .mud-table-head .mud-table-cell { color:var(--ui-copy) !important; font:700 .72rem "DM Sans",sans-serif; letter-spacing:.07em; text-transform:uppercase; }.admin-data-table small { color:var(--ui-copy); }.admin-action-button { background:var(--ui-orange) !important; border-radius:9px !important; box-shadow:none !important; }

@media (max-width: 900px) { .hlt-cat-grid { grid-template-columns: repeat(2,1fr); margin-top: -22px; } .admin-shell { grid-template-columns:1fr; } .admin-sidebar { display:none; } .admin-topbar { padding:0 16px; } .admin-content { padding:0 16px 36px; } }
@media (max-width: 640px) { .hlt-topbar .hlt-container > span { display:none; } .hlt-topbar .hlt-container { justify-content:flex-end; } .hlt-hero-content-absolute { align-items:center; } .hlt-hero-content-absolute > * { text-align:center; } .hlt-hero-title-carousel { font-size:clamp(2.35rem,12vw,3.25rem); } .hlt-cat-grid { grid-template-columns:1fr; margin-top:0; } .hlt-section { padding:48px 0; } .hlt-grid { grid-template-columns:1fr; } .admin-page-heading,.admin-standard-heading { align-items:flex-start; flex-direction:column; } .admin-primary-action { width:100%; } .admin-topbar-actions { gap:8px; } .admin-user { max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
@media (max-width: 420px) { body { overflow-x:hidden; } :is(.hlt-container,.materio-content,.account-content) { min-width:0; } :is(button,a,input,select,textarea) { max-width:100%; } .ui-state { min-height:220px; padding:24px 16px; } .ui-state__action { width:100%; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }