/* PAN Flipbook — theo Pan American Travel (PAN) Design System.
   Màu, chữ, bo góc, đổ bóng lấy từ tokens của design system; đổi ở khối :root. */

@font-face { font-family: "Averta"; font-weight: 300; font-style: normal; font-display: swap; src: url(/static/fonts/averta-300.woff2) format("woff2"); }
@font-face { font-family: "Averta"; font-weight: 400; font-style: normal; font-display: swap; src: url(/static/fonts/averta-400.woff2) format("woff2"); }
@font-face { font-family: "Averta"; font-weight: 600; font-style: normal; font-display: swap; src: url(/static/fonts/averta-600.woff2) format("woff2"); }
@font-face { font-family: "Averta"; font-weight: 700; font-style: normal; font-display: swap; src: url(/static/fonts/averta-700.woff2) format("woff2"); }

:root {
  /* thương hiệu */
  --navy-950: #001a33; --navy-900: #002447; --navy-800: #003366; --navy-700: #0a4580; --navy-600: #0a5aa8;
  --blue-700: #0052a3; --blue-600: #0066cc; --blue-500: #2a82d6; --blue-300: #8fbfeb; --blue-100: #dcebf8; --blue-50: #eef5fc;
  --red-700: #a82a2a; --red-600: #cc3333; --red-100: #f7dede;
  --paper: #faf8f5; --sand-100: #f3f0ea; --sand-200: #e8e3da; --sand-300: #d4cdc0;
  --gray-100: #f1f2f4; --gray-200: #e2e4e8; --gray-300: #c9ccd2; --gray-400: #9ea2aa; --gray-500: #6b7079; --gray-600: #4c4d4f; --gray-900: #1a1c1f;
  --success: #1d7a5a; --success-bg: #e3f2ec; --danger: #b3261e;

  /* tên dùng trong các trang */
  --ink: var(--navy-800); --ink-2: var(--navy-700);
  --accent: var(--blue-600); --accent-ink: var(--navy-800); --accent-soft: var(--blue-50);
  --card: #fff; --line: var(--gray-200); --text: var(--gray-900); --muted: var(--gray-500);
  --ok: var(--success);

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius: 6px;
  --shadow-xs: 0 1px 2px rgba(0,26,51,.06); --shadow-sm: 0 2px 8px rgba(0,26,51,.07); --shadow-md: 0 8px 24px rgba(0,26,51,.10); --shadow-lg: 0 20px 48px rgba(0,26,51,.16);
  --shadow: var(--shadow-md);
  --ease: cubic-bezier(.2,.6,.2,1);
  --sans: "Averta", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--text); background: var(--paper); }
h1, h2, h3 { font-family: var(--sans); font-weight: 300; letter-spacing: -.015em; line-height: 1.2; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.logo { display: block; height: 34px; width: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand small { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); padding-left: 12px; border-left: 1px solid var(--gray-300); }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-600); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid var(--gray-300); background: #fff; color: var(--navy-800); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease); }
.btn:hover { background: var(--blue-50); border-color: var(--blue-500); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.btn.primary:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn.accent { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.btn.accent:hover { background: var(--red-700); border-color: var(--red-700); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #fbe6e4; border-color: var(--danger); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--blue-50); color: var(--navy-800); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }