/* Travelguidestip 1+8 theme. Ported from the approved mockup (ban-mau/src/kieu-site.css). Shared components. */
/* ═══ SITE travelguidestip (mẫu 1+8) — File 2/2: thành phần dùng chung ═══ */
.tg{--gut:40px;font:16.5px/1.6 var(--f-than);color:var(--chu2);background:var(--nen)}
.tg a{color:inherit;text-decoration:none}
.tg h1,.tg h2,.tg h3,.tg h4{color:var(--muc);font-family:var(--f-tieu);letter-spacing:-.01em}
.tg p{margin:0 0 12px}
.vung{max-width:calc(1180px + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.giu,.gia{display:inline-block;background:var(--giu);color:var(--giu-chu);border:1px dashed var(--giu-vien);border-radius:4px;padding:0 5px;font:600 12.5px/1.6 var(--f-than);white-space:nowrap}
.ph-anh{display:grid;place-items:center;text-align:center;padding:10px;background:repeating-linear-gradient(45deg,var(--nen2) 0 10px,var(--vien) 10px 20px);color:var(--mo);font:600 13px var(--f-than)}
.ten{color:var(--x-chu)!important;font-weight:700;text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:3px}
.ten:hover{color:var(--x-dam)!important}
.lk{color:var(--x-chu)!important;text-decoration:underline!important;text-underline-offset:2px}

/* Nút: vàng = 1 hành động chính / màn; viền xanh = khách sạn phụ; xanh lá = tour */
.nut-vang,.nut-vien,.nut-la,.nut-xanh,.nut-la-dac{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:10px;font:700 15px var(--f-than);white-space:nowrap;cursor:pointer;transition:background .15s,transform .15s}
.nut-vang{background:var(--vang);color:var(--vang-chu)!important;box-shadow:0 2px 0 var(--vang-dam)}
.nut-vang:hover{background:#FFBA1A}
.nut-vang:active{transform:translateY(1px)}
.nut-vien{border:1.5px solid var(--x);color:var(--x-chu)!important;background:var(--nen);min-height:40px;padding:0 13px;font-size:14px}
.nut-vien:hover{background:var(--x-nhat)}
.nut-la{border:1.5px solid var(--la);color:var(--la-chu)!important;background:var(--nen);min-height:40px;padding:0 13px;font-size:14px}
.nut-la:hover{background:var(--la-nhat)}
.nut-xanh{background:var(--x);color:#fff!important}
.nut-la-dac{background:var(--la);color:#fff!important}
.nut-hang{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}

/* Đầu trang: menu theo điểm đến */
.dau{border-bottom:1px solid var(--vien);background:var(--nen)}
.dau__in{display:flex;align-items:center;gap:22px;height:66px}
.logo{display:inline-flex;align-items:center;gap:9px;font:800 21px var(--f-tieu);letter-spacing:-.02em;color:var(--muc)!important;white-space:nowrap}
.logo__dau{width:28px;height:28px;border-radius:8px;background:var(--x);position:relative;flex:none}
.logo__dau::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:5px;border-radius:3px;background:var(--vang)}
.logo__dau::before{content:"";position:absolute;left:8px;top:6px;width:12px;height:9px;border-radius:6px 6px 0 0;border:2.5px solid #fff;border-bottom:0}
.dau__nav{display:flex;gap:18px;font:600 15px var(--f-than);color:var(--muc)}
.dau__nav a{padding:10px 0;border-bottom:2px solid transparent}
.dau__nav a:hover,.dau__nav a[aria-current]{border-color:var(--vang)}
.tim{margin-left:auto;position:relative}
.tim input{width:250px;height:40px;border:1px solid var(--vien2);border-radius:999px;padding:0 14px 0 36px;font:15px var(--f-than);background:var(--nen2);color:var(--muc)}
.tim::before{content:"";position:absolute;left:13px;top:12px;width:11px;height:11px;border:2px solid var(--mo);border-radius:50%}
.dau__menu{display:none;width:44px;height:44px;border:1px solid var(--vien2);border-radius:10px;background:none;font-size:18px;cursor:pointer;color:var(--muc);margin-left:auto}
.dau__chip{display:none}

/* Khối đầu bài */
.bc{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13.5px;color:var(--mo);margin:20px 0 6px}
.bc a{text-decoration:underline;text-underline-offset:2px}
.tg h1{font:800 42px/1.08 var(--f-tieu);letter-spacing:-.025em;margin:6px 0 12px}
.by{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:14px;color:var(--mo);margin:0 0 6px}
.by b{color:var(--muc);font-weight:700}
.by .lk{font-weight:600}
.disc{font-size:13px;color:var(--mo);margin:0 0 14px!important}
.hero{margin:6px 0 16px;border-radius:14px;overflow:hidden;background:var(--vien);aspect-ratio:16/8}
.hero img{width:100%;height:100%;object-fit:cover}
.anh-chu{font-size:12px;color:var(--mo);margin:-10px 0 14px}

/* #1 Hộp "Our top choice" */
.tc{border:2px solid var(--x);border-radius:16px;padding:20px 22px 20px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;background:var(--nen);margin:34px 0 22px}
.tc__nhan{grid-column:1/-1;margin:-34px 0 0!important;justify-self:start;background:var(--x);color:#fff;font:800 12px var(--f-tieu);letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.tc__anh{border-radius:12px;overflow:hidden;background:var(--vien);aspect-ratio:4/3}
.tc__anh img{width:100%;height:100%;object-fit:cover}
.tc h2{font:800 25px/1.15 var(--f-tieu);margin:0 0 8px}
.tc p{font-size:16px;margin:0 0 8px}
.tc .nut-hang{margin-top:12px}
.tc--la{border-color:var(--la)}
.tc--la .tc__nhan{background:var(--la)}

/* Lưới bài: cột chính + cột phải */
.ct{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:44px;padding-bottom:40px}
.ct>.chinh{min-width:0}
.ray{padding-top:20px}
.ray__dinh{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.hop{border:1px solid var(--vien);border-radius:14px;padding:16px;background:var(--nen)}
.hop h4{font:800 16px var(--f-tieu);margin:0 0 10px}
.hop .nho{font-size:12.5px;color:var(--mo);margin:8px 0 0;line-height:1.45}
.ds-gon{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ds-gon li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--vien)}
.ds-gon li:first-child{border-top:0;padding-top:0}
.ds-gon small{grid-column:1;display:block;font-size:13px;color:var(--mo);line-height:1.35}
.ds-gon .nut-vien{grid-row:1/span 2;grid-column:2;min-height:38px;font-size:13.5px;padding:0 11px}
.cum{display:flex;flex-direction:column}
.cum a{padding:8px 0;border-top:1px solid var(--vien);font-weight:600;color:var(--muc);font-size:15px}
.cum a:first-child{border-top:0;padding-top:0}
.cum a:hover{color:var(--x-chu)}
.cum a small{display:block;font-weight:400;color:var(--mo);font-size:12.5px}

.jt{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:4px 0 18px;padding:2px}
.jt::-webkit-scrollbar{display:none}
.jt a{flex:none;border:1px solid var(--vien2);border-radius:999px;padding:7px 13px;font:600 14px var(--f-than);color:var(--muc);white-space:nowrap}
.jt a:hover{border-color:var(--x);color:var(--x-chu)}

.muc{margin:30px 0 12px;scroll-margin-top:70px}
.tg h2.muc,.chinh>h2{font:800 30px/1.15 var(--f-tieu);margin:34px 0 10px;scroll-margin-top:70px}
.tg h3{font:800 20px/1.25 var(--f-tieu);margin:0 0 6px}
.dan{font-size:17px;color:var(--chu2)}
.nho-mo{font-size:13.5px;color:var(--mo)}

/* #8 Thẻ khu: STAY + DO */
.khu-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 10px}
.khu{border:1px solid var(--vien);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:var(--nen)}
.khu__anh{aspect-ratio:16/10;background:var(--vien)}
.khu__anh img{width:100%;height:100%;object-fit:cover}
.khu__nd{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.khu__nhom{font:700 12px var(--f-than);letter-spacing:.08em;text-transform:uppercase;color:var(--x-chu);margin:0 0 2px!important}
.khu h3{font-size:21px;margin-bottom:4px}
.khu__mo{font-size:14.5px;line-height:1.5;margin:0 0 12px!important}
.cap{margin:auto 0 0;display:flex;flex-direction:column;gap:8px}
.cap>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start;padding:9px 10px;border-radius:10px;background:var(--x-nhat)}
.cap>div.do{background:var(--la-nhat)}
.cap dt{font:800 11px var(--f-tieu);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--x);border-radius:5px;text-align:center;padding:3px 0;margin-top:2px}
.cap .do dt{background:var(--la)}
.cap dd{margin:0;font-size:14.5px;line-height:1.4;min-width:0}
.cap dd .ten{display:inline}
.cap .do .ten{color:var(--la-chu)!important}
.cap dd .tu-bai{color:var(--mo);font-size:13.5px}

/* Danh sách khách sạn theo hạng */
.ks-ds{list-style:none;margin:10px 0 18px;padding:0;border:1px solid var(--vien);border-radius:14px;overflow:hidden}
.ks-ds li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 16px;border-top:1px solid var(--vien)}
.ks-ds li:first-child{border-top:0}
.ks-ds .hang{font:800 12px var(--f-tieu);letter-spacing:.06em;text-transform:uppercase;color:var(--mo)}
.ks-ds .hang small{display:block;font:500 12.5px var(--f-than);letter-spacing:0;text-transform:none}
.ks-ds p{margin:2px 0 0!important;font-size:14.5px;line-height:1.45}
.ks-ds .nut-hang{flex-direction:column;align-items:flex-end;gap:4px}

/* Tab theo nhóm H2 */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--vien);margin:8px 0 16px;position:sticky;top:0;background:var(--nen);z-index:5;padding-top:6px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;background:none;padding:10px 14px;font:700 15px var(--f-than);color:var(--mo);border-bottom:3px solid transparent;cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{color:var(--muc);border-color:var(--la)}
.tabs button small{font-weight:500;color:var(--mo);margin-left:4px}
.pane[hidden]{display:none}
.pane>h3.pane__ten{font-size:22px;margin:4px 0 10px}
.js .pane>h3.pane__ten{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Thẻ tour */
.tour-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:12px}
.tour{border:1px solid var(--vien);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:var(--nen)}
.tour__anh{aspect-ratio:16/8;background:var(--vien)}
.tour__anh img{width:100%;height:100%;object-fit:cover}
.tour__nd{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.tour__so{font:700 12px var(--f-than);color:var(--la-chu);letter-spacing:.06em;text-transform:uppercase;margin:0 0 2px!important}
.tour ul{list-style:none;margin:4px 0 10px;padding:0;font-size:14.5px;line-height:1.45}
.tour ul li{padding:3px 0 3px 22px;position:relative}
.tour ul li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:2px;background:var(--la)}
.tour ul li b{color:var(--muc)}
.tour .nut-hang{margin-top:auto}
.tour--gon .tour__anh{display:none}

/* Bảng */
.bang-cuon{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--vien);border-radius:12px}
.bang{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
.bang th,.bang td{padding:10px 12px;text-align:left;border-top:1px solid var(--vien);vertical-align:top}
.bang thead th{border-top:0;background:var(--nen2);font:700 13px var(--f-than);color:var(--muc);letter-spacing:.02em}
.bang td:first-child{font-weight:700;color:var(--muc)}
.bang tr.chon td{background:var(--vang-nhat)}

/* Hỏi đáp */
.faq details{border-top:1px solid var(--vien);padding:12px 0}
.faq summary{cursor:pointer;font:700 17px var(--f-tieu);color:var(--muc);list-style:none;display:flex;justify-content:space-between;gap:10px;min-height:28px}
.faq summary::after{content:"+";font:400 22px/1 var(--f-than);color:var(--mo)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:8px 0 0}

/* Hộp gợi ý / ghi chú trong bài (thay hộp "Insider tip…") */
.goi{border-left:4px solid var(--x);background:var(--nen3);border-radius:0 12px 12px 0;padding:12px 16px;margin:14px 0}
.goi b{color:var(--muc)}

/* Thanh dính đáy (chỉ điện thoại) */
.thanh{display:none}

/* Chân trang */
.chan{background:var(--nen2);border-top:1px solid var(--vien);margin-top:24px}
.chan__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:24px}
.chan .logo{display:inline-flex}
.chan b{display:block;color:var(--muc);font:800 15px var(--f-tieu);margin-bottom:6px}
.chan a{display:block;font-size:14.5px;padding:3px 0;color:var(--chu2)}
.chan__cuoi{grid-column:1/-1;border-top:1px solid var(--vien);padding-top:14px;font-size:13px;color:var(--mo);margin:0}
.chan__cuoi a{display:inline;text-decoration:underline}