/* 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;
  }
}