:root{--ink:#123D3B;--ink2:#1F6762;--coral:#FF704F;--aqua:#54D4CB;--sun:#FFD35C;--line:#E4ECEA;--muted:#6F807D;--soft:#F5FAF9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#173432;background:#fff;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}.guide-head{height:66px;padding:7px clamp(12px,4vw,44px);display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(16px)}.guide-head img{width:54px;height:54px;object-fit:contain}.guide-head .vn-clock{margin-left:auto}.guide-head>a:last-child{font-size:10px;font-weight:850}.guide-menu{position:sticky;top:66px;z-index:29;display:flex;gap:7px;padding:8px max(12px,calc((100vw - 1180px)/2));overflow:auto;scrollbar-width:none;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}.guide-menu a{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;white-space:nowrap;font-size:9px;font-weight:850}.guide-hero{min-height:265px;padding:42px clamp(18px,6vw,90px);display:flex;align-items:end;background:linear-gradient(110deg,rgba(8,55,52,.94),rgba(8,55,52,.35)),url("https://commons.wikimedia.org/wiki/Special:Redirect/file/Kem%20Beach%20aerial%20view%20Phu%20Quoc%20Island%20Vietnam.jpg?width=1800") center/cover;color:#fff}.guide-hero>div{max-width:850px}.guide-hero p,.g-head p,.smart-intro>p,.quick-head p{margin:0 0 8px;font-size:9px;letter-spacing:.16em;font-weight:900}.guide-hero h1{margin:0;font-size:clamp(44px,5vw,65px);line-height:.91;letter-spacing:-.055em}.guide-hero span{display:block;margin-top:13px;font-size:12px;color:rgba(255,255,255,.82)}.guide-shell{max-width:1180px;margin:auto;padding:22px 14px 80px}.smart-start,.guide-quick,.plain-section{padding:28px 0;border-bottom:1px solid var(--line);scroll-margin-top:120px}.smart-intro,.quick-head,.g-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.smart-intro>div{display:none}.smart-intro h2,.quick-head h2,.g-head h2{margin:0;color:var(--ink);font-size:31px;line-height:1.05;letter-spacing:-.04em}.smart-intro>span,.quick-head>span,.g-head>span{max-width:360px;text-align:right;color:var(--muted);font-size:10px;line-height:1.45}.intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.intent-grid button{min-height:116px;padding:13px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left;cursor:pointer}.intent-grid button.active{border-color:#A6D8D2;background:#EFFAF8;box-shadow:inset 0 0 0 1px #A6D8D2}.intent-grid span,.intent-grid strong,.intent-grid small{display:block}.intent-grid span{font-size:9px;color:var(--coral);font-weight:900}.intent-grid strong{margin-top:6px;font-size:14px;color:var(--ink)}.intent-grid small{margin-top:5px;font-size:10px;color:var(--muted)}.smart-answer{margin-top:10px;padding:20px;border-radius:18px;background:linear-gradient(120deg,#123D3B,#1F6762);color:#fff}.smart-answer span{font-size:8px;letter-spacing:.16em;font-weight:900;color:#A7EDE6}.smart-answer h3{margin:7px 0 11px;font-size:23px;letter-spacing:-.03em}.smart-answer ol{margin:0;padding-left:21px}.smart-answer li{padding:3px 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.82)}.answer-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.answer-links a{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:9px;font-weight:850}.guide-search{display:flex;align-items:center;gap:9px;min-height:52px;padding:5px 5px 5px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 8px 26px rgba(18,61,59,.05)}.guide-search>span{font-size:20px;color:var(--ink2)}.guide-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px}.guide-search button{height:42px;min-width:76px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:850}.knowledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.knowledge-grid button{min-height:90px;padding:11px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;cursor:pointer}.knowledge-grid span,.knowledge-grid strong,.knowledge-grid small{display:block}.knowledge-grid span{font-size:8px;color:var(--coral);font-weight:900}.knowledge-grid strong{margin-top:4px;color:var(--ink);font-size:12px}.knowledge-grid small{margin-top:4px;color:var(--muted);font-size:9px}.guide-search-results{margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:16px;background:#FAFCFB}.search-results-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}.search-results-head span,.search-results-head strong{display:block}.search-results-head span{font-size:8px;letter-spacing:.12em;font-weight:900;color:var(--ink2)}.search-results-head strong{font-size:16px}.search-results-head>b{font-size:9px;color:var(--muted)}.handbook-result{border-top:1px solid var(--line)}.handbook-result>summary{cursor:pointer;padding:11px 2px;list-style:none}.handbook-result>summary strong,.handbook-result>summary span{display:block}.handbook-result>summary strong{font-size:12px;color:var(--ink)}.handbook-result>summary span{margin-top:4px;color:#526A65;font-size:11px;line-height:1.5}.handbook-result>div{padding:0 2px 13px;color:#425A56;font-size:12px;line-height:1.65}.zone-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.zone-card{position:relative;min-height:320px;overflow:hidden;border-radius:19px;color:#fff}.zone-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.zone-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(3,31,29,.85))}.zone-card div{position:absolute;z-index:2;left:15px;right:15px;bottom:14px}.zone-card span{font-size:7px;letter-spacing:.14em;font-weight:900}.zone-card h3{margin:5px 0;font-size:23px}.zone-card p,.zone-card small{display:block;margin:0;color:rgba(255,255,255,.8);font-size:10px;line-height:1.45}.plain-link{display:inline-flex;margin-top:12px;padding:9px 11px;border:1px solid var(--line);border-radius:999px;font-size:9px;font-weight:850}.stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stay-card{padding:15px;border:1px solid var(--line);border-radius:16px;background:#fff}.stay-card>span{font-size:8px;color:var(--coral);font-weight:850}.stay-card h3{margin:5px 0 8px;color:var(--ink);font-size:18px}.stay-card p{margin:5px 0;color:#4D6762;font-size:10px;line-height:1.45}.stay-card small{display:block;margin-top:8px;color:var(--muted);font-size:9px}.plain-details{margin-top:10px;border:1px solid var(--line);border-radius:15px;background:#FAFCFB}.plain-details summary{cursor:pointer;padding:13px;font-size:11px;font-weight:850;color:var(--ink)}.meal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 13px 13px}.meal-grid div{padding:10px;border-radius:12px;background:#fff;border:1px solid var(--line)}.meal-grid strong,.meal-grid span{display:block}.meal-grid strong{font-size:10px;color:var(--ink)}.meal-grid span{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}.day-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.day-grid button{padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff;text-align:left;cursor:pointer}.day-grid button.active{background:#EFFAF8;border-color:#A6D8D2}.day-grid span,.day-grid strong,.day-grid small{display:block}.day-grid span{font-size:8px;color:var(--coral);font-weight:900}.day-grid strong{margin-top:6px;color:var(--ink);font-size:12px;line-height:1.35}.day-grid small{margin-top:6px;color:var(--muted);font-size:9px}.route-ideas{margin-top:9px}.route-answer{padding:16px;border-radius:15px;background:#F5FAF9}.route-answer span,.route-answer strong{display:block}.route-answer span{font-size:8px;letter-spacing:.12em;font-weight:900;color:var(--ink2)}.route-answer strong{margin-top:5px;font-size:16px;color:var(--ink)}.route-answer p{font-size:10px;color:var(--muted)}.route-template{margin-top:10px}.route-template>b{font-size:11px}.route-template ol{margin:7px 0 0;padding-left:20px}.route-template li{font-size:10px;line-height:1.5}.live-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.live-links a{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:15px;background:#fff}.live-links a>span{font-size:20px}.live-links strong,.live-links small{display:block}.live-links strong{font-size:12px;color:var(--ink)}.live-links small{margin-top:3px;font-size:8px;color:var(--muted)}footer{padding:24px 16px 80px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}footer>div{max-width:1180px;margin:auto}@media(max-width:900px){.intent-grid{grid-template-columns:repeat(2,1fr)}.knowledge-grid{grid-template-columns:repeat(2,1fr)}.stay-grid{grid-template-columns:repeat(2,1fr)}.day-grid{grid-template-columns:repeat(2,1fr)}.live-links{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.guide-head{height:62px;padding:7px 10px}.guide-head img{width:48px;height:48px}.guide-menu{top:62px;padding:7px 9px}.guide-hero{min-height:240px;padding:34px 13px}.guide-hero h1{font-size:43px}.guide-shell{padding:12px 10px 60px}.smart-start,.guide-quick,.plain-section{padding:23px 0;scroll-margin-top:108px}.smart-intro,.quick-head,.g-head{display:block}.smart-intro h2,.quick-head h2,.g-head h2{font-size:27px}.smart-intro>span,.quick-head>span,.g-head>span{display:block;margin-top:5px;text-align:left}.intent-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -10px;padding:0 10px 4px}.intent-grid button{flex:0 0 72%;scroll-snap-align:center}.guide-search input{font-size:16px}.knowledge-grid{display:flex;overflow-x:auto;margin:10px -10px 0;padding:0 10px 4px}.knowledge-grid button{flex:0 0 72%}.zone-rail{display:flex;overflow-x:auto;margin:0 -10px;padding:0 10px;scroll-snap-type:x mandatory}.zone-card{flex:0 0 82%;min-height:360px;scroll-snap-align:center}.stay-grid{grid-template-columns:1fr}.meal-grid{grid-template-columns:1fr}.day-grid{display:flex;overflow-x:auto;margin:0 -10px;padding:0 10px 4px}.day-grid button{flex:0 0 76%}.live-links{grid-template-columns:1fr}.search-results-head{display:block}.search-results-head>b{display:block;margin-top:4px}}
.zone-map-wrap{
  display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:10px;align-items:stretch
}
.guide-island-map{
  margin:0;overflow:hidden;border:1px solid var(--line);border-radius:19px;background:#fff
}
.guide-island-map > img{
  display:block;width:100%;height:310px;object-fit:contain;padding:14px;background:#F7FBF9
}
.guide-island-map figcaption{
  padding:12px 14px;display:flex;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:12px;line-height:1.5
}
.guide-island-map figcaption span{flex:1}
.guide-island-map figcaption a{flex:none;color:var(--ink2);font-weight:850;white-space:nowrap}
.zone-map-wrap .zone-rail{height:100%}
@media(max-width:900px){
  .zone-map-wrap{grid-template-columns:1fr}
  .guide-island-map > img{height:280px}
}
@media(max-width:700px){
  .guide-island-map > img{height:260px}
  .guide-island-map figcaption{display:block;font-size:12px}
  .guide-island-map figcaption a{display:inline-block;margin-top:7px}
}


/* Interactive three-zone map - 21/09/2026 */
#guideZoneMap{
  width:100%;
  height:310px;
  min-height:310px;
  background:#eaf2ef;
}
.guide-map-card{position:relative}
.guide-zone-label{
  background:transparent!important;
  border:0!important;
}
.guide-zone-label span{
  display:inline-flex;
  min-height:30px;
  padding:6px 10px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(18,61,59,.14);
  border-radius:999px;
  background:rgba(255,255,255,.95);
  box-shadow:0 5px 16px rgba(18,61,59,.10);
  color:var(--ink);
  font-size:11px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}
.guide-map-unavailable{
  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:22px;
  color:var(--muted);
  text-align:center;
}
.guide-map-unavailable strong{color:var(--ink);font-size:15px}
.guide-map-unavailable span{font-size:12px;line-height:1.45}
.zone-card[data-map-active="true"]{
  outline:3px solid rgba(84,212,203,.55);
  outline-offset:-3px;
}
@media(max-width:900px){
  #guideZoneMap{height:300px;min-height:300px}
}
@media(max-width:700px){
  #guideZoneMap{height:300px;min-height:300px}
  .smart-start,.guide-quick,.plain-section{scroll-margin-top:128px}
}


/* Reliable guide map embed - 21/09/2026 */
.guide-map-embed-wrap{
  width:100%;
  height:310px;
  overflow:hidden;
  background:#eaf2ef;
}
.guide-map-embed{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.guide-map-zones{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding:9px 10px 0;
}
.guide-map-zones a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:11px;
  font-weight:850;
  text-align:center;
}
@media(max-width:700px){
  .guide-map-embed-wrap{height:320px}
  .guide-map-zones{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .guide-map-zones a{flex:0 0 auto;padding:8px 12px}
}


/* 21/09 guide clarity pass */
.guide-map-embed-wrap{position:relative}
.guide-map-layer{position:absolute;inset:0;pointer-events:none}
.guide-map-layer>span{
  position:absolute;display:flex;flex-direction:column;gap:2px;max-width:185px;
  padding:7px 9px;border:1px solid rgba(18,61,59,.18);border-radius:11px;
  background:rgba(255,255,255,.92);box-shadow:0 5px 18px rgba(18,61,59,.12);
  color:#123d3b;line-height:1.15
}
.guide-map-layer b{font-size:11px}
.guide-map-layer small{font-size:9px;color:#566f6b}
.guide-map-layer .north{top:12%;left:51%}
.guide-map-layer .center{top:48%;left:24%}
.guide-map-layer .south{bottom:8%;left:53%}
.guide-hotel-groups{
  margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px
}
.guide-hotel-head{
  grid-column:1/-1;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:#f7faf9
}
.guide-hotel-head span{display:block;font-size:10px;font-weight:900;letter-spacing:.11em;color:#46726c;text-transform:uppercase}
.guide-hotel-head strong{display:block;margin-top:6px;font-size:18px;color:var(--ink)}
.guide-hotel-head small{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:var(--muted)}
.guide-hotel-group{padding:15px;border:1px solid var(--line);border-radius:16px;background:#fff}
.guide-hotel-group>span{font-size:10px;font-weight:900;letter-spacing:.08em;color:#b45b49;text-transform:uppercase}
.guide-hotel-group>strong{display:block;margin-top:7px;font-size:14px;line-height:1.45;color:var(--ink)}
.guide-hotel-group p{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.g-head>div>p,.quick-head p,.smart-intro>p{ text-transform:uppercase }
@media(max-width:760px){
  .guide-map-layer>span{max-width:135px;padding:6px 7px}
  .guide-map-layer b{font-size:10px}
  .guide-map-layer small{font-size:8px}
  .guide-map-layer .north{left:48%}
  .guide-map-layer .center{left:9%}
  .guide-map-layer .south{left:45%}
  .guide-hotel-groups{grid-template-columns:1fr}
}

.zone-card>div>span,.g-head>div>p,.quick-head p,.smart-intro>p{ text-transform:uppercase }
.stay-card>span,.stay-card p,.stay-card small{ text-transform:none }