/* ============================================================
   Landing SEO — Roland GO:KEYS 3 Minion
   Toàn bộ file riêng của trang nằm trong /roland-gokeys-3-minion/.
   Chỉ dùng chung style.css (header/footer/nav) của site.
   Bố cục kế thừa landing FP-40, đổi tông vàng Minion + xanh denim.
   ============================================================ */

:root {
  --gk-yellow: #f6d02f;
  --gk-yellow-soft: #fbe58a;
  --gk-yellow-bg: #fffbea;
  --gk-blue: #2b5797;
  --gk-blue-deep: #16305a;
  --gk-ink: #141b2d;
  --gk-red: #d63a2f;
  --gk-line: #ece6d4;
  --gk-muted: #535a68;
  --gk-display: "Oswald", "Arial Narrow", sans-serif;
  --gk-serif: "Noto Serif JP", serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.gk3-page { background: #fff; }
.gk3-page main { overflow-x: clip; }

.gk-wrap { max-width: 112rem; margin: 0 auto; padding-inline: var(--vtm-gutter); }
@media screen and (max-width: 767px) { .gk-wrap { padding-inline: 1.6rem; } }

/* ---------- Tiêu đề section dùng chung ---------- */
.gk-section { padding: 8rem 0; scroll-margin-top: 12rem; }
.gk-section--soft { background: var(--gk-yellow-bg); }
.gk-section--dark { background: var(--gk-blue-deep); color: #fff; }
@media screen and (max-width: 767px) { .gk-section { padding: 4.4rem 0; scroll-margin-top: 9rem; } }

.gk-eyebrow {
  font-family: var(--gk-display); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gk-blue); line-height: 1.4;
}
.gk-section--dark .gk-eyebrow { color: var(--gk-yellow); }
.gk-title {
  margin-top: 1rem; font-family: var(--gk-serif); font-size: 3rem; font-weight: 500;
  line-height: 1.45; letter-spacing: 0.04em; color: var(--gk-ink);
}
.gk-section--dark .gk-title { color: #fff; }
.gk-lead { margin-top: 1.6rem; max-width: 72rem; font-size: 1.4rem; line-height: 2; color: var(--gk-muted); letter-spacing: 0.04em; }
.gk-section--dark .gk-lead { color: rgba(255, 255, 255, 0.8); }
.gk-head--center { text-align: center; }
.gk-head--center .gk-lead { margin-inline: auto; }
@media screen and (max-width: 767px) {
  .gk-eyebrow { font-size: 1.15rem; }
  .gk-title { font-size: 2.2rem; }
  .gk-lead { font-size: 1.3rem; line-height: 1.8; }
}

/* ---------- Nút ---------- */
.gk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.35rem 3rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--gk-serif); font-size: 1.3rem; letter-spacing: 0.06em; line-height: 1.4;
  text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.gk-btn--yellow { background: var(--gk-yellow); color: var(--gk-ink); font-weight: 600; }
@media (hover: hover) and (min-width: 768px) { .gk-btn--yellow:hover { background: var(--gk-yellow-soft); } }
.gk-btn--blue { background: var(--gk-blue); color: #fff; }
@media (hover: hover) and (min-width: 768px) { .gk-btn--blue:hover { background: var(--gk-blue-deep); } }
.gk-btn--ghost-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
@media (hover: hover) and (min-width: 768px) { .gk-btn--ghost-light:hover { border-color: var(--gk-yellow); color: var(--gk-yellow); } }
.gk-btn--ghost { border-color: #cfd3dc; color: var(--gk-ink); background: #fff; }
@media (hover: hover) and (min-width: 768px) { .gk-btn--ghost:hover { border-color: var(--gk-blue); color: var(--gk-blue); } }
.gk-btn svg { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
/* style.css khoá click link tel: trên desktop toàn site — mở lại cho nút gọi của trang này */
.gk3-page a.gk-btn[href^="tel:"], .gk3-page a.gk-tel[href^="tel:"] { pointer-events: auto; }

/* ---------- Breadcrumb ---------- */
.gk-crumb { background: var(--gk-yellow-bg); border-bottom: 1px solid var(--gk-line); }
.gk-crumb ol { max-width: 112rem; margin: 0 auto; padding: 1rem var(--vtm-gutter); display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; font-size: 1.1rem; line-height: 1.5; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-crumb li + li::before { content: "/"; margin-right: 0.6rem; color: #b5ae98; }
.gk-crumb a { color: var(--gk-blue); }
@media screen and (max-width: 767px) { .gk-crumb ol { padding: 0.8rem 1.6rem; font-size: 1.05rem; } }

/* ============================================================
   HERO
   ============================================================ */
.gk-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 72rem; display: flex; align-items: flex-end;
  padding: 16rem 0 7rem; color: #fff; background: var(--gk-blue-deep);
}
.gk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; z-index: -2; }
.gk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(22, 48, 90, 0.96) 0%, rgba(22, 48, 90, 0.82) 38%, rgba(22, 48, 90, 0.1) 75%),
    linear-gradient(0deg, rgba(20, 27, 45, 0.6) 0%, rgba(20, 27, 45, 0) 45%);
}
.gk-hero__inner { width: 100%; }
.gk-hero__content { max-width: 62rem; }
.gk-hero__badge {
  display: inline-flex; align-items: center; gap: 1rem; padding: 0.7rem 1.6rem;
  border: 1px solid rgba(246, 208, 47, 0.7); border-radius: 999px;
  font-family: var(--gk-display); font-size: 1.2rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gk-yellow);
  line-height: 1.4;
}
.gk-hero__badge--flash { background: var(--gk-red); border-color: var(--gk-red); color: #fff; }
.gk-hero__brand { margin-top: 2.4rem; font-family: var(--gk-display); font-size: 1.6rem; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.78); line-height: 1; }
.gk-hero__title { font-family: var(--gk-display); font-size: 8.4rem; font-weight: 400; line-height: 1.02; letter-spacing: 0.01em; margin-top: 0.8rem; }
.gk-hero__title span { display: block; color: var(--gk-yellow); }
.gk-hero__tagline { margin-top: 1.6rem; font-family: var(--gk-serif); font-size: 2rem; line-height: 1.6; letter-spacing: 0.05em; color: #fff; }
.gk-hero__sub { margin-top: 1.2rem; font-size: 1.35rem; line-height: 1.9; color: rgba(255, 255, 255, 0.84); letter-spacing: 0.04em; }
.gk-hero__price { margin-top: 2.6rem; display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; line-height: 1.2; }
.gk-hero__price-label { font-size: 1.25rem; color: rgba(255, 255, 255, 0.78); }
.gk-hero__price-value { font-family: var(--gk-display); font-size: 4.6rem; font-weight: 500; color: var(--gk-yellow); letter-spacing: 0.02em; }
.gk-hero__price-old { font-family: var(--gk-display); font-size: 1.8rem; color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
.gk-hero__price-note { margin-top: 0.6rem; font-size: 1.15rem; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.gk-hero__price-note strong { color: #fff; font-weight: 500; }
.gk-hero__actions { margin-top: 3rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

@media screen and (max-width: 767px) {
  .gk-hero { min-height: 0; padding: 0 0 4.4rem; flex-direction: column; align-items: stretch; background: var(--gk-blue-deep); }
  /* Mobile: ảnh đàn nằm trên, chữ nằm dưới trên nền xanh — không đè chữ lên nền vàng */
  .gk-hero__bg { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; object-position: 60% 50%; }
  .gk-hero::before { display: none; }
  .gk-hero__inner { padding-top: 2.6rem; }
  .gk-hero__badge { font-size: 1.05rem; letter-spacing: 0.12em; padding: 0.6rem 1.3rem; }
  .gk-hero__brand { font-size: 1.3rem; margin-top: 2rem; }
  .gk-hero__title { font-size: 5rem; }
  .gk-hero__tagline { font-size: 1.7rem; }
  .gk-hero__sub { font-size: 1.25rem; line-height: 1.75; }
  .gk-hero__price-value { font-size: 3.8rem; }
  .gk-hero__price-old { font-size: 1.5rem; }
  .gk-hero__actions { flex-direction: column; }
  .gk-hero__actions .gk-btn { width: 100%; }
}

/* ---------- Thanh flash sale (JS bật trong 24–26.09) ---------- */
body:not(.is-flash) [data-flash-only] { display: none !important; }
.is-flash [data-flash-hide] { display: none !important; }
.gk-flashbar {
  background: var(--gk-red); color: #fff; text-align: center; padding: 1.1rem var(--vtm-gutter);
  font-size: 1.25rem; line-height: 1.6; letter-spacing: 0.03em;
}
.gk-flashbar strong { font-family: var(--gk-display); font-weight: 500; font-size: 1.5rem; letter-spacing: 0.04em; color: var(--gk-yellow); }
.gk-flashbar a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.6); margin-left: 0.6rem; }

/* ============================================================
   SUB-NAV DÍNH
   ============================================================ */
.gk-subnav {
  position: sticky; top: 72px; z-index: 500;
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gk-line);
}
.gk-subnav__inner {
  max-width: 112rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1rem var(--vtm-gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gk-subnav__inner::-webkit-scrollbar { display: none; }
.gk-subnav__link {
  flex-shrink: 0; white-space: nowrap; padding: 0.7rem 1.7rem; border-radius: 999px;
  font-size: 1.2rem; letter-spacing: 0.03em; color: #555; line-height: 1.5; transition: background 0.25s ease, color 0.25s ease;
}
@media (hover: hover) and (min-width: 768px) { .gk-subnav__link:hover { color: var(--gk-blue); } }
.gk-subnav__link.is-active { background: var(--gk-ink); color: #fff; }
.gk-subnav__link--cta { background: var(--gk-yellow); color: var(--gk-ink); margin-left: 0.8rem; font-weight: 600; }
.gk-subnav__link--cta.is-active { background: var(--gk-ink); color: var(--gk-yellow); }
@media screen and (max-width: 767px) {
  .gk-subnav { top: 50px; }
  .gk-subnav__inner { justify-content: flex-start; padding: 0.8rem 1.2rem; }
  .gk-subnav__link { padding: 0.6rem 1.3rem; font-size: 1.1rem; }
}

/* ============================================================
   GIÁ & MUA HÀNG
   ============================================================ */
.gk-buy { margin-top: 4rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.gk-buy__media { background: var(--gk-yellow-bg); border-radius: 1.2rem; overflow: hidden; }
.gk-buy__media img { display: block; width: 100%; height: auto; }
.gk-buy__card { border: 1px solid var(--gk-line); border-radius: 1.2rem; padding: 3rem 3.2rem; background: #fff; box-shadow: 0 1.6rem 3.6rem rgba(22, 48, 90, 0.08); }
.gk-buy__name { font-family: var(--gk-serif); font-size: 2.2rem; line-height: 1.45; color: var(--gk-ink); letter-spacing: 0.03em; }
.gk-buy__incl { margin-top: 0.8rem; font-size: 1.2rem; line-height: 1.75; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-buy__rows { margin-top: 2rem; border-top: 1px dashed #d9d3c2; }
.gk-buy__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed #d9d3c2; font-size: 1.2rem; line-height: 1.5; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-buy__row span:last-child { font-family: var(--gk-display); font-size: 1.6rem; color: var(--gk-ink); letter-spacing: 0.03em; white-space: nowrap; }
.gk-buy__row--old span:last-child { text-decoration: line-through; color: #999; }
.gk-buy__row--flash span:last-child { color: var(--gk-red); }
.gk-buy__final { margin-top: 1.8rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.gk-buy__final-label { font-size: 1.2rem; color: var(--gk-ink); line-height: 1.5; letter-spacing: 0.04em; }
.gk-buy__final-label small { display: block; font-size: 1.05rem; color: var(--gk-muted); }
.gk-buy__final-value { font-family: var(--gk-display); font-size: 4.4rem; font-weight: 500; line-height: 1; color: var(--gk-blue); letter-spacing: 0.01em; }
.is-flash .gk-buy__final-value { color: var(--gk-red); }
.gk-buy__countdown { margin-top: 1.6rem; padding: 1.1rem 1.4rem; border-radius: 0.6rem; background: #fdeeee; color: #a4262c; font-size: 1.15rem; line-height: 1.6; letter-spacing: 0.03em; }
.gk-buy__countdown strong { font-family: var(--gk-display); font-weight: 500; font-size: 1.4rem; }
.gk-buy__cta { margin-top: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gk-buy__cta .gk-btn { width: 100%; padding-inline: 1.6rem; }
.gk-trust { margin-top: 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; list-style: none; padding: 0; }
.gk-trust li { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.8rem; border-radius: 0.8rem; background: var(--gk-yellow-bg); }
.gk-trust svg { flex-shrink: 0; width: 2.4rem; height: 2.4rem; color: var(--gk-blue); }
.gk-trust b { display: block; font-family: var(--gk-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.5; color: var(--gk-ink); letter-spacing: 0.03em; }
.gk-trust span { display: block; margin-top: 0.3rem; font-size: 1.1rem; line-height: 1.6; color: var(--gk-muted); letter-spacing: 0.02em; }
@media screen and (max-width: 767px) {
  .gk-buy { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.6rem; }
  .gk-buy__card { padding: 2.2rem 1.8rem; }
  .gk-buy__name { font-size: 1.8rem; }
  .gk-buy__final-value { font-size: 3.6rem; }
  .gk-buy__cta { grid-template-columns: 1fr; }
  .gk-trust { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.6rem; }
  .gk-trust li { flex-direction: column; gap: 0.8rem; padding: 1.4rem; }
  .gk-trust b { font-size: 1.2rem; }
}

/* ============================================================
   CON SỐ NỔI BẬT
   ============================================================ */
.gk-stats { margin-top: 4.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.gk-stat { padding: 2.4rem 1.6rem; border-radius: 1rem; background: #fff; border: 1px solid var(--gk-line); text-align: center; }
.gk-stat__num { font-family: var(--gk-display); font-size: 4.4rem; font-weight: 500; line-height: 1.05; color: var(--gk-blue); }
.gk-stat__lbl { margin-top: 0.6rem; font-size: 1.15rem; line-height: 1.55; color: var(--gk-muted); letter-spacing: 0.02em; }
@media screen and (max-width: 767px) {
  .gk-stats { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.8rem; }
  .gk-stat { padding: 1.6rem 1rem; }
  .gk-stat__num { font-size: 3.2rem; }
  .gk-stat__lbl { font-size: 1.05rem; }
}

/* ---------- Hàng tính năng ảnh/chữ xen kẽ ---------- */
.gk-features { margin-top: 7rem; display: flex; flex-direction: column; gap: 7rem; }
.gk-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: center; }
.gk-feature:nth-child(even) .gk-feature__media { order: 2; }
.gk-feature__media { border-radius: 1rem; overflow: hidden; background: var(--gk-yellow-bg); }
.gk-feature__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.gk-feature__kicker { font-family: var(--gk-display); font-size: 1.2rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gk-blue); line-height: 1.4; }
.gk-feature__ttl { margin-top: 0.8rem; font-family: var(--gk-serif); font-size: 2.4rem; font-weight: 500; line-height: 1.45; color: var(--gk-ink); letter-spacing: 0.03em; }
.gk-feature__txt { margin-top: 1.4rem; font-size: 1.3rem; line-height: 1.95; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-feature__list { margin-top: 1.8rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.gk-feature__list li { position: relative; padding-left: 2.4rem; font-size: 1.2rem; line-height: 1.7; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-feature__list li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--gk-yellow); box-shadow: inset 0 0 0 2px var(--gk-blue); }
.gk-feature__list b { color: var(--gk-ink); font-weight: 500; }
@media screen and (max-width: 767px) {
  .gk-features { margin-top: 4rem; gap: 4rem; }
  .gk-feature { grid-template-columns: 1fr; gap: 1.8rem; }
  .gk-feature:nth-child(even) .gk-feature__media { order: 0; }
  .gk-feature__ttl { font-size: 1.85rem; }
  .gk-feature__txt { font-size: 1.2rem; line-height: 1.8; margin-top: 1rem; }
  .gk-feature__list li { font-size: 1.15rem; }
}

/* ============================================================
   THƯ VIỆN ẢNH (nền xanh)
   ============================================================ */
.gk-gallery { margin-top: 4rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
.gk-shot { border-radius: 0.8rem; overflow: hidden; background: #fff; }
.gk-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gk-shot--wide { grid-column: span 6; }
.gk-shot--wide img { height: auto; object-fit: contain; padding: 2rem 3rem; }
.gk-shot--half { grid-column: span 3; aspect-ratio: 3 / 2; }
.gk-shot--third { grid-column: span 2; aspect-ratio: 3 / 2; }
.gk-gallery figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gk-gallery__note { margin-top: 2rem; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.55); text-align: center; letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .gk-gallery { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.6rem; }
  .gk-shot--wide { grid-column: span 2; }
  .gk-shot--wide img { padding: 1rem 1.2rem; }
  .gk-shot--half { grid-column: span 2; }
  .gk-shot--third { grid-column: span 1; }
}

/* ============================================================
   DÀNH CHO AI
   ============================================================ */
.gk-personas { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.gk-persona { background: #fff; border: 1px solid var(--gk-line); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.gk-persona img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gk-persona__body { padding: 2.2rem 2.2rem 2.6rem; }
.gk-persona__ttl { font-family: var(--gk-serif); font-size: 1.7rem; font-weight: 500; line-height: 1.45; color: var(--gk-ink); letter-spacing: 0.03em; }
.gk-persona__txt { margin-top: 0.8rem; font-size: 1.2rem; line-height: 1.8; color: var(--gk-muted); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .gk-personas {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2rem; margin-top: 2.6rem;
    margin-inline: -1.6rem; padding-inline: 1.6rem; scrollbar-width: none;
  }
  .gk-personas::-webkit-scrollbar { display: none; }
  .gk-persona { flex: 0 0 80%; scroll-snap-align: start; }
  .gk-persona__body { padding: 1.8rem; }
  .gk-persona__ttl { font-size: 1.5rem; }
  .gk-persona__txt { font-size: 1.15rem; line-height: 1.7; }
}
.gk-swipe-hint { display: none; }
@media screen and (max-width: 767px) {
  .gk-swipe-hint { display: block; margin-top: 1.2rem; font-size: 1.05rem; color: #9a9588; text-align: right; letter-spacing: 0.03em; }
}

/* ============================================================
   CẨM NANG CHỌN ĐÀN (nội dung SEO dạng bài viết)
   ============================================================ */
.gk-guide { margin: 4rem auto 0; max-width: 90rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; counter-reset: guide; }
.gk-guide__item { position: relative; padding: 2.6rem 2.6rem 2.6rem 8rem; border-radius: 1rem; background: #fff; border: 1px solid var(--gk-line); }
.gk-guide__item::before {
  counter-increment: guide; content: counter(guide);
  position: absolute; left: 2.4rem; top: 2.4rem; width: 4rem; height: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gk-yellow); color: var(--gk-ink); font-family: var(--gk-display); font-size: 1.8rem; line-height: 1;
}
.gk-guide__ttl { font-family: var(--gk-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.5; color: var(--gk-ink); letter-spacing: 0.03em; }
.gk-guide__txt { margin-top: 0.8rem; font-size: 1.2rem; line-height: 1.85; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-guide__txt b { color: var(--gk-ink); font-weight: 500; }
@media screen and (max-width: 767px) {
  .gk-guide { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.6rem; }
  .gk-guide__item { padding: 1.8rem 1.6rem 1.8rem 6.2rem; }
  .gk-guide__item::before { left: 1.6rem; top: 1.8rem; width: 3.4rem; height: 3.4rem; font-size: 1.5rem; }
  .gk-guide__ttl { font-size: 1.4rem; }
  .gk-guide__txt { font-size: 1.15rem; line-height: 1.75; }
}

/* ============================================================
   THÔNG SỐ
   ============================================================ */
.gk-specs { margin-top: 4rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: start; }
.gk-specs__imgs { display: flex; flex-direction: column; gap: 1.6rem; }
.gk-specs__img { border: 1px solid var(--gk-line); border-radius: 1rem; overflow: hidden; background: #fff; }
.gk-specs__img img { display: block; width: 100%; height: auto; }
.gk-specs__img figcaption { padding: 1rem 1.4rem; font-size: 1.1rem; line-height: 1.6; color: var(--gk-muted); border-top: 1px solid var(--gk-line); letter-spacing: 0.03em; }
.gk-specs__table { width: 100%; border-collapse: collapse; }
.gk-specs__table th, .gk-specs__table td { padding: 1.3rem 0; border-bottom: 1px solid var(--gk-line); text-align: left; vertical-align: top; font-size: 1.25rem; line-height: 1.65; letter-spacing: 0.03em; }
.gk-specs__table th { width: 32%; font-weight: 400; color: var(--gk-muted); padding-right: 1.6rem; }
.gk-specs__table td { color: var(--gk-ink); }
.gk-specs__table tr:first-child th, .gk-specs__table tr:first-child td { border-top: 2px solid var(--gk-ink); }
@media screen and (max-width: 767px) {
  .gk-specs { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 2.6rem; }
  .gk-specs__imgs { order: 2; }
  .gk-specs__table th, .gk-specs__table td { font-size: 1.15rem; padding: 1.05rem 0; }
}

/* ---------- Phụ kiện ---------- */
.gk-acc { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.gk-acc__col { background: #fff; border: 1px solid var(--gk-line); border-radius: 1rem; padding: 2.8rem 3rem; }
.gk-acc__ttl { font-family: var(--gk-serif); font-size: 1.7rem; font-weight: 500; line-height: 1.45; color: var(--gk-ink); letter-spacing: 0.03em; padding-bottom: 1.2rem; border-bottom: 2px solid var(--gk-ink); }
.gk-acc__list { margin-top: 1.6rem; list-style: none; padding: 0; }
.gk-acc__list li { position: relative; padding: 1rem 0 1rem 2.2rem; border-bottom: 1px solid var(--gk-line); font-size: 1.2rem; line-height: 1.6; color: var(--gk-ink); letter-spacing: 0.03em; }
.gk-acc__list li::before { content: ""; position: absolute; left: 0; top: 1.8rem; width: 1rem; height: 1px; background: var(--gk-blue); }
.gk-acc__list--opts b { display: block; font-weight: 500; }
.gk-acc__list--opts span { display: block; font-size: 1.08rem; color: var(--gk-muted); }
.gk-acc__note { margin-top: 1.6rem; font-size: 1.1rem; line-height: 1.75; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-acc__note a { color: var(--gk-blue); border-bottom: 1px solid currentColor; }
@media screen and (max-width: 767px) {
  .gk-acc { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3rem; }
  .gk-acc__col { padding: 2rem 1.8rem; }
  .gk-acc__ttl { font-size: 1.5rem; }
  .gk-acc__list li { font-size: 1.15rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
.gk-faq { margin: 4rem auto 0; max-width: 86rem; display: flex; flex-direction: column; gap: 1rem; }
.gk-faq details { background: #fff; border: 1px solid var(--gk-line); border-radius: 0.8rem; overflow: hidden; }
.gk-faq summary {
  cursor: pointer; list-style: none; padding: 1.8rem 2.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem;
  font-family: var(--gk-serif); font-size: 1.3rem; line-height: 1.6; color: var(--gk-ink); letter-spacing: 0.03em;
}
.gk-faq summary h3 { font: inherit; }
.gk-faq summary::-webkit-details-marker { display: none; }
.gk-faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.9rem; font-weight: 300; line-height: 1; color: var(--gk-blue); }
.gk-faq details[open] summary::after { content: "\2212"; }
.gk-faq__a { padding: 0 2.2rem 2rem; font-size: 1.2rem; line-height: 1.85; color: var(--gk-muted); letter-spacing: 0.03em; }
@media screen and (max-width: 767px) {
  .gk-faq { margin-top: 2.6rem; gap: 0.8rem; }
  .gk-faq summary { padding: 1.4rem 1.5rem; font-size: 1.2rem; }
  .gk-faq__a { padding: 0 1.5rem 1.5rem; font-size: 1.12rem; line-height: 1.7; }
}

/* ============================================================
   FORM TƯ VẤN / ĐẶT HÀNG
   ============================================================ */
.gk-order { position: relative; isolation: isolate; overflow: hidden; background: var(--gk-blue-deep); color: #fff; }
.gk-order::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 15% 20%, rgba(43, 87, 151, 0.9) 0%, rgba(22, 48, 90, 0) 60%);
}
.gk-order__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 6rem; align-items: start; }
.gk-order .gk-title { color: #fff; }
.gk-order .gk-eyebrow { color: var(--gk-yellow); }
.gk-order .gk-lead { color: rgba(255, 255, 255, 0.82); }
.gk-order__recap { margin-top: 3rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.gk-order__recap li { display: flex; gap: 1.2rem; font-size: 1.25rem; line-height: 1.7; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.03em; }
.gk-order__recap svg { flex-shrink: 0; width: 2rem; height: 2rem; margin-top: 0.2rem; color: var(--gk-yellow); }
.gk-order__contact { margin-top: 3.4rem; padding-top: 2.6rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.gk-order__contact-lbl { font-size: 1.15rem; color: rgba(255, 255, 255, 0.68); letter-spacing: 0.04em; line-height: 1.6; }
.gk-order__hotline { display: inline-block; margin-top: 0.4rem; font-family: var(--gk-display); font-size: 3.4rem; font-weight: 500; letter-spacing: 0.04em; color: var(--gk-yellow); line-height: 1.2; }
.gk-order__contact-sub { margin-top: 0.6rem; font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.68); letter-spacing: 0.03em; }
.gk-order__contact-sub a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

.gk-form { background: #fff; color: var(--gk-ink); border-radius: 1.2rem; padding: 3.4rem 3.4rem 3rem; box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, 0.25); }
.gk-form__ttl { font-family: var(--gk-serif); font-size: 1.9rem; line-height: 1.45; letter-spacing: 0.03em; }
.gk-form__sub { margin-top: 0.6rem; font-size: 1.12rem; line-height: 1.7; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-form__grid { margin-top: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.gk-field { display: flex; flex-direction: column; gap: 0.6rem; }
.gk-field--full { grid-column: 1 / -1; }
.gk-field__lbl { font-size: 1.12rem; color: var(--gk-ink); letter-spacing: 0.03em; line-height: 1.5; }
.gk-field__lbl i { font-style: normal; color: var(--gk-red); }
.gk-field input, .gk-field select, .gk-field textarea {
  width: 100%; padding: 1.15rem 1.3rem; border: 1px solid #d3d6de; border-radius: 0.5rem; background: #fff;
  font-family: inherit; font-size: 16px; line-height: 1.5; letter-spacing: 0.02em; color: var(--gk-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gk-field textarea { min-height: 8rem; resize: vertical; }
.gk-field input:focus, .gk-field select:focus, .gk-field textarea:focus { border-color: var(--gk-blue); box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.15); }
.gk-field.is-invalid input, .gk-field.is-invalid select { border-color: #c0392b; }
.gk-field__err { display: none; font-size: 1.05rem; color: #c0392b; line-height: 1.5; }
.gk-field.is-invalid .gk-field__err { display: block; }
.gk-form__summary { margin-top: 2rem; padding: 1.4rem 1.6rem; background: var(--gk-yellow-bg); border-radius: 0.6rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.gk-form__summary-lbl { font-size: 1.12rem; color: var(--gk-muted); line-height: 1.5; letter-spacing: 0.03em; }
.gk-form__summary-val { font-family: var(--gk-display); font-size: 2.6rem; font-weight: 500; color: var(--gk-blue); line-height: 1.1; }
.is-flash .gk-form__summary-val { color: var(--gk-red); }
.gk-form__actions { margin-top: 2.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gk-form__actions .gk-btn { width: 100%; }
.gk-form__fine { margin-top: 1.4rem; font-size: 1.02rem; line-height: 1.7; color: #868b96; letter-spacing: 0.02em; }
.gk-form__fine a { color: var(--gk-blue); border-bottom: 1px solid currentColor; }
.gk-form__done { display: none; margin-top: 1.8rem; padding: 1.4rem 1.6rem; border-radius: 0.6rem; background: #eef7ef; color: #25613a; font-size: 1.15rem; line-height: 1.7; letter-spacing: 0.02em; }
.gk-form__done.is-shown { display: block; }
.gk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gk-form__error { display: none; margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-radius: 0.6rem; background: #fdeeee; color: #a4262c; font-size: 1.12rem; line-height: 1.7; letter-spacing: 0.02em; }
.gk-form__error.is-shown { display: block; }
.gk-form__error a { color: inherit; border-bottom: 1px solid currentColor; pointer-events: auto; }
.gk-form.is-sending button[type="submit"] { opacity: 0.6; cursor: wait; }
.gk-form.is-sent .gk-form__sub,
.gk-form.is-sent .gk-form__grid,
.gk-form.is-sent .gk-form__summary,
.gk-form.is-sent .gk-form__actions,
.gk-form.is-sent .gk-form__fine,
.gk-form.is-sent .gk-form__error { display: none; }
.gk-form.is-sent .gk-form__done { font-size: 1.3rem; padding: 2rem; }
@media screen and (max-width: 767px) {
  .gk-order__grid { grid-template-columns: 1fr; gap: 3.4rem; }
  .gk-order__hotline { font-size: 3rem; }
  .gk-form { padding: 2.4rem 1.8rem 2.2rem; }
  .gk-form__ttl { font-size: 1.65rem; }
  .gk-form__grid { grid-template-columns: 1fr; }
  .gk-form__actions { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOWROOM (local SEO)
   ============================================================ */
.gk-stores { margin-top: 4rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2.4rem; align-items: start; }
.gk-stores__col { background: #fff; border: 1px solid var(--gk-line); border-radius: 1rem; padding: 2.4rem 2.6rem; }
.gk-stores__col + .gk-stores__col { display: flex; flex-direction: column; gap: 2.4rem; background: none; border: 0; padding: 0; }
.gk-stores__col + .gk-stores__col > div { background: #fff; border: 1px solid var(--gk-line); border-radius: 1rem; padding: 2.4rem 2.6rem; }
.gk-stores__city { font-family: var(--gk-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.45; color: var(--gk-ink); letter-spacing: 0.03em; padding-bottom: 1rem; border-bottom: 2px solid var(--gk-yellow); }
.gk-stores__list { margin-top: 1.2rem; list-style: none; padding: 0; columns: 2; column-gap: 3rem; }
.gk-stores__col + .gk-stores__col .gk-stores__list { columns: 1; }
.gk-stores__list li { break-inside: avoid; padding: 0.8rem 0; border-bottom: 1px solid var(--gk-line); font-size: 1.15rem; line-height: 1.6; color: var(--gk-ink); letter-spacing: 0.02em; }
.gk-stores__list small { display: block; font-size: 1.02rem; color: var(--gk-muted); }
.gk-stores__more { margin-top: 2.4rem; text-align: center; font-size: 1.2rem; line-height: 1.7; color: var(--gk-muted); letter-spacing: 0.03em; }
.gk-stores__more a { color: var(--gk-blue); border-bottom: 1px solid currentColor; }
@media screen and (max-width: 767px) {
  .gk-stores { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.6rem; }
  .gk-stores__col, .gk-stores__col + .gk-stores__col > div { padding: 1.8rem 1.6rem; }
  .gk-stores__col + .gk-stores__col { gap: 1.4rem; }
  .gk-stores__list { columns: 1; }
}

/* ---------- Bản quyền nhân vật ---------- */
.gk-legal { padding: 2rem var(--vtm-gutter); background: var(--gk-yellow-bg); border-top: 1px solid var(--gk-line); text-align: center; font-size: 1.02rem; line-height: 1.7; color: #7a7666; letter-spacing: 0.02em; }

/* ---------- Toast ---------- */
.gk-toast {
  position: fixed; left: 50%; bottom: 9rem; z-index: 2000; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: calc(100% - 3.2rem); padding: 1.2rem 2rem; border-radius: 0.6rem; background: var(--gk-ink); color: #fff;
  font-size: 1.15rem; line-height: 1.6; letter-spacing: 0.02em; text-align: center; transition: opacity 0.3s ease, transform 0.3s ease;
}
.gk-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }