/*
Theme Name: 베트남신호등
Template: listinghive
Version: 1.1.1
Text Domain: listinghive-vtl
*/

.site-header { background: #201b3c; color: #fff; }
.site-header a, .site-header button { color: inherit; }
.vtl-home, .vtl-directory { color: #211a38; word-break: keep-all; }
.vtl-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.vtl-hero { position: relative; isolation: isolate; overflow: hidden; background: #261c50; color: white; }
.vtl-hero-image { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vtl-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, #1c133bf5, #1c133b69); }
.vtl-hero-content { padding-block: clamp(3rem, 9vw, 7rem); }
.vtl-hero h1 { color: inherit; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; margin: 0 0 1.5rem; }
.vtl-hero-search { display: flex; gap: .5rem; max-width: 35rem; }
.vtl-hero-search input { flex: 1; min-width: 0; }
.vtl-home button, .vtl-filter button { border: 0; border-radius: .55rem; padding: .55rem 1rem; background: #6426c8; color: #fff; white-space: nowrap; }
.vtl-home-section { margin-block: 2rem; }
.vtl-zones, .vtl-cities, .vtl-results { display: grid; gap: .85rem; }
.vtl-zones, .vtl-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vtl-cities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vtl-zone, .vtl-cities a { display: grid; gap: .3rem; padding: 1rem; border-radius: .75rem; background: #eee8fa; color: #32196c; }
.vtl-zone strong { font-size: 1.25rem; }
.vtl-green { background: #dbf9e5 !important; color: #075b2a !important; }
.vtl-yellow { background: #fff1a9 !important; color: #633e00 !important; }
.vtl-red { background: #ffe0e2 !important; color: #86162b !important; }
.vtl-card { overflow: hidden; border: 1px solid #ded8ed; border-radius: .8rem; background: #fff; }
.vtl-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vtl-card-body { padding: .9rem; overflow-wrap: anywhere; }
.vtl-card h3 { font-size: 1.125rem; margin: .5rem 0; }
.vtl-card p { margin: 0; }
.vtl-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.vtl-badge { border-radius: 1rem; background: #eee8fa; color: #32196c; padding: .18rem .6rem; font-size: .85rem; }
.vtl-filter { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)) auto auto; gap: .65rem; align-items: end; margin-bottom: 1.5rem; padding: 1rem; border-radius: .75rem; background: #f5f1fb; }
.vtl-filter label { display: grid; gap: .2rem; min-width: 0; }
.vtl-filter :is(input, select) { width: 100%; min-height: 44px; }
.vtl-filter > a { padding: .55rem 0; }
.vtl-pagination ul { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.vtl-home :focus-visible, .vtl-directory :focus-visible { outline: 3px solid #7542d5; outline-offset: 3px; }

@media (max-width: 760px) {
    .vtl-filter, .vtl-results, .vtl-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vtl-filter label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .vtl-results, .vtl-zones { grid-template-columns: 1fr; }
}

.home:has(.vtl-home-refresh) .site-header { background: #191633; }
.vtl-home-refresh .vtl-home-nav { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.vtl-home-brand { color: #1c1937; font-size: 1.25rem; white-space: nowrap; }
.vtl-nav-links { display: flex; gap: .35rem 1.2rem; flex-wrap: wrap; }
.vtl-nav-links a { color: #22183d; font-weight: 700; }
.vtl-travel-hero { color: white; background: linear-gradient(90deg, #19142ce8, #21142f88 58%, #19142c33), var(--vtl-hero-url) center 54% / cover, #292052; }
.vtl-travel-hero-inner { padding-block: clamp(2.6rem, 7vw, 5.25rem); }
.vtl-travel-hero h1 { color: white; margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.18; }
.vtl-travel-hero em { color: #ffe555; font-style: normal; }
.vtl-travel-hero p { margin: .75rem 0 1.25rem; }
.vtl-travel-search { display: flex; align-items: center; max-width: 650px; border: 2px solid #c9a3ff; background: white; padding: .25rem; border-radius: 100px; }
.vtl-travel-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #211a38; padding: .4rem .9rem; }
.vtl-travel-search button { padding: 0; width: 42px; height: 42px; border-radius: 50%; background: #6625cb; color: white; font-size: 1.6rem; }
.vtl-travel-sections .vtl-home-section { margin-block: 1.25rem 1.75rem; }
.vtl-home-refresh h2 { font-size: 1.32rem; }
.vtl-home-refresh .vtl-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vtl-home-refresh .vtl-zone { text-align: center; align-content: center; min-height: 104px; padding: .55rem .2rem; color: white; }
.vtl-home-refresh .vtl-zone strong { font-size: clamp(.88rem, 2.4vw, 1.4rem); }
.vtl-zone strong span { display: inline-block; margin-right: .18em; }
.vtl-signal-green { background: linear-gradient(145deg, #12823e, #0b6530); }
.vtl-home-refresh .vtl-signal-yellow { background: linear-gradient(145deg, #ffe875, #ffcd38); color: #462800; }
.vtl-signal-red { background: linear-gradient(145deg, #db293d, #b91d30); }
.vtl-home-refresh .vtl-cities { grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr)); gap: .6rem; }
.vtl-home-refresh .vtl-cities a { position: relative; overflow: hidden; display: grid; place-items: end center; min-height: 98px; color: white; background: linear-gradient(145deg, #365e83, #29234f); padding: .65rem; }
.vtl-home-refresh .vtl-cities img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vtl-home-refresh .vtl-cities a:has(img)::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, #101120dd); }
.vtl-home-refresh .vtl-cities strong { position: relative; z-index: 1; }
.vtl-quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .55rem; margin-top: .65rem; }
.vtl-quick-links a { display: grid; place-content: center; justify-items: center; gap: .15rem; min-height: 66px; text-align: center; border: 1px solid #ded8ed; border-radius: .65rem; background: #faf8fd; color: #211a38; font-size: .86rem; }
.vtl-quick-links span { color: #6426c8; font-size: 1.35rem; line-height: 1.2; }
@media (max-width: 620px) {
    .vtl-home-refresh .vtl-home-nav { display: grid; gap: .3rem; padding-block: .6rem; }
    .vtl-nav-links { gap: .25rem .7rem; font-size: .82rem; }
    .vtl-home-refresh .vtl-zone > span { font-size: .76rem; }
    .vtl-home-refresh .vtl-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}