/* ═══════════════════════════════════════════════════════════════════════════
   site-switch.css — "Bạn muốn học ngôn ngữ khác" (includes/site_switch.php), Đợt 1 · 06/11/2026.
   Bốn chỗ dùng: chân trang khách (.ss--foot), menu ba gạch của khách (.ss--drawer), tấm "Tôi" của học viên (.ss--sheet) — Đợt 1;
   nút chín chấm + ô chọn web trên thanh trên máy tính (.ss-wrap, .ss--popgs cho khách, .ss--poplv cho học viên) — Đợt 2.
   Màu lấy từ khung đang nạp: guest-shell.css (--gs-*) cho khách, learn-shell.css (--lv-*) cho học viên. KHÔNG hex cứng
   (trừ ô logo trắng, có theme-allow). Tệp này giống hệt ở ba web NAVS.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss--foot, .ss--drawer, .ss--popgs {
  --ss-shadow: var(--gs-sh-2);
  --ss-font: var(--gs-font); --ss-ink: var(--gs-ink); --ss-text: var(--gs-text); --ss-muted: var(--gs-muted);
  --ss-line: var(--gs-hair); --ss-border: var(--gs-border); --ss-surface: var(--gs-surface); --ss-sunken: var(--gs-sunken);
  --ss-wash: var(--gs-wash); --ss-brand: var(--gs-brand-deep); --ss-focus: var(--gs-focus);
}
.ss--sheet, .ss--poplv {
  --ss-shadow: var(--lv-sh-3);
  --ss-font: var(--lv-font); --ss-ink: var(--lv-ink); --ss-text: var(--lv-text); --ss-muted: var(--lv-muted);
  --ss-line: var(--lv-hair); --ss-border: var(--lv-border); --ss-surface: var(--lv-surface); --ss-sunken: var(--lv-sunken);
  --ss-wash: var(--lv-wash); --ss-brand: var(--lv-brand-deep); --ss-focus: var(--lv-focus);
}

/* Ô logo: logo thương hiệu viết cho nền sáng ⇒ ô luôn trắng, kể cả giao diện tối. */
.ss__logo {
  flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 148px; height: 52px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--ss-line);
  background: #fff; /* theme-allow: nền trắng cố định cho logo */
}
.ss__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.ss__t { min-width: 0; display: grid; gap: 2px; }
.ss__t b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.ss__t span { font-size: 13.5px; line-height: 1.4; color: var(--ss-muted); }
.ss__h { font-family: var(--ss-font); font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }

/* ── Chân trang khách: hai thẻ ngang nằm giữa lưới link và dải bản quyền ── */
.ss--foot { background: var(--ss-surface); border-top: 1px solid var(--ss-line); font-family: var(--ss-font); }
.ss--foot .ss__in { max-width: 1180px; margin: 0 auto; padding: 24px 24px 26px; }
.ss--foot .ss__h { margin: 0 0 12px; }
.ss--foot .ss__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss__card {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: 16px; border: 1px solid var(--ss-line);
  background: var(--ss-surface); color: var(--ss-text); text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.ss__card:hover { border-color: var(--ss-border); background: var(--ss-wash); text-decoration: none; color: var(--ss-text); }
.ss__card:focus-visible, .ss__row:focus-visible, .ss__tile:focus-visible { outline: none; box-shadow: var(--ss-focus); }

/* ── Menu ba gạch của khách: nhóm nằm trên nút Bắt đầu miễn phí ── */
.ss--drawer { display: grid; gap: 6px; font-family: var(--ss-font); }
.ss--drawer .ss__h { margin: 14px 12px 2px; font-size: 13px; font-weight: 650; color: var(--ss-muted); }
.ss__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: var(--ss-text); }
.ss__row:hover { background: var(--ss-sunken); text-decoration: none; color: var(--ss-text); }
.ss--drawer .ss__logo { width: 104px; height: 40px; padding: 6px 10px; border-radius: 9px; }
.ss--drawer .ss__t b { font-size: 15px; font-weight: 650; }
.ss--drawer .ss__t span { font-size: 13px; }

/* ── Tấm "Tôi" của học viên: hàng hai ô ngay dưới thẻ tên ── */
.ss--sheet { margin-top: 14px; font-family: var(--ss-font); }
.ss--sheet .ss__h { margin: 0 2px 8px; font-size: 14px; color: var(--ss-muted); }
.ss--sheet .ss__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss__tile {
  display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px; border-radius: 16px; background: var(--ss-sunken);
  text-decoration: none; color: var(--ss-ink);
}
.ss__tile:hover { text-decoration: none; color: var(--ss-ink); background: var(--ss-wash); }
.ss--sheet .ss__logo { width: 100%; height: 46px; margin-bottom: 6px; padding: 7px 12px; }
.ss__tile b { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.ss__tile small { font-size: 12.5px; line-height: 1.35; color: var(--ss-muted); }

/* ── Thanh trên máy tính (≥1024px): nút chín chấm, bấm ra ô chọn web. Điện thoại dùng menu ba gạch / tấm "Tôi". ── */
.ss-wrap { position: relative; display: none; flex: none; font-family: var(--ss-font); }
@media (min-width: 1024px) { .ss-wrap { display: inline-flex; } }
.ss-btn svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.ss-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; box-sizing: border-box; width: 348px; padding: 8px; text-align: left;
  border-radius: 18px; border: 1px solid var(--ss-border); background: var(--ss-surface); box-shadow: var(--ss-shadow);
  color: var(--ss-text); font-size: 14px; line-height: 1.4; font-weight: 400;
}
.ss-pop[hidden] { display: none; }
.ss-pop .ss__h { margin: 6px 10px 4px; font-size: 13px; font-weight: 650; color: var(--ss-muted); }
.ss-pop .ss__logo { width: 104px; height: 40px; padding: 6px 10px; border-radius: 9px; }
.ss-pop .ss__row { min-height: 60px; }
.ss-pop .ss__t b { font-size: 15px; font-weight: 650; }
.ss-pop .ss__t span { font-size: 13px; }
.ss-pop .ss__brand, .ss-pop .ss__desc { display: block; }
.ss-pop .ss__sep { display: none; }
.ss-pop__note { margin: 6px 0 0; padding: 10px 10px 4px; border-top: 1px solid var(--ss-line); font-size: 12.5px; line-height: 1.45; color: var(--ss-muted); }

@media (max-width: 640px) {
  .ss--foot .ss__in { padding: 20px 18px 22px; }
  .ss--foot .ss__cards { grid-template-columns: minmax(0, 1fr); }
  /* màn hẹp: tên web và mô tả mỗi thứ một dòng, khỏi gãy giữa cụm "Lấy gốc, IELTS" */
  .ss--foot .ss__sep { display: none; }
  .ss--foot .ss__brand, .ss--foot .ss__desc { display: block; }
}
@media (prefers-reduced-motion: reduce) { .ss__card { transition: none; } }
@media print { .ss, .ss-wrap { display: none !important; } }