/* ============================================================
   LICH KHAI GIANG — port designs/redesign/lkg-2tab-final.html
   (FB 12/07 Đợt 3: giữ 2 tab, giảm màu, tách Ngày|Giờ, khối cuối hồng)
   Token màu dùng từ home-pne.css (--red, --border-s, --ff…); các xám
   trung tính literal theo mockup đã duyệt.
   ============================================================ */

body.lkg-page { background: var(--bg-soft); }

.lkg { padding: 44px 40px 70px; }
.lkg-in { max-width: 1040px; margin: 0 auto; }
.lkg-head { text-align: center; margin-bottom: 4px; padding-top: 4px; }
.lkg-head h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.025em;
}

/* ── NÚT CHUYỂN CHẾ ĐỘ XEM (Tổng quan ⇄ Chi tiết) ─────────── */
.lkg-viewbar { display: flex; justify-content: center; margin: 16px 0 8px; }
.lkg-vtoggle {
  display: inline-flex; gap: 2px;
  background: #fff; border: 1px solid var(--border-s);
  border-radius: 999px; padding: 4px; box-shadow: var(--sh-xs);
}
.lkg-vtoggle a {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 14px var(--ff); color: var(--text-2);
  padding: 9px 22px; border-radius: 999px;
  text-decoration: none; transition: .15s; cursor: pointer;
}
.lkg-vtoggle a.on { background: var(--red); color: #fff; }
.lkg-vtoggle a:focus { outline: none; }
.lkg-vtoggle a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ── FLASH (đã nhận SĐT) ──────────────────────────────────── */
.lkg-flash {
  display: flex; align-items: center; gap: 11px;
  background: var(--green-bg); border: 1px solid #BFE3CC;
  border-left: 4px solid var(--green);
  border-radius: var(--r-m); padding: 13px 17px; margin-bottom: 16px;
  font-size: 13.5px; color: var(--text); line-height: 1.45;
}
.lkg-flash i { font-size: 22px; color: var(--green); flex: none; }
.lkg-flash b { color: #155F2F; }

/* ── FILTERS — 2 dòng, pill cùng cỡ, chọn = hồng nhạt ─────── */
.lkg-filters {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: 16px;
  box-shadow: var(--sh-xs);
  padding: 18px 22px;
  margin: 12px 0 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.lkg-frow { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }
.lkg-fgroup { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lkg-flbl {
  font: 800 11.5px var(--ff);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  width: 92px; flex: none;
}
.lkg-pill {
  appearance: none;
  font: 600 13.5px var(--ff);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-s);
  padding: 8px 20px; border-radius: 999px;
  cursor: pointer; transition: .12s;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.lkg-pill:hover { border-color: #cfcfd1; }
.lkg-pill.on { background: var(--red-light); color: var(--red); border-color: var(--red); font-weight: 700; }
.lkg-fbar-foot { display: flex; justify-content: flex-end; }
.lkg-clear {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 12.5px var(--ff); color: var(--text-2);
  background: var(--bg-soft); border: 1px solid var(--border-s);
  padding: 6px 12px; border-radius: 99px; text-decoration: none; transition: .15s;
}
.lkg-clear:hover { border-color: var(--red-border); color: var(--red); }

[x-cloak] { display: none !important; }

/* ══════════════════════════════════════════════════════════
   HỆ LỚP — pill xám dùng chung (bảng + thẻ), KHÔNG icon
   ══════════════════════════════════════════════════════════ */
/* HỆ LỚP = pill VIỀN (không nền xám đặc) — dùng chung bảng + thẻ.
   Cấp tốc = chữ đỏ + viền hồng nhạt; Thường = chữ ink + viền xám. */
.lkg-he {
  display: inline-block; white-space: nowrap;
  font-weight: 700; font-size: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-s); color: var(--text);
}
.lkg-he.fast { color: var(--red); border-color: var(--red-border); }
.lkg-he.norm { color: var(--text); border-color: var(--border-s); }

/* ══════════════════════════════════════════════════════════
   CHẾ ĐỘ THẺ (Chi tiết) — giảm màu theo mockup
   ══════════════════════════════════════════════════════════ */
.lkg-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.lkg-ccard {
  display: grid; grid-template-columns: 104px 1fr 200px;
  background: #fff; border: 1px solid var(--border-s); border-radius: 16px;
  overflow: hidden; transition: .18s;
}
.lkg-ccard:hover { box-shadow: var(--sh-s); }

/* Ngày khai giảng — badge trái (nhạt) */
.lkg-kg {
  border-right: 1px solid var(--border-s); background: #FCFCFD;
  text-align: center; padding: 16px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lkg-kg .bar { font: 800 10px var(--ff); text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.lkg-kg .dow { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 8px; }
.lkg-kg .d { font-size: 32px; font-weight: 900; line-height: 1; color: var(--text); }
.lkg-kg .mo { font-size: 12px; font-weight: 700; color: var(--text-2); }
.lkg-kg .soon-note { font-size: 11.5px; font-weight: 700; color: var(--text-2); line-height: 1.35; }

.lkg-mid { padding: 18px 20px; min-width: 0; }
.lkg-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lkg-lv { font-size: 17px; font-weight: 800; color: var(--text); }
.lkg-nm { color: var(--text-2); font-size: 13.5px; margin-top: 5px; }

.lkg-fields { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 12px; }
.lkg-fld { display: flex; align-items: baseline; gap: 9px; }
.lkg-fld .k { font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.lkg-fld .v { font-size: 15px; font-weight: 700; color: var(--text); }

.lkg-picker { margin-top: 14px; }
.lkg-picker .pk-k { font-size: 11.5px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.lkg-dates { display: flex; flex-wrap: wrap; gap: 8px; }
.lkg-date {
  border: 1px solid var(--border-s); background: #fff;
  border-radius: 10px; padding: 6px 12px;
  cursor: pointer; text-align: center; min-width: 56px;
  font-family: var(--ff); transition: .15s;
  display: flex; flex-direction: column;
}
.lkg-date .dw { font-size: 10px; font-weight: 700; color: var(--text-3); }
.lkg-date .dd { font-size: 13px; font-weight: 800; color: var(--text); }
.lkg-date:hover { border-color: var(--red-border); }
.lkg-date.sel { border-color: var(--red); background: var(--red-light); }

.lkg-cright {
  border-left: 1px solid var(--border-s); padding: 18px 20px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right;
}
.lkg-price-old { color: var(--text-3); text-decoration: line-through; font-size: 13px; min-height: 16px; }
.lkg-price { font-size: 22px; font-weight: 900; letter-spacing: -.5px; color: var(--text); }
.lkg-price-note { font-size: 11px; font-weight: 700; display: inline-block; margin-top: 4px; padding: 3px 9px; border-radius: 999px; }
.lkg-price-note.disc { color: var(--green); background: var(--green-bg); }
.lkg-price-note.full { color: var(--amber); background: var(--amber-bg); }

.lkg-acts { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 14px; }
.lkg-btn {
  text-align: center; font: 700 13.5px var(--ff);
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: .15s;
}
.lkg-btn-line { background: #fff; border-color: var(--border-s); color: var(--text); }
.lkg-btn-line:hover { border-color: var(--red-border); color: var(--red); }
.lkg-btn-red { background: var(--red); color: #fff; }
.lkg-btn-red:hover { background: var(--red-deep); }

/* ══════════════════════════════════════════════════════════
   CHẾ ĐỘ BẢNG (Tổng quan) — merge cấp tốc, tách Ngày|Giờ
   ══════════════════════════════════════════════════════════ */
.lkg-tablecard {
  background: #fff; border: 1px solid var(--border-s);
  border-radius: 16px; overflow: hidden; box-shadow: var(--sh-xs); margin-top: 16px;
}
.lkg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lkg-table thead th {
  background: #F5F5F6; color: #54545a;
  font: 800 11px var(--ff); letter-spacing: .05em; text-transform: uppercase;
  text-align: left; padding: 13px 16px; border-bottom: 2px solid var(--red);
}
/* dải tiêu đề nhóm trình độ */
.lkg-grp td { background: var(--red-light); padding: 9px 16px; }
.lkg-grp .g { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 800; font-size: 13.5px; }
.lkg-grp .lvb { background: var(--red); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 7px; }
.lkg-grp small { color: var(--text-2); font-weight: 600; font-size: 12px; }

.lkg-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-s); vertical-align: middle; }
.lkg-table tbody tr.lkg-last td { border-bottom: none; }
/* Ô gộp (rowspan): Cấp độ · Hệ lớp · Ngày học — canh giữa dọc, nền nhạt tách khối */
.lkg-capcell { background: #FCFCFD; border-right: 1px solid var(--border-s); vertical-align: middle; }
.lkg-cap { font-weight: 800; font-size: 15px; color: var(--text); }
.lkg-hecell { vertical-align: middle; }
.lkg-day { font-weight: 700; white-space: nowrap; color: var(--text); vertical-align: middle; }
.lkg-time { color: var(--text-2); white-space: nowrap; }

/* Ngày khai giảng — chip BẤM ĐỂ CHỌN (không điều hướng); hiện đủ đợt (wrap). Đợt chọn = đỏ đặc. */
.lkg-dchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lkg-dchip {
  appearance: none; cursor: pointer; font-family: var(--ff);
  font-size: 12.5px; font-weight: 700; padding: 5px 11px;
  border-radius: 7px; border: 1px solid var(--border-s); color: var(--text-2);
  background: #fff; transition: .12s;
}
.lkg-dchip:hover { border-color: var(--red-border); color: var(--red); }
.lkg-dchip.sel { background: var(--red); color: #fff; border-color: var(--red); }
.lkg-dmore { font-size: 11.5px; color: var(--text-2); }

/* nút Đăng ký — dạng viền (giảm "tường nút đỏ") */
.lkg-reg {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--red);
  font: 700 12.5px var(--ff); padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--red-border); text-decoration: none; white-space: nowrap; transition: .12s;
}
.lkg-reg:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── TRẠNG THÁI RỖNG + form thu SĐT ───────────────────────── */
.lkg-empty {
  text-align: center; color: var(--text-2);
  padding: 40px 24px;
  background: #fff; border: 1px solid var(--border-s); border-radius: var(--r-l);
  margin-top: 16px;
}
.lkg-empty-lead { max-width: 460px; margin: 14px auto 0; }
.lkg-empty-lead p { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 14px; }
.lkg-leadform { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lkg-leadform input[type="text"],
.lkg-leadform input[type="tel"] {
  flex: 1; min-width: 150px;
  font: 500 14px var(--ff); color: var(--text);
  background: #fff; border: 1px solid var(--border-s);
  border-radius: 10px; padding: 11px 14px;
}
.lkg-leadform input:focus { outline: none; border-color: var(--red); }
.lkg-leadform button {
  font: 700 13.5px var(--ff); color: #fff; background: var(--red);
  border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: .15s;
}
.lkg-leadform button:hover { background: var(--red-deep); }
.lkg-empty-or { font-size: 12.5px; color: var(--text-2); margin-top: 12px; }
.lkg-empty-or a { color: var(--red); font-weight: 700; }

/* ── KHỐI CUỐI "Cần tư vấn thêm?" — nền hồng + Hotline + form ── */
.lkg-help {
  margin-top: 26px;
  background: var(--red-light); border: 1px solid var(--red-border);
  border-radius: 14px; padding: 20px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.lkg-help .tx { flex: 1; min-width: 240px; }
.lkg-help .tx b { font-size: 17px; font-weight: 800; color: var(--text); display: block; }
.lkg-help .tx span { display: block; color: var(--text-2); font-size: 13.5px; margin-top: 3px; }
.lkg-help .tx .hot { color: var(--red); font-weight: 800; text-decoration: none; }
.lkg-hform { display: flex; gap: 10px; flex-wrap: wrap; }
.lkg-hform input {
  border: 1px solid var(--border-s); border-radius: 10px;
  padding: 11px 15px; font: 500 16px var(--ff); min-width: 190px; background: #fff; color: var(--text);   /* #115: 14→16, iOS không zoom */
}
.lkg-hform input:focus { outline: none; border-color: var(--red); }
.lkg-hform button {
  background: var(--red); color: #fff; font: 700 14px var(--ff);
  padding: 11px 22px; border-radius: 10px; border: none; cursor: pointer; transition: .15s;
}
.lkg-hform button:hover { background: var(--red-deep); }

@media (max-width: 860px) {
  .lkg-ccard { grid-template-columns: 84px 1fr; }
  .lkg-cright {
    grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border-s);
    flex-direction: row; justify-content: space-between; align-items: center; text-align: left;
  }
  .lkg-acts { flex-direction: row; width: auto; margin-top: 0; }
  .lkg-tablecard { overflow-x: auto; }
  .lkg-table { min-width: 760px; }
  .lkg-flbl { width: auto; }
}

@media (max-width: 760px) {
  .lkg { padding: 32px 16px 54px; }
  .lkg-help { flex-direction: column; align-items: stretch; }
  .lkg-hform input { min-width: 0; flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   P1(B) — LKG "Tổng quan" MOBILE: đầu trang gọn + thẻ (port lkg-mobile-card.html)
   Mặc định ẩn (desktop dùng bảng + bộ lọc đầy đủ). Bật ở ≤640px.
   ══════════════════════════════════════════════════════════════════ */
.lkg-mfilter { display: none; }
.lkg-mcards { display: none; }

@media (max-width: 640px) {
  /* Mobile BỎ tab Tổng quan/Chi tiết — chỉ hiện thẻ mới (lkg-mcards).
     Ẩn thanh chuyển tab + 2 view desktop (bảng + lkg-list); thẻ mcards luôn hiện. */
  .lkg-viewbar { display: none; }
  .lkg-list { display: none; }
  .lkg-tablecard { display: none; }
  .lkg-mcards { display: flex; flex-direction: column; gap: 14px; }

  /* P1-3 (audit): ĐÃ GỠ rule cũ `.lkg-filters{display:none}` + `.lkg-filters.open{display:flex}`.
     Panel bộ lọc nay do Alpine `x-show="filtersOpen"` điều khiển (không còn class .open). Rule cũ
     ép display:none ở ≤640 ĐÈ x-show → khi mở, x-show trả display về stylesheet=none nên panel KHÔNG
     hiện dưới 640px (mở được ở desktop vì base .lkg-filters=flex). Gỡ đi để x-show hoạt động mọi bề rộng. */

  /* ── Đầu trang gọn ── */
  .lkg-mfilter { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 16px; }
  .lkg-mf-mode {
    display: flex; gap: 5px; background: #fff; border-radius: 999px; padding: 5px;
    box-shadow: var(--sh-s); border: 1px solid var(--border-s);
  }
  .lkg-mf-tg {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-weight: 700; font-size: 15px; color: var(--text-2); padding: 11px; border-radius: 999px;
    text-decoration: none;
  }
  .lkg-mf-tg.on { background: var(--red); color: #fff; }
  .lkg-mf-levels {
    display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border-radius: 16px; padding: 12px;
    box-shadow: var(--sh-s); border: 1px solid var(--border-s);
  }
  .lkg-mf-lv {
    border: 1px solid var(--border-s); background: #fff; border-radius: 999px;
    font-weight: 700; font-size: 14.5px; padding: 8px 16px; color: var(--text); text-decoration: none;
  }
  .lkg-mf-lv.on { background: var(--red); color: #fff; border-color: var(--red); }
  .lkg-mf-cnt { display: flex; align-items: center; justify-content: space-between; }
  .lkg-mf-cnt .n { font-weight: 700; font-size: 15px; color: var(--text); }
  .lkg-mf-btn {
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--red); color: var(--red);
    background: #fff; font-family: var(--ff); font-weight: 700; font-size: 15px; padding: 9px 18px;
    border-radius: 999px; cursor: pointer;
  }

  /* ── Thẻ ── */
  .lkg-mc {
    background: #fff; border: 1px solid var(--border-s); border-radius: 18px; padding: 20px;
    box-shadow: var(--sh-s);
  }
  .lkg-mc-top { display: flex; align-items: center; gap: 12px; }
  .lkg-mc-lv { font-size: 28px; font-weight: 900; letter-spacing: -.02em; color: var(--text); }
  .lkg-mc-he {
    border: 1px solid var(--red-border); color: var(--red); background: #fff;
    font-weight: 700; font-size: 12.5px; padding: 5px 13px; border-radius: 999px;
  }
  .lkg-mc-he.norm { border-color: var(--border-s); color: var(--text); }
  .lkg-mc-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 15px; }
  .lkg-mc-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--text); }
  .lkg-mc-meta i { color: var(--red); font-size: 17px; }
  .lkg-mc-kglbl { color: var(--text-2); font-size: 14.5px; margin: 17px 0 10px; }
  .lkg-mc-dates { display: flex; flex-wrap: wrap; gap: 10px; }
  .lkg-mc-dc {
    position: relative; border: 1px solid var(--border-s); background: #fff; border-radius: 12px;
    padding: 10px 6px; text-align: center; min-width: 72px; flex: 1;
    font-family: var(--ff); cursor: pointer;
  }
  .lkg-mc-dc .d { display: block; font-size: 16.5px; font-weight: 800; color: var(--text); }
  .lkg-mc-dc .sub { display: block; font-size: 11px; color: var(--text-3); font-weight: 700; margin-top: 1px; }
  .lkg-mc-dc.sel { border: 1.5px solid var(--red); }
  .lkg-mc-dc.sel .d { color: var(--red); }
  .lkg-mc-dc.sel .sub { color: var(--red); }
  .lkg-mc-dc .chk {
    position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px;
  }
  .lkg-mc-hr { height: 1px; background: var(--border-s); margin: 18px 0; }
  .lkg-mc-price .old { color: var(--text-3); text-decoration: line-through; font-size: 16px; }
  .lkg-mc-price .row { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
  /* ⚠️ Số tiền (giá mới) để ĐEN theo yêu cầu chủ dự án (không đỏ) */
  .lkg-mc-price .new { font-size: 30px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
  .lkg-mc-price .save {
    background: var(--green-bg); color: var(--green); font-weight: 700; font-size: 12.5px;
    padding: 5px 12px; border-radius: 999px;
  }
  .lkg-mc-soon { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
  .lkg-mc-reg {
    display: block; width: 100%; text-align: center; background: var(--red); color: #fff;
    font-weight: 800; font-size: 16px; padding: 14px; border-radius: 12px; border: none;
    margin-top: 16px; text-decoration: none;
  }
  /* ⚠️ "Xem chi tiết khóa học" để ĐEN (gạch chân), không đỏ */
  .lkg-mc-detail {
    display: block; text-align: center; color: var(--text); font-weight: 700; font-size: 14.5px;
    text-decoration: underline; text-underline-offset: 3px; margin-top: 15px;
  }
  .lkg-mc-detail i { text-decoration: none; margin-left: 3px; }
}

/* ══════════════════════════════════════════════════════════════════
   LKG 1 TRANG (port designs/redesign/lkg-1trang.html) — thay bảng/tab cũ.
   ══════════════════════════════════════════════════════════════════ */
.lkg-sub { color: var(--text-2); font-size: 15px; margin-top: 6px; }

/* (1) Thanh lọc 1 dòng */
.lkg1-fbar {
  background: #fff; border: 1px solid var(--border-s); border-radius: 14px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px;
}
.lkg1-seg { display: flex; gap: 8px; }
.lkg1-seg .p {
  border: 1px solid var(--border-s); background: #fff; border-radius: 999px;
  font: 700 15px var(--ff); color: var(--text); height: 44px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; transition: .15s;
}
.lkg1-seg .p.on { background: var(--red); color: #fff; border-color: var(--red); }
.lkg1-divv { width: 1px; height: 26px; background: var(--border-s); margin: 0 2px; }
.lkg1-lvls { display: flex; gap: 8px; flex-wrap: wrap; }
.lkg1-lvls .lv {
  border: 1px solid var(--border-s); background: #fff; border-radius: 999px;
  font: 700 15px var(--ff); color: var(--text); height: 44px; min-width: 64px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: .15s;
}
.lkg1-lvls .lv.on { background: var(--red-light); color: var(--red); border-color: var(--red); }
.lkg1-lvsel { display: none; }   /* (#10) dropdown trình độ — CHỈ hiện ≤640px (xem media query dưới) */
.lkg1-filt {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-s); color: var(--text); background: #fff;
  font: 700 15px var(--ff); height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
}
.lkg1-filt:hover { border-color: var(--text-3); }
.lkg-filters-adv { margin-top: 4px; }

/* (2) Tiêu đề nhóm */
.lkg1-grp-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 22px 0 14px; }
.lkg1-grp-h h2 { font-size: 22px; font-weight: 800; text-transform: uppercase; }
.lkg1-glink { margin-left: auto; color: var(--red); font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.lkg1-glink:hover { text-decoration: underline; }

/* ══ LKG v4 — MỌI LỚP = 1 HÀNG NGANG full-width, xếp chồng (port lkg-1trang-v4.html) ══ */
.lkg1-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }

.lkg1-row {
  display: grid; grid-template-columns: 250px 1fr 320px; gap: 26px; align-items: stretch;
  background: #fff; border: 1px solid var(--border-s); border-radius: 18px; box-shadow: var(--sh-s);
  padding: 20px 24px; transition: .16s;
}
.lkg1-row.fast { border-color: var(--red-border); }
/* (4) Hover: viền đỏ + đổ hồng nhẹ + nhấc nhẹ */
.lkg1-row:hover { border-color: var(--red); box-shadow: var(--sh-m); transform: translateY(-2px); background: linear-gradient(180deg, #fff, #FFF7F7); }

/* TRÁI */
.lkg1-rhead { display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.lkg1-rtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lkg1-lv { font-size: 26px; font-weight: 900; letter-spacing: -.5px; line-height: 1; }
.lkg1-he { border: 1.4px solid var(--border-s); color: var(--text-2); background: #fff; font: 700 12px var(--ff); padding: 4px 13px; border-radius: 999px; white-space: nowrap; }
.lkg1-he.fast { border-color: var(--red); color: var(--red); background: var(--red-light); }
/* LKG v5: badge tuần ở ĐẦU THẺ ẨN trên desktop (số tuần dời xuống dòng thời lượng);
   mobile ≤900px hiện lại như cũ (xem media query cuối file). */
.lkg1-dur { display: none; align-items: center; gap: 5px; border: 1px solid var(--border-s); background: #fff; color: var(--text); font: 700 12.5px var(--ff); padding: 5px 11px; border-radius: 999px; }
.lkg1-dur i { color: var(--red); font-size: 15px; }
.lkg1-hpk { font: 800 10px var(--ff); letter-spacing: 1px; color: var(--text-3); text-transform: uppercase; margin-bottom: 3px; }
.lkg1-price-old { color: var(--text-3); text-decoration: line-through; font-size: 12.5px; }
.lkg1-price-line { display: flex; align-items: center; gap: 9px; margin-top: 1px; }
.lkg1-price-new { font-size: 21px; font-weight: 800; letter-spacing: -.5px; line-height: 1; color: var(--text); }
.lkg1-save { background: var(--green-bg); color: var(--green); font: 800 11px var(--ff); padding: 3px 9px; border-radius: 999px; }

/* Nhãn cột nhỏ */
.lkg1-pk { color: var(--text-2); font: 800 11px var(--ff); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
/* #154: hậu tố năm ở tiêu đề cột "NGÀY KHAI GIẢNG · 2026" — mờ hơn nhãn để không lấn, cùng cỡ chữ. */
.lkg1-yr { color: var(--text-3); }

/* GIỮA — dropdown chọn ca */
.lkg1-rmid { border-left: 1px solid var(--border-s); border-right: 1px solid var(--border-s); padding: 0 24px; display: flex; flex-direction: column; justify-content: center; }
.lkg1-casel { position: relative; }
select.lkg1-ca {
  appearance: none; width: 100%; max-width: 100%; box-sizing: border-box; font-family: var(--ff); font-weight: 700; font-size: 16px; color: var(--text);   /* #115: 14→16, iOS không zoom */
  background: #fff; border: 1.5px solid var(--border-s); border-radius: 12px; padding: 13px 40px 13px 14px; cursor: pointer; transition: border-color .14s;   /* #131: bỏ transition:all trên select (giật mobile) */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* #161 (7.5): nhãn ca dài (…11h30) cụt chữ @390px → cắt gọn bằng dấu … thay vì cụt giữa glyph */
}
select.lkg1-ca:hover { border-color: var(--red-border); }
select.lkg1-ca:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-light); }
.lkg1-casel::after {
  content: ''; position: absolute; right: 17px; top: 46%; width: 8px; height: 8px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
.lkg1-casub { color: var(--text-3); font: 600 12.5px var(--ff); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.lkg1-casub i { color: var(--red); font-size: 14px; }
/* LKG v5 (desktop): số tuần đậm+đen ở đầu dòng thời lượng · dấu phân cách xám nhạt */
.lkg1-casub .lkg1-wk { color: var(--text); font-weight: 800; }
.lkg1-casub .lkg1-sep { color: #d7d7da; margin: 0 -1px 0 2px; }
.lkg1-ci-mob { display: none; }

/* PHẢI — ngày + nút */
.lkg1-rright { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
/* #14 DESKTOP — LƯỚI 5 CỘT BẰNG NHAU: chip tự co, luôn vừa khít, không bao giờ bị xén.
   ≤5 đợt hiện hết; >5 đợt = 4 chip + nút "+N ▾", bung phần còn lại xuống hàng 2 (cùng lưới). */
.lkg1-dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: stretch; padding-top: 9px; }
/* #149-2: khối ngày render sẵn ở server (SEO + no-JS). display:contents → chip con vẫn nằm đúng lưới/flex
   của .lkg1-dates; Alpine ẩn khối này (x-show="false") ngay khi tiếp quản, khối động hiện thay. */
.lkg1-dates-ssr { display: contents; }
.lkg1-soon { color: var(--text-2); font: 600 13px var(--ff); grid-column: 1 / -1; }
.lkg1-dc { position: relative; border: 1px solid var(--border-s); background: #fff; border-radius: 10px; padding: 8px 2px; text-align: center; font: 700 13px var(--ff); color: var(--text); min-width: 0; cursor: pointer; overflow: visible; white-space: nowrap; }
.lkg1-dc.sel { border: 1.5px solid var(--red); color: var(--red); }
.lkg1-dc-x { display: none; }   /* chip thứ 5 trở đi — ẩn khi chưa bung (desktop) */
.lkg1-dc .tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font: 800 8.5px var(--ff); letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; white-space: nowrap; text-transform: uppercase; }
.lkg1-more { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--text-3); border-radius: 10px; padding: 8px 2px; color: var(--text-2); font: 700 12.5px var(--ff); min-width: 0; background: #fff; cursor: pointer; white-space: nowrap; }
.lkg1-more:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.lkg1-more.open { border-style: solid; border-color: var(--red); color: var(--red); background: var(--red-light); }
.lkg1-reg { display: block; width: 100%; text-align: center; background: #fff; color: var(--red); border: 1.6px solid var(--red); border-radius: 999px; font: 800 15px var(--ff); padding: 12px; cursor: pointer; text-decoration: none; box-shadow: none; transition: background .15s, color .15s; }
.lkg1-reg:hover { background: var(--red); color: #fff; }
/* #76: lớp đã đầy — badge xám (không dùng đỏ CTA) + nút Đăng ký khoá lại (không bấm được). */
.lkg1-full { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 5px 12px; border-radius: 999px; background: var(--bg-alt); color: var(--text-2); font: 800 12.5px var(--ff); border: 1px solid var(--border-s); }
.lkg1-reg.off { background: var(--bg-alt); color: var(--text-2); border-color: var(--border-s); cursor: not-allowed; pointer-events: none; }
.lkg1-reg.off:hover { background: var(--bg-alt); color: var(--text-2); }

/* (5) DESKTOP ONLY — ≤900px stack 1 cột (như mobile); không sửa gì riêng mobile. */
@media (max-width: 900px) {
  .lkg1-row { grid-template-columns: 1fr; gap: 16px; }
  .lkg1-rmid { border: none; padding: 0; }
  /* FIX TRÀN NGANG MOBILE: khi card xếp 1 cột, các ô là grid-item với min-width:auto mặc định →
     KHÔNG co được dưới bề rộng nội dung (dòng ngày nhiều chip / select ca dài) → đẩy cả trang
     rộng hơn viewport (cuộn ngang toàn site). min-width:0 để ô co đúng cột + dòng ngày cuộn nội bộ. */
  .lkg1-rhead, .lkg1-rmid, .lkg1-rright, .lkg1-dates { min-width: 0; }
  /* LKG v5: mobile GIỮ NGUYÊN bản v4 — badge tuần ở đầu thẻ + dòng thời lượng dùng icon lịch,
     KHÔNG lặp số tuần ở dòng dưới. */
  .lkg1-dur { display: inline-flex; }
  .lkg1-casub .lkg1-wk, .lkg1-casub .lkg1-sep { display: none; }
  .lkg1-ci-desk { display: none; }
  .lkg1-ci-mob { display: inline; }
}
@media (max-width: 640px) {
  .lkg1-divv { display: none; }

  /* (#10-C) Gom bộ lọc về 1 DÒNG bằng GRID cố định (auto | 1fr | auto) → không bao giờ tràn:
     [segmented Offline/Online] · [dropdown trình độ co giãn] · [nút ⚙ Bộ lọc]. Ẩn dãy pill. */
  .lkg1-fbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; padding: 10px 12px; align-items: center; }
  .lkg1-lvls { display: none; }
  .lkg1-lvsel { display: block; width: 100%; min-width: 0; height: 40px; border: 1px solid var(--border-s); border-radius: 999px; padding: 0 10px; font: 700 16px var(--ff); color: var(--text); background: #fff; }   /* #115: 12.5→16, iOS không zoom */
  .lkg1-seg { gap: 6px; }
  .lkg1-seg .p { height: 40px; padding: 0 11px; font-size: 12.5px; gap: 5px; }
  /* (Lỗi 1) BỎ icon Offline/Online trên mobile → nhường chỗ cho dropdown trình độ hiện đủ chữ.
     Desktop giữ icon (rule này chỉ trong @media ≤640). */
  .lkg1-seg .p i { display: none; }
  /* Bộ lọc thu về icon ⚙ (font-size:0 ẩn chữ) để gọn trên màn hẹp */
  .lkg1-filt { height: 40px; width: 40px; padding: 0; margin: 0; font-size: 0; justify-content: center; }
  .lkg1-filt i { font-size: 18px; }

  /* (#10-D) Bỏ chip "8 tuần" đầu thẻ; số tuần về ĐẦU dòng thời lượng (như desktop v5) */
  .lkg1-dur { display: none; }
  .lkg1-casub .lkg1-wk, .lkg1-casub .lkg1-sep { display: inline; }
  .lkg1-ci-desk { display: inline; }
  .lkg1-ci-mob { display: none; }

  /* (#10-E) Ngày khai giảng cuộn ngang, không xuống hàng / không cắt cụt.
     Mobile KHÔNG dùng lưới 5 cột (#14 chỉ desktop): trả lại flex cuộn, HIỆN HẾT chip, ẩn nút bung.
     (Lỗi 2) padding-top 12px: vùng cuộn ngang (overflow-x:auto → overflow-y cũng auto) đang cắt tag
     "GẦN NHẤT" nhô lên (top:-9px). Chừa 12px phía trên để tag hiện đủ, không bị xén. */
  .lkg1-dates { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 12px; padding-bottom: 4px; }
  .lkg1-dc { flex: 0 0 auto; min-width: 62px; padding: 9px 6px; font-size: 13.5px; }
  .lkg1-dc-x { display: inline-block; }   /* mobile: bỏ ẩn — cuộn xem hết */
  .lkg1-more { display: none; }
}

/* #126: chip NGÀY KHAI GIẢNG ≥44px vùng chạm trên mobile (min-height, không đổi cỡ chữ). */
@media (max-width: 900px) {
  .lkg1-dc, .lkg-mc-dc, .lkg-date, .lkg-dchip { min-height: 44px; box-sizing: border-box; }
}