/* =========================================================================
   KaraokeHanoi.net — Home sections
   ========================================================================= */
.vs-container--narrow { max-width: 860px; }
#dat-phong, #khu-vuc, #dia-diem, #nhu-cau, #hinh-anh, #faq { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------- HERO ---------------- */
.krk-hero { position: relative; color: #fff; overflow: hidden; background: var(--krk-ink); }
.krk-hero__bg { position: absolute; inset: 0; z-index: 0; }
.krk-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.krk-hero__overlay { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,11,20,.92) 0%, rgba(15,11,20,.78) 42%, rgba(15,11,20,.45) 100%); }
.krk-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }

.krk-hero__eyebrow { display: inline-block; color: var(--krk-gold); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: .8rem; margin-bottom: .7rem; }
.krk-hero__title { color: #fff; font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.15; margin: 0 0 .8rem; }
.krk-hero__lead { color: #e7e2ec; font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 34em; margin-bottom: 1.2rem; }

.krk-hero__points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; max-width: 30em; }
.krk-hero__points li { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; color: #f2eef5; }
.krk-hero__points .vs-ico { width: 20px; height: 20px; color: var(--krk-gold); flex: 0 0 auto; }

.krk-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.krk-hero__cta .vs-btn { min-height: 52px; }

/* Form card */
.krk-hero__form { position: relative; }
.krk-formcard { background: #fff; color: var(--vs-text); border-radius: 16px; padding: clamp(1.2rem, 2vw, 1.75rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.35); border-top: 4px solid var(--vs-accent); }
.krk-formcard__title { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; margin: 0 0 .25rem; color: var(--vs-primary); }
.krk-formcard__title .vs-ico { color: var(--vs-accent); }
.krk-formcard__sub { color: var(--vs-muted); font-size: .92rem; margin: 0 0 1rem; }
.krk-formnote { font-size: .82rem; color: var(--vs-muted); margin: .7rem 0 0; }
.krk-formfallback .vs-btn { margin-bottom: .5rem; }

/* CF7 fields */
.krk-cf7 .wpcf7-form p { margin: 0 0 .7rem; }
.krk-cf7 label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; color: var(--vs-primary); }
.krk-cf7 .wpcf7-form-control:not([type=submit]):not(.wpcf7-acceptance) {
  width: 100%; min-height: 46px; padding: .6rem .75rem; border: 1px solid var(--vs-border);
  border-radius: 10px; font: inherit; color: var(--vs-text); background: #fff; }
.krk-cf7 textarea.wpcf7-form-control { min-height: 76px; }
.krk-cf7 .wpcf7-form-control:focus { outline: none; border-color: var(--vs-accent); box-shadow: 0 0 0 3px rgba(196,23,27,.14); }
.krk-cf7 .krk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.krk-cf7 .wpcf7-submit { width: 100%; min-height: 52px; background: var(--vs-accent); color: #fff; border: 0;
  border-radius: 10px; font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: background .2s; }
.krk-cf7 .wpcf7-submit:hover { background: var(--vs-accent-hover); }
.krk-cf7 .wpcf7-spinner { margin: .6rem auto 0; display: block; }
.krk-cf7 .wpcf7-not-valid-tip { color: var(--vs-accent); font-size: .82rem; font-weight: 600; }
.krk-cf7 .wpcf7-response-output { margin: .8rem 0 0 !important; padding: .7rem .9rem !important; border-radius: 10px;
  border: 0 !important; font-size: .92rem; background: var(--vs-bg-soft); }
.krk-cf7 form.sent .wpcf7-response-output { background: #e7f6ee; color: #12633f; }
.krk-cf7 form.invalid .wpcf7-response-output, .krk-cf7 form.failed .wpcf7-response-output { background: #fdeceb; color: #a3131a; }
.krk-cf7 form.submitting .wpcf7-submit { opacity: .7; pointer-events: none; }

/* ---------------- SECTION HEAD accents ---------------- */
.krk-districts .vs-eyebrow, .krk-venues .vs-eyebrow, .krk-occasions .vs-eyebrow,
.krk-why .vs-eyebrow, .krk-steps .vs-eyebrow, .krk-gallery .vs-eyebrow, .krk-faq .vs-eyebrow { color: var(--vs-gold-text); }

/* ---------------- DISTRICTS ---------------- */
.krk-districts__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.krk-district { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; background: #fff;
  border: 1px solid var(--vs-border); border-radius: 12px; text-decoration: none; color: var(--vs-primary);
  font-weight: 600; transition: border-color .15s, transform .12s, box-shadow .15s; }
.krk-district:hover { border-color: var(--vs-accent); transform: translateY(-2px); box-shadow: var(--vs-shadow-sm); color: var(--vs-accent); }
.krk-district .vs-ico { width: 20px; height: 20px; color: var(--vs-accent); flex: 0 0 auto; }

/* ---------------- VENUES ---------------- */
.krk-venues__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.krk-vcard { background: #fff; border: 1px solid var(--vs-border); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .18s, transform .12s; }
.krk-vcard:hover { box-shadow: var(--vs-shadow-md); transform: translateY(-3px); }
.krk-vcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.krk-vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.krk-vcard:hover .krk-vcard__media img { transform: scale(1.04); }
.krk-vcard__badge { position: absolute; left: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(23,19,28,.82); color: #fff; font-size: .78rem; font-weight: 600; padding: .28rem .55rem; border-radius: 999px; }
.krk-vcard__badge .vs-ico { width: 14px; height: 14px; color: var(--krk-gold); }
.krk-vcard__body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.krk-vcard__title { font-size: 1rem; line-height: 1.35; margin: 0; }
.krk-vcard__title a { color: var(--vs-primary); text-decoration: none; }
.krk-vcard__title a:hover { color: var(--vs-accent); }
.krk-vcard__actions { display: flex; gap: .5rem; margin-top: auto; }
.krk-vcard__actions .vs-btn { flex: 1; }
.krk-venues__more { text-align: center; margin-top: 1.75rem; }

/* ---------------- OCCASIONS ---------------- */
.krk-occasions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.krk-occard { display: flex; flex-direction: column; gap: .4rem; padding: 1.35rem; background: #fff;
  border: 1px solid var(--vs-border); border-radius: 14px; text-decoration: none; color: var(--vs-text);
  transition: border-color .15s, transform .12s, box-shadow .15s; }
.krk-occard:hover { border-color: var(--vs-accent); transform: translateY(-3px); box-shadow: var(--vs-shadow-sm); }
.krk-occard__ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--vs-bg-soft); color: var(--vs-accent); margin-bottom: .3rem; }
.krk-occard__ico .vs-ico { width: 26px; height: 26px; }
.krk-occard__title { font-weight: 700; font-size: 1.1rem; color: var(--vs-primary); }
.krk-occard__desc { color: var(--vs-muted); font-size: .92rem; }
.krk-occard__link { margin-top: .3rem; color: var(--vs-accent); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem; }
.krk-occard__link .vs-ico { width: 16px; height: 16px; }

/* ---------------- WHY ---------------- */
.krk-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.krk-why__item { text-align: center; padding: 1.25rem 1rem; }
.krk-why__ico { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--vs-bg-soft); color: var(--vs-accent); margin-bottom: .75rem; }
.krk-why__ico .vs-ico { width: 30px; height: 30px; }
.krk-why__item h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.krk-why__item p { color: var(--vs-muted); font-size: .95rem; margin: 0; }

/* ---------------- STEPS ---------------- */
.krk-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: none; }
.krk-step { position: relative; background: #fff; border: 1px solid var(--vs-border); border-radius: 14px; padding: 1.75rem 1.35rem 1.5rem; text-align: center; }
.krk-step__num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--vs-accent); color: #fff; font-weight: 800; font-size: 1.4rem; margin-bottom: .6rem; }
.krk-step__title { margin: 0 0 .3rem; font-size: 1.15rem; }
.krk-step__desc { color: var(--vs-muted); margin: 0; font-size: .95rem; }

/* ---------------- GALLERY ---------------- */
.krk-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.krk-gitem { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--vs-bg-soft); cursor: pointer; }
.krk-gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.krk-gitem:hover img { transform: scale(1.05); }
.krk-gitem.is-hidden { display: none; }
.krk-gallery__grid.is-expanded .krk-gitem.is-hidden { display: block; }
.krk-gallery__more { text-align: center; margin-top: 1.5rem; }

/* Lightbox */
.krk-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
  background: rgba(10,7,14,.92); padding: 1.5rem; }
.krk-lightbox.is-open { display: flex; }
.krk-lightbox img { max-width: 100%; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.krk-lightbox__close, .krk-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; display: grid; place-items: center; }
.krk-lightbox__close { top: 1rem; right: 1rem; }
.krk-lightbox__nav { top: 50%; transform: translateY(-50%); }
.krk-lightbox__nav--prev { left: 1rem; }
.krk-lightbox__nav--next { right: 1rem; }
.krk-lightbox__close:hover, .krk-lightbox__nav:hover { background: rgba(255,255,255,.25); }

/* ---------------- FAQ ---------------- */
.krk-faq__list { display: flex; flex-direction: column; gap: .6rem; }
.krk-faq__item { background: #fff; border: 1px solid var(--vs-border); border-radius: 12px; overflow: hidden; }
.krk-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: 1rem 1.15rem; font-weight: 700; color: var(--vs-primary); list-style: none; }
.krk-faq__q::-webkit-details-marker { display: none; }
.krk-faq__q .vs-ico { transition: transform .2s; flex: 0 0 auto; color: var(--vs-accent); }
.krk-faq__item[open] .krk-faq__q .vs-ico { transform: rotate(180deg); }
.krk-faq__a { padding: 0 1.15rem 1.1rem; color: var(--vs-muted); }
.krk-faq__a p { margin: 0; }

/* ---------------- FINAL CTA ---------------- */
.krk-finalcta { background: linear-gradient(120deg, var(--krk-ink), #2a1420); color: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); }
.krk-finalcta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.krk-finalcta h2 { color: #fff; margin: 0 0 .4rem; }
.krk-finalcta p { color: #e7e2ec; margin: 0; }
.krk-finalcta__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.krk-finalcta__actions .vs-btn { min-height: 52px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1024px) {
  .krk-venues__grid { grid-template-columns: repeat(2, 1fr); }
  .krk-why__grid { grid-template-columns: repeat(2, 1fr); }
  .krk-districts__grid { grid-template-columns: repeat(4, 1fr); }
  .krk-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .krk-hero__inner { grid-template-columns: 1fr; }
  .krk-hero__overlay { background: linear-gradient(180deg, rgba(15,11,20,.86), rgba(15,11,20,.9)); }
  .krk-occasions__grid { grid-template-columns: repeat(2, 1fr); }
  .krk-steps__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .krk-districts__grid { grid-template-columns: repeat(2, 1fr); }
  .krk-venues__grid { grid-template-columns: 1fr 1fr; }
  .krk-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .krk-hero__points { grid-template-columns: 1fr; }
  .krk-cf7 .krk-grid2 { grid-template-columns: 1fr; }
  .krk-finalcta__inner { flex-direction: column; align-items: flex-start; }
  .krk-vcard__actions { flex-direction: column; }
}
@media (max-width: 380px) {
  .krk-venues__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .krk-vcard:hover .krk-vcard__media img, .krk-gitem:hover img { transform: none; }
}