/* ===== Barlow Semi Condensed — self-hosted from uploaded brand fonts ===== */
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:100;font-display:swap;src:url('fonts/BarlowSemiCondensed-Thin.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:100;font-display:swap;src:url('fonts/BarlowSemiCondensed-ThinItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/BarlowSemiCondensed-ExtraLight.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:200;font-display:swap;src:url('fonts/BarlowSemiCondensed-ExtraLightItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/BarlowSemiCondensed-Light.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/BarlowSemiCondensed-LightItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/BarlowSemiCondensed-Regular.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/BarlowSemiCondensed-Italic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/BarlowSemiCondensed-Medium.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/BarlowSemiCondensed-MediumItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/BarlowSemiCondensed-SemiBoldItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/BarlowSemiCondensed-Bold.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/BarlowSemiCondensed-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/BarlowSemiCondensed-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:800;font-display:swap;src:url('fonts/BarlowSemiCondensed-ExtraBoldItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/BarlowSemiCondensed-Black.ttf') format('truetype');}
@font-face{font-family:'Barlow Semi Condensed';font-style:italic;font-weight:900;font-display:swap;src:url('fonts/BarlowSemiCondensed-BlackItalic.ttf') format('truetype');}

/* ===== Sarabun — self-hosted from uploaded brand fonts ===== */
@font-face{font-family:'Sarabun';font-style:normal;font-weight:100;font-display:swap;src:url('fonts/Sarabun-Thin.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:100;font-display:swap;src:url('fonts/Sarabun-ThinItalic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/Sarabun-ExtraLight.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:200;font-display:swap;src:url('fonts/Sarabun-ExtraLightItalic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/Sarabun-Light.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/Sarabun-LightItalic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Sarabun-Regular.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/Sarabun-Italic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Sarabun-Medium.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/Sarabun-MediumItalic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Sarabun-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/Sarabun-SemiBoldItalic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Sarabun-Bold.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/Sarabun-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/Sarabun-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:italic;font-weight:800;font-display:swap;src:url('fonts/Sarabun-ExtraBoldItalic.ttf') format('truetype');}

/* ===== Barlow — self-hosted from uploaded brand fonts ===== */
@font-face{font-family:'Barlow';font-style:normal;font-weight:100;font-display:swap;src:url('fonts/Barlow-Thin.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:100;font-display:swap;src:url('fonts/Barlow-ThinItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/Barlow-ExtraLight.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:200;font-display:swap;src:url('fonts/Barlow-ExtraLightItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/Barlow-Light.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/Barlow-LightItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Barlow-Regular.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/Barlow-Italic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Barlow-Medium.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/Barlow-MediumItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Barlow-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/Barlow-SemiBoldItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Barlow-Bold.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/Barlow-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/Barlow-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:800;font-display:swap;src:url('fonts/Barlow-ExtraBoldItalic.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/Barlow-Black.ttf') format('truetype');}
@font-face{font-family:'Barlow';font-style:italic;font-weight:900;font-display:swap;src:url('fonts/Barlow-BlackItalic.ttf') format('truetype');}

/* ============================================================
   VISANA — Design Tokens (colors + type)
   Brand of Công ty Cổ phần Du lịch Khám phá Việt Nam
   Source: DRT_Guideline VISANA + visana.vn
   Fonts: Barlow (headlines) self-hosted from fonts/; Sarabun (body) self-hosted from fonts/.
   @import the families in your <head>:
   https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap
   ============================================================ */

:root {
  /* ---- BRAND COLORS · RGB / Digital (web, app, social) ---- */
  --deep-blue:  #1A43AD;   /* PRIMARY · ~70% of surface · RGB 26 67 173 */
  --aqua:       #00FFBC;   /* accent / CTA / graphic · RGB 0 255 188 */
  --mint:       #DFFFEA;   /* soft background / breathing room · RGB 223 255 234 */
  --goldenrod:  #FDB813;   /* contrast pop / positive energy · RGB 253 184 19 */

  /* ---- BRAND COLORS · CMYK / Print supplements ---- */
  --deep-blue-print: #2B479C;
  --aqua-print:      #70C5A3;
  --mint-print:      #E3F1E6;
  --goldenrod-print: #FCB813;

  /* ---- DEEP BLUE TINT SCALE (derived, for UI surfaces) ---- */
  --blue-900: #0E235C;
  --blue-800: #13348C;   /* gradient dark stop */
  --blue-700: #1A43AD;   /* = brand deep-blue */
  --blue-600: #2B53C0;
  --blue-500: #3D67D6;
  --blue-300: #8FA6E6;
  --blue-100: #DCE4F7;
  --blue-50:  #EEF2FB;

  /* ---- AQUA / TEAL working tints ---- */
  --teal:     #10B89A;   /* aqua darkened — usable on white for text/icons */
  --aqua-600: #00C99A;

  /* ---- NEUTRALS / INK ---- */
  --ink:      #16224A;   /* primary text on light */
  --slate:    #5C6680;   /* secondary text / captions */
  --line:     #E6E9F1;   /* hairline borders / dividers */
  --paper:    #FBFCFE;   /* page background (near-white, cool) */
  --white:    #FFFFFF;

  /* ---- SEMANTIC ---- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --surface-alt:   var(--blue-50);
  --fg:            var(--ink);
  --fg-muted:      var(--slate);
  --fg-on-dark:    rgba(255,255,255,.92);
  --fg-on-dark-muted: rgba(255,255,255,.70);
  --border:        var(--line);
  --primary:       var(--deep-blue);
  --primary-press: var(--blue-800);
  --accent:        var(--aqua);
  --accent-ink:    #06463A;  /* readable text colour to sit on aqua */
  --success:       var(--teal);
  --warning:       var(--goldenrod);
  --warning-ink:   #5A3D00;
  --danger:        #D8453C;

  /* ---- SIGNATURE GRADIENTS ---- */
  --grad-hero: linear-gradient(150deg, #13348C 0%, #1A43AD 60%, #2B479C 100%);
  --grad-aqua: linear-gradient(160deg, #00FFBC, #10B89A);
  --grad-dot:  linear-gradient(180deg, #00FFBC, #1A43AD);  /* the logo dot */
  --grad-rule: linear-gradient(90deg, var(--deep-blue), var(--aqua));
  --glow-aqua: radial-gradient(900px 600px at 88% 8%, rgba(0,255,188,.22), transparent 55%);

  /* ============ TYPE ============ */
  --font-head: 'Barlow', Arial, sans-serif;       /* headlines / UI / numbers */
  --font-display-condensed: 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif; /* tight display / big stat numbers / posters */
  --font-body: 'Sarabun', system-ui, sans-serif;  /* body / running text (great Vietnamese diacritics) */

  /* weights */
  --w-light: 300;  --w-reg: 400;  --w-med: 500;
  --w-semi: 600;   --w-bold: 700; --w-extra: 800; --w-black: 900;

  /* ---- TYPE SCALE (display uses Barlow Black, tight tracking) ---- */
  --fs-display: clamp(48px, 9vw, 104px);
  --fs-h1:      clamp(40px, 7vw, 72px);
  --fs-h2:      clamp(32px, 5vw, 56px);
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-cap:     12.5px;
  --fs-kicker:  13px;

  --lh-tight:  .92;
  --lh-snug:   1.15;
  --lh-body:   1.65;
  --track-tight: -.02em;
  --track-kicker: .28em;

  /* ============ SPACING (8px base; layout grid: 8 cols, 74px margin, 25px gutter on 1000px ref) ============ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 84px;
  --gutter: 25px;
  --margin: 74px;

  /* ============ RADII ============ */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 18px; --r-pill: 999px;

  /* ============ SHADOWS / ELEVATION ============ */
  --sh-1: 0 1px 2px rgba(22,34,74,.06);
  --sh-2: 0 4px 14px rgba(22,34,74,.08);
  --sh-3: 0 12px 34px rgba(22,34,74,.12);
  --sh-blue: 0 14px 30px rgba(26,67,173,.28);   /* coloured lift under blue CTAs */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — opt in by importing this file.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .head {
  font-family: var(--font-head);
  color: var(--deep-blue);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  margin: 0;
}
h1 { font-size: var(--fs-h1); font-weight: var(--w-black); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--w-extra); }
h3 { font-size: var(--fs-h3); font-weight: var(--w-extra); text-transform: uppercase; }
h4 { font-size: var(--fs-h4); font-weight: var(--w-bold); }

.display {
  font-family: var(--font-head); font-weight: var(--w-black);
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--track-tight); color: var(--deep-blue);
}
.kicker {
  font-family: var(--font-head); font-weight: var(--w-semi);
  letter-spacing: var(--track-kicker); text-transform: uppercase;
  font-size: var(--fs-kicker); color: var(--teal);
}
.lead  { font-size: var(--fs-lead); color: var(--fg-muted); line-height: 1.55; }
p      { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.caption { font-size: var(--fs-cap); color: var(--fg-muted); }
.num   { font-family: var(--font-head); font-weight: var(--w-extra); font-variant-numeric: tabular-nums; }
a      { color: var(--deep-blue); text-decoration: none; }
a:hover{ color: var(--blue-800); }