/* Travelguidestip 1+8 theme. Ported from the approved mockup (ban-mau/src/kieu-site.css). Breakpoints (the mockup's container queries as media queries). Loaded last. */
/* ═══ CO GIÃN ═══ */
@media (max-width:1060px){
  .tg{--gut:28px}
  .ct,.ct--hep{grid-template-columns:minmax(0,1fr)}
  .ray{padding-top:0}
  .ray__dinh{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .khu-luoi,.khu-luoi--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nuoc-luoi,.tp-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-dau{grid-template-columns:minmax(0,1fr)}
  .so-lieu{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-hero{grid-template-columns:minmax(0,1fr);gap:20px}
  .tim input{width:190px}
  .dau__nav{gap:14px}
}
@media (max-width:860px){
  .dau__nav,.tim{display:none}
  .dau__menu{display:grid;place-items:center}
  .dau__chip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut) 10px}
  .dau__chip::-webkit-scrollbar{display:none}
  .dau__chip a{flex:none;border:1px solid var(--vien2);border-radius:999px;padding:6px 12px;font:700 14px var(--f-than);color:var(--muc);min-height:36px;display:inline-flex;align-items:center}
  .dau__chip a[aria-current]{background:var(--muc);color:var(--nen);border-color:var(--muc)}
}
@media (max-width:720px){
  .tg{--gut:16px;font-size:16px}
  .dau__in{height:58px}
  .logo{font-size:19px}
  .tg h1{font-size:30px;line-height:1.1}
  .h-hero h1{font-size:36px}
  .h-hero{padding:22px 0 12px}
  .tg h2.muc,.chinh>h2{font-size:24px;margin-top:28px}
  .hero{aspect-ratio:16/10;border-radius:12px;margin-inline:calc(var(--gut)*-1);border-radius:0}
  .hub-dau .hero{min-height:0;aspect-ratio:16/10}
  .tc{grid-template-columns:minmax(0,1fr);padding:18px 16px 16px;gap:12px}
  .tc__nhan{margin-top:-30px!important}
  .tc__anh{aspect-ratio:16/8}
  .tc h2{font-size:22px}
  .tc--nho{grid-template-columns:96px minmax(0,1fr)}
  .tc--nho .tc__anh{aspect-ratio:1}
  .tc--nho .tc__nhan{grid-column:1/-1}
  .khu-luoi,.khu-luoi--4,.khu-luoi--2,.tour-luoi,.nuoc-luoi,.tp-luoi,.hoi-luoi,.moi,.tin,.hai-cot-ds,.ds-vs,.cum-luoi,.mua-luoi,.hai-ben,.khoan-luoi{grid-template-columns:minmax(0,1fr)}
  .nuoc{flex-direction:row}
  .nuoc__anh{width:120px;flex:none;aspect-ratio:auto}
  .nuoc__nd{padding:10px 12px}
  .nuoc__nd b{font-size:19px}
  .hoi{min-height:0}
  .ks-ds li{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 14px}
  .ks-ds .nut-hang{flex-direction:row;justify-content:flex-start;margin-top:6px}
  .ks-ds .hang small{display:inline;margin-left:6px}
  .ks-the li{grid-template-columns:36px minmax(0,1fr);padding:14px}
  .ks-the li>.nut-hang{grid-column:2}
  .ks-the__so{width:34px;height:34px;font-size:15px;border-radius:10px}
  .ks-the dl{grid-template-columns:minmax(0,1fr)}
  .ks-the dt{margin-top:4px}
  .so-lieu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .so-lieu dd{font-size:17px}
  .lo-trinh{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .ngay h2{font-size:23px}
  .ngay__anh{aspect-ratio:16/9}
  .buoi b{display:block;min-width:0}
  .dat-ngay{grid-template-columns:minmax(0,1fr)}
  .dat-ngay__nhan{justify-self:start}
  .dat-ngay .nut-la{justify-self:start}
  .chon-ngay__ct,.kieu-di__ct{grid-template-columns:minmax(0,1fr)}
  .tra-loi__chu{font-size:19px}
  .thang{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:10px}
  .thang-ct{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phan-quyet__dau{flex-direction:column;gap:8px}
  .ss{grid-template-columns:minmax(0,1fr)}
  .ss__vs{justify-self:center;margin:-6px 0}
  .lich__hang{grid-template-columns:62px repeat(12,minmax(0,1fr));gap:2px}
  .lich__hang span{font-size:12px}
  .lich__hang i{height:22px}
  .tabs button{padding:10px 11px;font-size:14.5px}
  .bang{font-size:14px}
  .bang th,.bang td{padding:9px 10px}
  .chan__in{grid-template-columns:1fr 1fr;gap:18px}
  .chan__in>div:first-child{grid-column:1/-1}
  .goi{margin-inline:0}
  /* thanh đặt dính đáy */
  .thanh{display:flex;align-items:center;position:sticky;bottom:0;z-index:7;gap:10px;padding:10px 14px 12px;background:color-mix(in srgb,var(--nen) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--vien);box-shadow:0 -8px 24px -16px #0006;transition:transform .3s ease,opacity .3s ease}
  .thanh.an{transform:translateY(110%);opacity:0;pointer-events:none}
  .thanh--2 a{flex:1}
  .thanh .nut-vang{padding:0 14px}
}
@media (max-width:400px){
  .tg h1{font-size:27px}
  .h-hero h1{font-size:32px}
  .tc--nho{grid-template-columns:minmax(0,1fr)}
  .tc--nho .tc__anh{display:none}
  .nuoc__anh{width:96px}
  .thanh__anh{display:none}
}

