/* Pill bar đồng bộ với web chính goicamaicohang.com — port từ assets/css/home/_base.css
   của theme (token hardcode vì trang cẩm nang không nạp CSS theme chính). */
.cn-pillwrap{left:0;position:fixed;right:0;top:0;transform:translateZ(0);z-index:1000}
.gcm-pillbar{background:transparent;display:flex;justify-content:center;padding:14px 20px 0;pointer-events:none;position:relative}
.gcm-pillbar .gcm-pill{align-items:center;background:rgba(250,249,246,.97);border:1px solid rgba(13,95,64,.1);border-radius:999px;box-shadow:0 10px 32px rgba(40,70,50,.12),0 2px 8px rgba(40,70,50,.06);display:flex;flex-wrap:nowrap;gap:2px;padding:6px 8px;pointer-events:auto}
@media (hover:hover) and (pointer:fine){.gcm-pillbar .gcm-pill{-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);background:rgba(250,249,246,.82)}}
.gcm-pill__logo{display:block;margin:0 6px 0 4px}
.gcm-pill__logo img{display:block;height:34px;object-fit:contain;width:30px}
.gcm-pill__nav{align-items:center;display:flex;flex-wrap:nowrap;gap:2px}
.gcm-pill__link{border-radius:999px;color:#0b4a34;display:block;font-family:"Be Vietnam Pro",Montserrat,Arial,sans-serif;font-size:15px;font-weight:600;line-height:1;padding:12px 20px;text-decoration:none!important;transition:background .22s cubic-bezier(.25,.46,.45,.94),color .22s cubic-bezier(.25,.46,.45,.94);white-space:nowrap}
.gcm-pill__link:hover,.gcm-pill__link:focus-visible{background:rgba(13,95,64,.07)}
.gcm-pill__link.is-active{background:rgba(13,95,64,.1);color:#0b5d3f}
.gcm-pill__link--order{background:#b64a34;color:#fffdf3}
.gcm-pill__link--order:hover,.gcm-pill__link--order:focus-visible{background:#d84f35;color:#fffdf3}
@media (max-width:599px){.gcm-pillbar{padding:10px 12px 0}.gcm-pillbar .gcm-pill{padding:5px 6px}.gcm-pill__logo img{height:28px;width:25px}.gcm-pill__link{font-size:13.5px;padding:10px 13px}}
@media (max-width:430px){.gcm-pill__link{font-size:12px;padding:9px 9px}.gcm-pill__logo{margin:0 2px}}

/* 6 mục cẩm nang không vừa màn hẹp — cho phần nav trong pill trượt ngang,
   giấu scrollbar, mép phải mờ dần để gợi ý còn mục phía sau. */
@media (max-width:599px){
	.gcm-pillbar .gcm-pill{max-width:calc(100vw - 24px)}
	.gcm-pill__nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
	.gcm-pill__nav::-webkit-scrollbar{display:none}
}

/* Header sticky cũ (chiếm ~64px layout) đã thay bằng pill fixed — bù khoảng trống
   cho các hero có chữ sát mép trên, kẻo pill đè lên nội dung. */
.iti-hero{padding-top:130px}
.dish-hero{padding-top:clamp(104px,12vw,140px)}

/* ---- Trang chủ: hero — mobile xếp chồng (chữ trên, map dưới); desktop CHIA 2 CỘT:
   chữ + thanh tìm bên trái, map cao full bên phải (không còn mảng trắng chết) ---- */
.vista--stack{height:auto;min-height:0;overflow:visible;background:var(--c-cream, #faf9f6)}
.vista--stack .vista__intro{padding:clamp(96px,13vh,132px) 0 24px}
.vista--stack .vista__panel{max-width:720px;pointer-events:auto}
.vista--stack .vista__map{position:relative;height:min(64vh,580px);min-height:400px;overflow:hidden}
.vista--stack .vista__map #ml-map{position:absolute;inset:0;height:100%}
@media (min-width:1000px){
	/* desktop: chữ + search CĂN GIỮA; map NẰM NGANG trong KHUNG BO TRÒN
	   (không tràn mép màn hình) */
	.vista--stack .vista__intro{padding:clamp(104px,14vh,140px) 0 30px;text-align:center}
	.vista--stack .vista__panel{max-width:780px;margin:0 auto}
	.vista--stack .vista__panel .finder{margin:0 auto}
	.vista--stack .vista__map{
		height:min(58vh,560px);
		width:min(1180px,calc(100% - clamp(32px,6vw,96px)));
		margin:0 auto 46px;
		border-radius:28px;
		box-shadow:0 26px 60px -30px rgba(11,74,52,.5);
	}
}
@media (max-width:720px){
	/* mobile: chữ + thanh tìm CĂN GIỮA, map BO TRÒN và cao hơn */
	.vista--stack .vista__intro{padding:96px 0 20px;text-align:center}
	.vista--stack .vista__panel{margin:0 auto}
	.vista--stack .vista__panel .finder{margin:0 auto}
	.vista--stack .vista__map{
		height:min(74vh,640px);
		min-height:460px;
		width:calc(100% - 24px);
		margin:0 auto 30px;
		border-radius:22px;
		box-shadow:0 18px 42px -24px rgba(11,74,52,.5);
	}
	.vista--stack .vista__hint{display:block;bottom:12px;font-size:11px}
}

/* Nút phóng to trên iPhone dùng bản dự phòng CSS (không có Fullscreen API).
   Selector phải MẠNH HƠN rule đặt map trong khung bo tròn, nếu không bấm nút
   xong map vẫn nằm nguyên trong khung — đúng lỗi "fullscreen không hoạt động". */
.vista--stack .vista__map #ml-map.is-fs{position:fixed;inset:0;width:100%;height:100%;border-radius:0;z-index:9999}
body.map-is-fs .vista--stack .vista__map{overflow:visible;border-radius:0;box-shadow:none}

/* ---- Gợi ý vuốt ngang dưới các dải card ---- */
.rail-hint{display:flex;align-items:center;gap:9px;margin-top:12px;font:600 12.5px/1 "Be Vietnam Pro",Montserrat,Arial,sans-serif;color:rgba(11,74,52,.55)}
.rail-hint svg{width:30px;height:12px;overflow:visible;flex:0 0 auto}
.rail-hint svg path{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rail-hint svg{animation:cn-rail-nudge 1.8s ease-in-out infinite}
@keyframes cn-rail-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@media (prefers-reduced-motion: reduce){.rail-hint svg{animation:none}}

/* ---- Card cover mục checkin: CỤM 4 HÌNH (1 lớn + 3 phụ) ---- */
.pcard--multi .pcard__collage{position:absolute;inset:0;display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:3px;background:#fff}
.pcard--multi .pcard__collage img{width:100%;height:100%;object-fit:cover;display:block}
.pcard--multi .pcard__collage img:first-child{grid-row:1/4}

/* ---- Mobile: GIỮ mosaic 2 tầng nhưng cột hẹp lại — thấy ~3 cột địa điểm;
   card cover (lg) đổi thành CHỮ NHẬT DỌC 1 cột × 2 tầng thay vì vuông 2 cột ---- */
@media (max-width:720px){
	/* 3 cỡ card trộn nhau: dọc (cover, 1 cột × 2 tầng ~1:1.9) — vuông (1×1) —
	   NGANG (2 cột × 1 tầng); dense để lấp kín không hở ô */
	.card-rail{grid-template-rows:repeat(2,132px);grid-auto-columns:calc((100% - 14px)/2.4);gap:9px;grid-auto-flow:column dense}
	.card-rail .pcard{border-radius:16px}
	.card-rail .pcard--lg{grid-column:span 1;grid-row:span 2}
	.card-rail .pcard--t{grid-row:span 1;grid-column:span 2}
	.pcard__body{padding:9px 10px 10px}
	.pcard__body h3{font-size:12.5px;line-height:1.22;margin:0 0 4px}
	.pcard--lg .pcard__body h3{font-size:13.5px}
	.pcard__meta{gap:4px;flex-wrap:wrap;font-size:9.5px}
	.pcard__meta span{padding:3px 6px}
	.pcard__tag1{display:none}
	.pcard__arrow{display:none}
	.pcard__badge{font-size:8.5px;padding:4px 7px;top:8px;left:8px}
	/* card cover mobile hẹp — cụm hình rút còn 1 hình lớn + 2 hình nhỏ xếp dọc dưới */
	.pcard--multi .pcard__collage{grid-template-columns:1fr 1fr;grid-template-rows:1.8fr 1fr;gap:2px}
	.pcard--multi .pcard__collage img:first-child{grid-row:1/2;grid-column:1/3}
	.pcard--multi .pcard__collage img:nth-child(4){display:none}
}


/* ================= GHIM BẢN ĐỒ — MÀU NHẤN =================
   Trên bảng màu Apple Maps (đất be, nước cyan, đường trắng) thì đỏ coral không
   còn hợp: nó chọi với nền ấm và tranh chấp với mặt nước. Nay dùng XANH TEAL
   ĐẬM — cùng họ với mặt nước nhưng tối hơn hẳn nên ghim vẫn tách khỏi biển,
   lại ăn với nền be. Nhãn quán nhà giữ vàng gold để vẫn là ngoại lệ duy nhất.
   Màu lấy từ biến --gcm-nhan, người xem đổi được ngay trong bảng dưới bản đồ;
   không đặt biến thì rơi về mặc định. Ghi đè ở pill.css (chỉ dùng cho bản WP)
   để không đụng style.css gốc — muốn quay lại xanh lá thì xoá khối này. */
#ml-map { --gcm-nhan: #0f5e7c; --gcm-nhan-dam: #0a4c66; }

/* ghim của chính địa danh đang xem */
#ml-map .ml-marker__label {
	background: linear-gradient(135deg, var(--gcm-nhan), var(--gcm-nhan-dam));
	box-shadow: 0 6px 20px rgba(15, 94, 124, .38);
}
#ml-map .ml-marker__tail { border-top-color: var(--gcm-nhan-dam); }

/* ghim các địa danh khác */
#ml-map .ml-marker--near .ml-marker__label {
	background: var(--gcm-nhan);
	box-shadow: 0 4px 14px rgba(15, 94, 124, .34);
}
#ml-map .ml-marker--near .ml-marker__tail { border-top-color: var(--gcm-nhan); }
#ml-map .ml-marker--near:hover .ml-marker__label { background: var(--gcm-nhan-dam); }
#ml-map .ml-marker__dist { color: rgba(255, 255, 255, .8); }
#ml-map .ml-marker--near.is-zoomed-out::after {
	background: var(--gcm-nhan); border-color: #fff;
}

/* quán nhà giữ nhãn vàng để vẫn tách khỏi phần còn lại */
#ml-map .ml-marker--home .ml-marker__label {
	background: var(--c-gold); box-shadow: 0 4px 16px rgba(233, 185, 73, .5);
}
#ml-map .ml-marker--home .ml-marker__tail { border-top-color: var(--c-gold); }
#ml-map .ml-marker--home.is-zoomed-out::after { background: var(--c-gold); }