/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ocean:#005B96; --ocean-deep:#003D66; --ocean-soft:#E6F0F7;
  --sand:#F5A623; --sand-soft:#FBE3B3; --sand-paper:#FAF1DE;
  --coral:#E8654E;
  --seagrass:#3FA796;
  --ink:#1A202C; --ink-soft:#4A5568; --ink-mute:#718096;
  --paper:#FBF8F3; --mist:#F0F4F7; --line:#E2E8F0;
  --radius:10px; --radius-lg:18px; --radius-pill:999px;
  --container:1200px;
  --font-ui:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,Segoe UI,Roboto,sans-serif;
  --font-display:"Be Vietnam Pro","Plus Jakarta Sans",-apple-system,sans-serif;
  --shadow-sm:0 1px 2px rgba(26,32,44,.06);
  --shadow-md:0 6px 24px -8px rgba(0,91,150,.18),0 2px 6px rgba(26,32,44,.05);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-ui); color:var(--ink);
  background:var(--paper); line-height:1.55; font-size:16px; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.1; margin:0; letter-spacing:-.022em}
p{margin:0}
.container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
@media (max-width:480px){.container{padding-inline:16px}}

/* Section title with sand stamp underline */
.section-title{
  font-family:var(--font-display); font-size:30px; font-weight:800;
  display:flex; align-items:baseline; gap:14px; margin-bottom:6px;
  letter-spacing:-.025em;
}
.section-title::before{
  content:""; width:28px; height:3px; background:var(--coral); border-radius:2px; flex:none;
  transform:translateY(-6px);
}
.section-sub{color:var(--ink-soft); font-size:15px; max-width:62ch; margin-top:2px}
.section{padding:64px 0}
@media (max-width:768px){.section{padding:44px 0} .section-title{font-size:24px}}

/* Wave divider — Đông Sơn motif, repeats horizontally */
.wave-divider{
  height:14px; width:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'><path d='M0 7 Q 7.5 1 15 7 T 30 7 T 45 7 T 60 7' fill='none' stroke='%23005B96' stroke-width='1.4' stroke-linecap='round'/><path d='M0 11 Q 7.5 5 15 11 T 30 11 T 45 11 T 60 11' fill='none' stroke='%23005B96' stroke-width='1' stroke-linecap='round' opacity='.4'/></svg>");
  background-size:60px 14px; background-repeat:repeat-x;
  opacity:.55;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--radius-pill);
  font-weight:700; font-size:15px; letter-spacing:-.005em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--coral); color:#fff}
.btn-primary:hover{background:#d65440; transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line); color:var(--ink); background:#fff}
.btn-ghost:hover{border-color:var(--ocean); color:var(--ocean)}
.btn-ocean{background:var(--ocean); color:#fff}
.btn-ocean:hover{background:var(--ocean-deep)}
.link-arrow{color:var(--ocean); font-weight:600; font-size:14px}
.link-arrow:hover{color:var(--ocean-deep); text-decoration:underline}

/* ============================================================
   HEADER
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:28px; height:68px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ocean-deep); letter-spacing:-.02em}
.logo-mark{width:34px; height:34px; flex:none}
.nav-main{display:flex; gap:6px; flex:1}
.nav-main > .nav-item{position:relative}
.nav-main a, .nav-main button.nav-btn{
  padding:10px 12px; border-radius:8px; font-size:15px; font-weight:600; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:4px;
}
.nav-main a:hover, .nav-main button.nav-btn:hover{color:var(--ocean); background:var(--mist)}
.nav-actions{display:flex; align-items:center; gap:10px}
.icon-btn{width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft)}
.icon-btn:hover{background:var(--mist); color:var(--ocean)}
.hotline-chip{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ocean-deep); padding:8px 12px; border-radius:var(--radius-pill); background:var(--ocean-soft)}

/* Megamenu (CSS-only via :hover/:focus-within) */
.mega{
  position:absolute; top:calc(100% + 8px); left:-12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:22px;
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
  min-width:560px;
}
.nav-item:hover .mega, .nav-item:focus-within .mega{opacity:1; pointer-events:auto; transform:none}
.mega-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px 18px}
.mega-item{display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:10px}
.mega-item:hover{background:var(--mist)}
.mega-item .stamp{width:32px; height:32px; flex:none}
.mega-item .mi-title{font-weight:600; font-size:14px; color:var(--ink); margin-bottom:1px}
.mega-item .mi-sub{font-size:12px; color:var(--ink-mute); line-height:1.35}
.mega-foot{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft)}
.mega-foot a{color:var(--ocean); font-weight:600}

/* Mobile: hide nav, show hamburger */
.hamburger{display:none}
@media (max-width:1024px){
  .nav-main{display:none}
  .hotline-chip{display:none}
  .hamburger{display:inline-flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:#0a2233;
  color:#fff;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(0,30,60,.15) 0%, rgba(0,30,60,.45) 55%, rgba(0,30,60,.7) 100%),
    repeating-linear-gradient(135deg, #1e5f87 0 22px, #1a557a 22px 44px);
}
/* Decorative SVG seascape silhouette as a placeholder for real photo */
.hero-art{
  position:absolute; inset:0; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='sky' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23244e6f'/><stop offset='.55' stop-color='%23396f93'/><stop offset='1' stop-color='%2360a3c4'/></linearGradient><linearGradient id='sea' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23347598'/><stop offset='1' stop-color='%231a4763'/></linearGradient></defs><rect width='1600' height='700' fill='url(%23sky)'/><circle cx='1300' cy='160' r='60' fill='%23f5d99a' opacity='.85'/><path d='M0 470 Q 180 380 360 430 T 720 430 T 1080 430 T 1600 430 L 1600 700 L 0 700 Z' fill='url(%23sea)'/><path d='M0 450 Q 200 410 400 430 T 800 430 T 1200 430 T 1600 430' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.18'/><path d='M180 470 q 120 -90 240 0' fill='%23173247' opacity='.7'/><path d='M460 480 q 180 -130 360 0' fill='%23173247' opacity='.55'/><path d='M820 470 q 100 -70 200 0' fill='%23173247' opacity='.45'/><g opacity='.85' fill='%23f5f5ee'><circle cx='420' cy='420' r='1.6'/><circle cx='540' cy='430' r='1.4'/><circle cx='660' cy='418' r='1.6'/><circle cx='760' cy='428' r='1.2'/></g></svg>");
  background-size:cover; background-position:center;
}
.hero-inner{position:relative; z-index:1; padding:88px 0 56px; max-width:760px}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(255,255,255,.12); padding:6px 12px; border-radius:var(--radius-pill);
  font-weight:600; backdrop-filter: blur(6px);
}
.hero h1{
  font-size:clamp(36px,5.4vw,68px); font-weight:900; margin:18px 0 16px;
  text-wrap:pretty; letter-spacing:-.03em; line-height:1.05;
}
.hero h1 em{font-style:normal; color:var(--sand); font-weight:700}
.hero-lead{font-size:clamp(15px,1.6vw,18px); max-width:56ch; opacity:.92; line-height:1.55}
.hero-search{
  margin-top:28px; max-width:640px;
  background:#fff; border-radius:var(--radius-pill); padding:6px 6px 6px 22px;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.35);
}
.hero-search input{
  flex:1; border:0; outline:0; padding:14px 0; font-size:15px; color:var(--ink); background:transparent;
  font-family:inherit;
}
.hero-search .btn{padding:12px 22px}
.hero-quick{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px}
.hero-quick a{
  font-size:13px; padding:6px 12px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px);
  font-weight:500;
}
.hero-quick a:hover{background:rgba(255,255,255,.24)}
.hero-stamp{
  position:absolute; right:42px; bottom:54px; z-index:1;
  width:120px; height:120px; opacity:.85;
}
@media (max-width:768px){
  .hero-inner{padding:56px 0 40px}
  .hero-stamp{display:none}
  .hero-search{padding:5px 5px 5px 16px}
  .hero-search input{padding:11px 0; font-size:14px}
  .hero-search .btn{padding:10px 16px; font-size:14px}
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{background:#fff; border-bottom:1px solid var(--line)}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:18px 0;
}
.trust-item{display:flex; align-items:center; gap:10px; padding:8px 6px}
.trust-item svg{flex:none; color:var(--seagrass)}
.trust-item .ti-title{font-weight:600; font-size:14px; color:var(--ink)}
.trust-item .ti-sub{font-size:12px; color:var(--ink-mute); line-height:1.3}
@media (max-width:768px){.trust-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   PILLAR GRID — 9 cửa ngõ
   ============================================================ */
.pillars{background:var(--paper)}
.pillars-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px}
.pillar-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.pillar-grid .pillar-card:nth-child(n+6){grid-column:span 1}
.pillar-card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 18px 22px; min-height:170px;
  display:flex; flex-direction:column; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.pillar-card::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--ocean);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.pillar-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent}
.pillar-card:hover::before{transform:scaleX(1)}
.pillar-card .stamp{width:46px; height:46px; color:var(--ocean)}
.pillar-card .pc-title{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); margin-top:4px; letter-spacing:-.015em}
.pillar-card .pc-sub{font-size:13px; color:var(--ink-mute); line-height:1.4}
.pillar-card .pc-tag{margin-top:auto; font-size:12px; color:var(--ocean); font-weight:600}
@media (max-width:1024px){.pillar-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.pillar-grid{grid-template-columns:repeat(2,1fr); gap:10px} .pillar-card{padding:16px 14px; min-height:150px} .pillar-card .stamp{width:40px;height:40px}}

/* ============================================================
   FEATURED TOURS
   ============================================================ */
.tours-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px}
.tour-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.tour-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.tour-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.tour-img{
  aspect-ratio:4/3; background:var(--mist); position:relative;
  background-size:cover; background-position:center;
}
.tour-img.placeholder{
  background-image:repeating-linear-gradient(45deg, #d8e3eb 0 8px, #e6eef3 8px 16px);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-mute); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
}
.tour-pillar-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(255,255,255,.95); color:var(--ocean-deep);
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; gap:5px;
}
.tour-pillar-badge svg{width:14px; height:14px}
.tour-fav{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center;
}
.tour-body{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; gap:6px}
.tour-cat{font-size:12px; color:var(--ink-mute)}
.tour-title{font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--ink); line-height:1.3; min-height:42px; letter-spacing:-.01em}
.tour-meta{display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--ink-soft); margin-top:2px}
.tour-meta span{padding:3px 8px; background:var(--mist); border-radius:6px}
.tour-meta .meta-season{background:var(--sand-paper); color:#8a6515}
.tour-rating{display:flex; align-items:center; gap:6px; font-size:13px; margin-top:4px}
.tour-rating .stars{color:var(--sand)}
.tour-rating .count{color:var(--ink-mute)}
.tour-foot{display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding-top:8px}
.tour-price{font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--ocean-deep); letter-spacing:-.015em}
.tour-price small{font-weight:500; color:var(--ink-mute); font-size:11px; display:block}
@media (max-width:1024px){.tour-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){
  .tour-grid{grid-template-columns:1fr; gap:14px}
}

/* ============================================================
   SEASON STRIP
   ============================================================ */
.season{background:linear-gradient(180deg, #fff 0%, var(--mist) 100%)}
.season-strip{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px; margin-top:24px;
  box-shadow:var(--shadow-sm);
}
.season-months{
  display:grid; grid-template-columns:repeat(12,1fr); gap:6px;
  margin-bottom:18px;
}
.month{
  text-align:center; padding:14px 4px; border-radius:10px;
  background:var(--mist); position:relative;
}
.month .m-name{font-size:11px; font-weight:600; color:var(--ink-soft); letter-spacing:.04em}
.month .m-dot{display:block; margin:6px auto 4px; width:10px; height:10px; border-radius:50%}
.month .m-temp{font-size:11px; color:var(--ink-mute)}
.month.dry{background:var(--ocean-soft)} .month.dry .m-dot{background:var(--ocean)}
.month.fest{background:var(--sand-paper)} .month.fest .m-dot{background:var(--sand)}
.month.transit{background:#f4eee0} .month.transit .m-dot{background:#bba36b}
.month.rain{background:#eef2f4} .month.rain .m-dot{background:var(--ink-mute)}
.month.fest::after{
  content:"★"; position:absolute; top:4px; right:6px; color:var(--coral); font-size:10px;
}
.season-legend{display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--ink-soft); align-items:center}
.season-legend i{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-1px}
.season-legend i.dry{background:var(--ocean)}
.season-legend i.fest{background:var(--sand)}
.season-legend i.transit{background:#bba36b}
.season-legend i.rain{background:var(--ink-mute)}
@media (max-width:768px){
  .season-months{grid-template-columns:repeat(6,1fr); gap:8px}
}
@media (max-width:480px){
  .season-strip{padding:16px}
  .season-months{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   SPECIALTY TEASER (Đặc sản)
   ============================================================ */
.specialty{background:var(--paper)}
.specialty-feat{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px;
}
.spec-card{
  position:relative;
  border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  display:grid; grid-template-columns:1.1fr 1fr; min-height:220px;
}
.spec-card .sc-body{padding:24px 24px 22px; display:flex; flex-direction:column; gap:8px}
.spec-card .sc-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--coral); font-weight:700}
.spec-card .sc-title{font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--ink); line-height:1.1; letter-spacing:-.025em}
.spec-card .sc-desc{font-size:14px; color:var(--ink-soft); line-height:1.55}
.spec-card .sc-link{margin-top:auto; font-size:14px; font-weight:600; color:var(--ocean)}
.spec-card .sc-art{position:relative}
.spec-card .sc-art.tram{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(245,166,35,.15), transparent 60%),
    repeating-linear-gradient(115deg, #5d3a1f 0 4px, #6b4226 4px 10px, #4d2e18 10px 14px);
}
.spec-card .sc-art.yen{
  background:
    radial-gradient(ellipse at 70% 40%, rgba(255,255,255,.8), transparent 65%),
    repeating-linear-gradient(70deg, #f7eedb 0 4px, #ede1c4 4px 10px, #e0d2ae 10px 14px);
}
.spec-card .sc-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--paper) 0%, transparent 30%);
}
.spec-card .sc-art-label{
  position:absolute; bottom:12px; right:12px; font-family:ui-monospace,monospace;
  font-size:10px; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:4px 8px; border-radius:6px;
}

.spec-others{
  margin-top:24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.spec-others .so-label{font-weight:600; color:var(--ink-soft); font-size:14px; padding-right:12px; border-right:1px solid var(--line)}
.spec-others a{
  font-size:14px; padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--mist); color:var(--ink); font-weight:500;
}
.spec-others a:hover{background:var(--sand-paper); color:var(--ink)}

@media (max-width:768px){
  .specialty-feat{grid-template-columns:1fr}
  .spec-card{grid-template-columns:1fr}
  .spec-card .sc-art{min-height:140px}
  .spec-card .sc-art::after{background:linear-gradient(180deg, transparent 0%, var(--paper) 100%)}
}

/* ============================================================
   CẨM NANG TEASER (Blog)
   ============================================================ */
.camnang{background:#fff}
.cn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:28px}
.blog-card{display:flex; flex-direction:column; gap:10px}
.blog-card .bc-img{
  aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
  background:repeating-linear-gradient(45deg, #d8e3eb 0 8px, #e6eef3 8px 16px);
  display:flex; align-items:center; justify-content:center; color:var(--ink-mute);
  font-family:ui-monospace,monospace; font-size:11px;
}
.blog-card .bc-cat{font-size:12px; font-weight:600; color:var(--coral); letter-spacing:.04em; text-transform:uppercase; margin-top:4px}
.blog-card .bc-title{font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--ink); line-height:1.25; letter-spacing:-.018em}
.blog-card .bc-excerpt{font-size:14px; color:var(--ink-soft); line-height:1.55; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
.blog-card .bc-meta{font-size:12px; color:var(--ink-mute); display:flex; gap:10px; align-items:center}
.blog-card .bc-meta::before{content:""; width:18px; height:1px; background:var(--ink-mute); display:inline-block}
@media (max-width:768px){.cn-grid{grid-template-columns:1fr; gap:24px}}

/* ============================================================
   LOCAL VOICES
   ============================================================ */
.voices{background:linear-gradient(180deg, var(--paper) 0%, var(--ocean-soft) 100%)}
.voice-card{
  margin-top:28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 36px; display:flex; align-items:center; gap:28px;
  box-shadow:var(--shadow-sm);
}
.voice-portrait{
  width:120px; height:120px; border-radius:50%; flex:none;
  background:repeating-linear-gradient(45deg, #c8d6df 0 6px, #d8e3eb 6px 12px);
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,monospace; font-size:10px; color:var(--ink-mute);
  border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line);
}
.voice-body{flex:1}
.voice-quote{
  font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--ink);
  line-height:1.35; margin-bottom:14px; text-wrap:pretty;
  position:relative; padding-left:20px; letter-spacing:-.02em;
}
.voice-quote::before{
  content:"❝"; position:absolute; left:-6px; top:-12px;
  font-size:48px; color:var(--sand); font-family:Georgia,serif; line-height:1;
}
.voice-attr{font-size:14px; color:var(--ink-soft)}
.voice-attr b{color:var(--ink); font-weight:600}
.voice-link{margin-top:14px; display:inline-flex}
@media (max-width:768px){
  .voice-card{flex-direction:column; text-align:center; padding:28px 22px; gap:18px}
  .voice-quote{padding-left:0; font-size:18px}
  .voice-quote::before{display:none}
}

/* ============================================================
   CUSTOM TOUR CTA
   ============================================================ */
.custom-cta{
  background:
    linear-gradient(135deg, var(--ocean) 0%, var(--ocean-deep) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.custom-cta::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'><path d='M0 7 Q 7.5 1 15 7 T 30 7 T 45 7 T 60 7' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' opacity='.18'/></svg>");
  background-size:80px 18px; background-repeat:repeat;
  pointer-events:none;
}
.cta-inner{
  position:relative; padding:56px 0;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-text h2{font-size:32px; margin-bottom:10px; color:#fff; font-weight:800; letter-spacing:-.025em}
.cta-text p{opacity:.92; max-width:50ch}
.cta-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.cta-actions .btn-coral{background:var(--coral); color:#fff}
.cta-actions .btn-coral:hover{background:#d65440}
.cta-actions .btn-outline{border:1.5px solid rgba(255,255,255,.4); color:#fff}
.cta-actions .btn-outline:hover{background:rgba(255,255,255,.1); border-color:#fff}
@media (max-width:768px){.cta-text h2{font-size:24px} .cta-inner{padding:42px 0}}

/* ============================================================
   FISHERMAN BULLETIN
   ============================================================ */
.bulletin{background:var(--ink); color:#cbd5dc; padding:28px 0}
.bulletin-inner{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.bulletin-tag{
  background:var(--ocean); color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--radius-pill); flex:none;
}
.bulletin-items{display:flex; gap:24px; flex-wrap:wrap; flex:1; font-family:var(--font-ui); font-size:14px}
.bulletin-items div{display:flex; align-items:center; gap:8px}
.bulletin-items b{color:#fff; font-weight:600}
.bulletin-items svg{color:var(--sand); flex:none}
.bulletin-date{font-size:12px; color:var(--ink-mute); font-family:ui-monospace,monospace}
@media (max-width:768px){.bulletin-items{gap:14px; font-size:13px}}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:#0E1A23; color:#9aa9b2; padding:56px 0 24px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:36px}
.foot-brand .logo{color:#fff; margin-bottom:14px}
.foot-brand p{font-size:14px; max-width:36ch; line-height:1.6}
.foot-col h4{color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; font-family:var(--font-ui); font-weight:600}
.foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.foot-col a{font-size:14px; color:#9aa9b2}
.foot-col a:hover{color:var(--sand)}
.foot-contact div{font-size:14px; margin-bottom:8px; display:flex; gap:8px; align-items:center}
.foot-bottom{
  border-top:1px solid #233642; padding-top:20px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px;
}
.social{display:flex; gap:10px}
.social a{
  width:34px; height:34px; border-radius:50%; background:#1a2935; color:#9aa9b2;
  display:inline-flex; align-items:center; justify-content:center;
}
.social a:hover{background:var(--ocean); color:#fff}
@media (max-width:768px){.foot-grid{grid-template-columns:1fr 1fr; gap:24px}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE STICKY ACTION BAR
   ============================================================ */
.mobilebar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:#fff; border-top:1px solid var(--line);
  padding:8px 12px; gap:8px;
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.mobilebar a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 8px; border-radius:10px; font-size:13px; font-weight:600;
}
.mobilebar a.call{background:var(--ocean-soft); color:var(--ocean-deep)}
.mobilebar a.zalo{background:var(--seagrass); color:#fff}
.mobilebar a.book{background:var(--coral); color:#fff}
@media (max-width:768px){
  .mobilebar{display:flex}
  body{padding-bottom:64px}
}