/* Open Phu Quoc ecosystem header lock - 21/09/2026
   Shared chrome only. Each specialised module keeps its own internal layout and logic. */
:root{
  --openpq-shell-ink:#123d3b;
  --openpq-shell-muted:#6f807d;
  --openpq-shell-line:#e4ecea;
  --openpq-shell-paper:rgba(255,255,255,.96);
}
.vn-clock[data-vn-clock]{display:none!important}

header.topbar,
header.module-head,
header.guide-head,
header.u-head,
header.currency-head,
header.near-header,
header.explore-head,
header.hotel-head{
  min-height:72px!important;
  height:auto!important;
  padding:8px clamp(14px,3vw,34px)!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  background:var(--openpq-shell-paper)!important;
  border-bottom:1px solid var(--openpq-shell-line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:sticky!important;
  top:0!important;
  z-index:80!important;
}
header.top{
  min-height:72px!important;
  background:var(--openpq-shell-paper)!important;
  border-bottom:1px solid var(--openpq-shell-line)!important;
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
header.top .top-inner,
header.topbar .shell{
  min-height:71px!important;
  padding:8px clamp(14px,3vw,34px)!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  max-width:none!important;
  width:100%!important;
  margin:0!important;
}

header.topbar img[src*="logo-master"],
header.module-head img[src*="logo-master"],
header.guide-head img[src*="logo-master"],
header.u-head img[src*="logo-master"],
header.currency-head img[src*="logo-master"],
header.near-header img[src*="logo-master"],
header.explore-head img[src*="logo-master"],
header.hotel-head img[src*="logo-master"],
header.top img[src*="logo-master"]{
  width:58px!important;
  height:54px!important;
  max-width:58px!important;
  max-height:54px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  margin:0!important;
}

header.topbar .brand,
header.topbar .brand-home,
header.module-head>a:first-child,
header.guide-head>a:first-child,
header.u-head>a:first-child,
header.currency-head .brand,
header.explore-head .explore-brand,
header.hotel-head .hotel-brand,
header.top .top-inner>a:first-child{
  flex:0 0 auto!important;
  margin:0!important;
}

header.topbar .brand{margin-right:auto!important}
header.topbar .top-actions,
header.module-head .module-actions,
header.top .top-actions{margin-left:auto!important}
header.module-head .module-title{min-width:0;margin-right:auto!important}
header.module-head .module-title h1,
header.topbar h1,
header.explore-head-copy strong,
header.hotel-head-copy strong{
  color:var(--openpq-shell-ink)!important;
}
header.module-head .module-title p,
header.topbar .brand p,
header.explore-head-copy span,
header.hotel-head-copy span{
  color:var(--openpq-shell-muted)!important;
}

header.guide-head>a:last-child,
header.u-head>a:last-child,
header.currency-head .back,
header.near-header .back,
header.near-header .directory,
header.explore-head .home-link,
header.hotel-head .home-link,
header.top .back,
header.topbar .openpq-back,
header.topbar .openpq-home-btn,
header.module-head .home-btn{
  min-height:36px!important;
  padding:8px 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--openpq-shell-line)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--openpq-shell-ink)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

header.guide-head>a:last-child,
header.u-head>a:last-child,
header.currency-head .back,
header.explore-head .home-link,
header.hotel-head .home-link{margin-left:auto!important}

header.near-header{justify-content:flex-start!important}
header.near-header .brand{order:-3!important}
header.near-header .back{order:-2!important;margin-left:0!important}
header.near-header .directory{margin-left:auto!important}

header.topbar .health{margin-left:0!important}
header.topbar .brand span small{
  letter-spacing:.04em!important;
  text-transform:none!important;
}

@media(max-width:720px){
  header.topbar,
  header.module-head,
  header.guide-head,
  header.u-head,
  header.currency-head,
  header.near-header,
  header.explore-head,
  header.hotel-head,
  header.top{
    min-height:62px!important;
  }
  header.top .top-inner,
  header.topbar .shell{
    min-height:61px!important;
  }
  header.topbar img[src*="logo-master"],
  header.module-head img[src*="logo-master"],
  header.guide-head img[src*="logo-master"],
  header.u-head img[src*="logo-master"],
  header.currency-head img[src*="logo-master"],
  header.near-header img[src*="logo-master"],
  header.explore-head img[src*="logo-master"],
  header.hotel-head img[src*="logo-master"],
  header.top img[src*="logo-master"]{
    width:46px!important;
    height:44px!important;
    max-width:46px!important;
    max-height:44px!important;
  }
  header.topbar .brand-divider,
  header.module-head .divider{display:none!important}
  header.topbar .brand p,
  header.module-head .module-title p,
  header.explore-head-copy span,
  header.hotel-head-copy span,
  header.topbar .brand span small{display:none!important}
  header.module-head .module-title h1,
  header.topbar h1{font-size:15px!important;line-height:1.1!important}
  header.guide-head>a:last-child,
  header.u-head>a:last-child,
  header.currency-head .back,
  header.near-header .back,
  header.near-header .directory,
  header.explore-head .home-link,
  header.hotel-head .home-link,
  header.top .back,
  header.topbar .openpq-back,
  header.module-head .home-btn{
    min-height:34px!important;
    padding:7px 9px!important;
    font-size:11px!important;
  }
  header.near-header .brand{display:flex!important}
  header.near-header .back{display:none!important}
  header.topbar .health{font-size:10px!important}
}


/* Shared Utilities / Currency navigation: one module, two levels of detail. */
.openpq-utility-tabs{
  position:sticky;top:72px;z-index:75;
  display:flex;align-items:center;gap:8px;
  padding:9px max(16px,calc((100vw - 1100px)/2));
  border-bottom:1px solid var(--openpq-shell-line);
  background:rgba(255,255,255,.97);
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.openpq-utility-tabs::-webkit-scrollbar{display:none}
.openpq-utility-tabs a{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:8px 13px;
  border:1px solid var(--openpq-shell-line);border-radius:999px;
  background:#fff;color:var(--openpq-shell-ink);
  font-size:12px;font-weight:800;line-height:1.2;
  text-decoration:none;white-space:nowrap;
}
.openpq-utility-tabs a.active,
.openpq-utility-tabs a[aria-current="page"]{
  background:var(--openpq-shell-ink);color:#fff;
  border-color:var(--openpq-shell-ink);
}
.openpq-utility-tabs a:focus-visible{
  outline:2px solid #178476;outline-offset:3px;
}
@media(max-width:720px){
  .openpq-utility-tabs{top:62px;gap:7px;padding:7px 11px}
  .openpq-utility-tabs a{min-height:41px;padding:8px 12px;font-size:13px}
}


/* 25/09/2026 - keep the approved master logo fully inside the subpage header.
   Transparent vertical breathing room prevents top/baseline clipping at
   browser zoom and high device pixel ratios, without changing the asset. */
header.topbar img[src*="logo-master"],
header.module-head img[src*="logo-master"],
header.guide-head img[src*="logo-master"],
header.u-head img[src*="logo-master"],
header.currency-head img[src*="logo-master"],
header.near-header img[src*="logo-master"],
header.explore-head img[src*="logo-master"],
header.hotel-head img[src*="logo-master"],
header.top img[src*="logo-master"]{
  width:54px!important;
  height:52px!important;
  max-width:54px!important;
  max-height:52px!important;
  padding:3px 0!important;
  box-sizing:content-box!important;
  object-fit:contain!important;
  object-position:center center!important;
  clip-path:none!important;
}
header.explore-head .explore-brand,
header.hotel-head .hotel-brand{
  overflow:visible!important;
  align-items:center!important;
}
@media(max-width:720px){
header.topbar img[src*="logo-master"],
header.module-head img[src*="logo-master"],
header.guide-head img[src*="logo-master"],
header.u-head img[src*="logo-master"],
header.currency-head img[src*="logo-master"],
header.near-header img[src*="logo-master"],
header.explore-head img[src*="logo-master"],
header.hotel-head img[src*="logo-master"],
header.top img[src*="logo-master"]{
    width:44px!important;
    height:42px!important;
    max-width:44px!important;
    max-height:42px!important;
    padding:3px 0!important;
  }
}

/* Knowledge articles use a dedicated header but share the master logo. */
header.knowledge-header img[src*="logo-master"]{
  width:54px!important;height:52px!important;max-width:54px!important;max-height:52px!important;
  padding:3px 0!important;box-sizing:content-box!important;
  object-fit:contain!important;object-position:center center!important;
}
@media(max-width:720px){
  header.knowledge-header img[src*="logo-master"]{
    width:44px!important;height:42px!important;max-width:44px!important;max-height:42px!important;
  }
}


/* Close-cropped approved asset: raise only logo size, keep module layouts intact. */
@media(min-width:721px){
  header.topbar img[src*="logo-master"],
  header.module-head img[src*="logo-master"],
  header.guide-head img[src*="logo-master"],
  header.u-head img[src*="logo-master"],
  header.currency-head img[src*="logo-master"],
  header.near-header img[src*="logo-master"],
  header.explore-head img[src*="logo-master"],
  header.hotel-head img[src*="logo-master"],
  header.top img[src*="logo-master"],
  header.knowledge-header img[src*="logo-master"]{
    width:60px!important;height:58px!important;
    max-width:60px!important;max-height:58px!important;
    padding:2px 0!important;object-fit:contain!important;
  }
}

/* OPENPQ SUBPAGE RELEASE TYPOGRAPHY FLOOR - 29/09/2026
   Raise launch-critical supporting text on mobile; preserve module layouts. */
@media(max-width:720px){
  .explore-map-layer span,.explore-map-layer b,.explore-map-layer small,.explore-photo-credit,
  .near-search>span,.near-card>span,.near-popup span,.near-popup small,.discovery-card>span,.near-map-explainer .near-external-explainer,
  .transit-shell .overview-copy .eyebrow,.transit-shell .overview-metrics span,.transit-shell .overview-metrics small,
  .transit-shell .section-kicker,.transit-shell .info-kicker,.transit-shell .info-head span,.transit-shell .mobile-kv span,
  .transit-shell .source-item small,.transit-shell .status-examples span,.transit-shell .ticket-kicker,.transit-shell .ticket-meta,
  .u-route-guide span,.travel-line small,.u-card small,.price-card span,.price-card small,.choice span,.dynamic-note,.check-card li,.sync-note,
  .currency-head .vn-clock>span,.currency-head .back,.status-pill,.converter-panel .eyebrow,.converter-panel .mode,
  .money-input>span,.convert-result>span,.convert-result small,.rate-type,.quick-amounts button,.converter-panel .fine-print,
  .comparison-head,.comparison-cell small,.comparison-note,.rate-card small,.search-result small,.compare-card span,.compare-card small,
  .health-pill,.live-pill,.source-label,.updated-at,.day-switch button,.operation-watch-subtitle,.count-pill,
  .watch-item p,.arrival-main span,.watch-detail-link,.flight-time small,.route small,.market-label,.metric-grid small,
  .go-badge,.go-more-card span,.go-more-card small,.go-more-head p,.go-more-headbar small{font-size:11px!important}
}

/* OPENPQ RELEASE TYPOGRAPHY FOLLOW-UP - 29/09/2026 - interactive/semantic labels still below 11px in QA. */
@media(max-width:720px){
  .app .eyebrow,.app .section-kicker,.board-day-switch button,.fids-head p,.fids-head-state,
  .fids-tape,.fids-foot,.fids-direction-tabs button,.segmented button,.chips button,.ops-state,
  .currency-shell .mini-note,.currency-shell .pin-current,.currency-shell .board-explainer,
  .currency-shell .fine-print,.currency-shell .rate-metrics span,.currency-shell .chart-label,
  .currency-shell .comparison-cell small,.currency-shell .range-tabs button,.currency-shell .currency-tabs button,
  .go-hero-photo figcaption span,.go-builder-head p{font-size:11px!important}
}