/* ================================================================
   Gia Sư Cần Thơ – Tutor Portal  |  Production CSS
   Mobile-first, WCAG AA, system-font stack
   ================================================================ */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --clr-primary:      #1d4ed8;
  --clr-primary-dark: #1e3a8a;
  --clr-primary-light:#eff6ff;
  --clr-accent:       #f59e0b;
  --clr-success:      #16a34a;
  --clr-danger:       #dc2626;
  --clr-warning:      #d97706;

  --clr-bg:           #f8fafc;
  --clr-surface:      #ffffff;
  --clr-border:       #e2e8f0;
  --clr-border-focus: #3b82f6;

  --clr-text:         #0f172a;
  --clr-text-muted:   #64748b;
  --clr-text-faint:   #94a3b8;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  --shadow-xs:  0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.1), 0 1px 2px rgba(15,23,42,.06);
  --shadow-md:  0 4px 6px -1px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-lg:  0 10px 15px -3px rgba(15,23,42,.1), 0 4px 6px -4px rgba(15,23,42,.06);
  --shadow-xl:  0 20px 25px -5px rgba(15,23,42,.15), 0 8px 10px -6px rgba(15,23,42,.1);

  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: .18s cubic-bezier(.4,0,.2,1);
}

/* ── Reset helpers ──────────────────────────────────────────────── */
.tutor-login-page *,
.tutor-portal * { box-sizing: border-box; }


/* ══════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════════ */

.tutor-login-page {
  min-height: 100vh;
  background: linear-gradient(145deg, #0c1d3e 0%, #1d4ed8 55%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  font-family: var(--font);
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.tutor-login-page::before,
.tutor-login-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .25;
  pointer-events: none;
}
.tutor-login-page::before {
  width: 400px; height: 400px;
  background: #60a5fa;
  top: -100px; left: -100px;
}
.tutor-login-page::after {
  width: 300px; height: 300px;
  background: #a78bfa;
  bottom: -80px; right: -60px;
}

.tutor-login-wrap {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.tutor-login-card {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2.25rem;
  box-shadow: var(--shadow-xl);
}

/* Logo */
.tutor-login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}
.tutor-login-logo img {
  height: 48px;
  width: auto;
}

/* Heading */
.tutor-login-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-text);
  text-align: center;
  margin: 0 0 .375rem;
  letter-spacing: -.02em;
}
.tutor-login-sub {
  font-size: .875rem;
  color: var(--clr-text-muted);
  text-align: center;
  margin: 0 0 1.75rem;
}

/* Alert */
.tutor-login-alert {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.tutor-login-alert::before { font-size: 1rem; flex-shrink: 0; }
.tutor-login-alert--error   { background: #fef2f2; color: var(--clr-danger);  border: 1px solid #fecaca; }
.tutor-login-alert--error::before   { content: '✕'; }
.tutor-login-alert--success { background: #f0fdf4; color: var(--clr-success); border: 1px solid #bbf7d0; }
.tutor-login-alert--success::before { content: '✓'; }
.tutor-login-alert--info    { background: #eff6ff; color: var(--clr-primary); border: 1px solid #bfdbfe; }
.tutor-login-alert--info::before    { content: 'ℹ'; }

/* Form fields */
.tl-field { margin-bottom: 1.1rem; }
.tl-field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .4rem;
  letter-spacing: .01em;
}
.tl-field input {
  width: 100%;
  padding: .65rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: var(--font);
  color: var(--clr-text);
  background: #fafafa;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
}
.tl-field input:hover  { border-color: #cbd5e1; background: var(--clr-surface); }
.tl-field input:focus  {
  border-color: var(--clr-border-focus);
  background: var(--clr-surface);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.tl-field input::placeholder { color: var(--clr-text-faint); }

/* Password toggle */
.tl-pass-wrap { position: relative; }
.tl-pass-wrap input { padding-right: 3rem; }
.tl-toggle-pass {
  position: absolute;
  right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer;
  color: var(--clr-text-faint);
  padding: .25rem;
  border-radius: 4px;
  display: flex; align-items: center;
  transition: color var(--transition);
}
.tl-toggle-pass:hover   { color: var(--clr-text-muted); }
.tl-toggle-pass:focus-visible { outline: 2px solid var(--clr-border-focus); }

/* Submit button */
.tutor-login-btn {
  width: 100%;
  padding: .75rem 1.25rem;
  margin-top: .25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #2563eb 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 12px rgba(29,78,216,.35);
}
.tutor-login-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,78,216,.4); }
.tutor-login-btn:active:not(:disabled){ transform: translateY(0); box-shadow: 0 2px 6px rgba(29,78,216,.3); }
.tutor-login-btn:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .7s linear infinite; }

/* Bottom links */
.tutor-login-links {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  font-size: .8125rem;
  color: var(--clr-text-muted);
}
.tutor-login-links a {
  color: var(--clr-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}
.tutor-login-links a:hover { color: var(--clr-primary-dark); text-decoration: underline; }
.tutor-login-links .sep { color: var(--clr-border); }


/* ══════════════════════════════════════════════════════════════════
   PORTAL LAYOUT  (mobile-first)
   ══════════════════════════════════════════════════════════════════ */

.tutor-portal {
  min-height: 100vh;
  background: var(--clr-bg);
  font-family: var(--font);
  color: var(--clr-text);
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.tp-topbar {
  background: #0c1d3e;
  color: #fff;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  height: 56px;
  display: flex;
  align-items: center;
}
.tp-topbar .container { width: 100%; }
.tp-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 56px;
}
.tp-topbar__brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-weight: 800;
  font-size: .9375rem;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.tp-topbar__brand img { height: 28px; width: auto; flex-shrink: 0; }
.tp-topbar__brand span { overflow: hidden; text-overflow: ellipsis; }

.tp-topbar__user {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .875rem;
  min-width: 0;
}
.tp-topbar__user .tp-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  font-weight: 500;
  opacity: .9;
}
.tp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  flex-shrink: 0;
  object-fit: cover;
}
.tp-logout-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  padding: .3rem .75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition);
  cursor: pointer;
}
.tp-logout-btn:hover { background: rgba(255,255,255,.22); }

/* ── Shell: sidebar + content ───────────────────────────────────── */
.tp-shell {
  display: flex;
  min-height: calc(100vh - 56px);
}

/* Sidebar */
.tp-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--clr-surface);
  border-right: 1px solid var(--clr-border);
  padding: 1.25rem 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  transition: transform var(--transition);
}

.tp-sidebar__section {
  padding: 0 .75rem;
  margin-bottom: .25rem;
}
.tp-sidebar__label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-text-faint);
  padding: .75rem .625rem .375rem;
  display: block;
}

.tp-nav-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 500;
  color: var(--clr-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.tp-nav-item:hover { background: var(--clr-primary-light); color: var(--clr-primary); }
.tp-nav-item--active {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  font-weight: 700;
}
.tp-nav-item--active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--clr-primary);
  border-radius: 0 3px 3px 0;
}
.tp-nav-item svg { flex-shrink: 0; opacity: .7; }
.tp-nav-item--active svg { opacity: 1; }

.tp-nav-badge {
  margin-left: auto;
  background: var(--clr-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

/* Mobile: sidebar as bottom nav */
@media (max-width: 767px) {
  .tp-shell { flex-direction: column; }
  .tp-sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    border-right: none;
    border-top: 1px solid var(--clr-border);
    padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: row;
    gap: .25rem;
    z-index: 100;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--clr-surface);
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  }
  .tp-sidebar__section { display: contents; padding: 0; }
  .tp-sidebar__label   { display: none; }
  .tp-nav-item {
    flex-direction: column;
    gap: .2rem;
    padding: .4rem .625rem;
    font-size: .625rem;
    border-radius: var(--radius-sm);
    flex: 1;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
  .tp-nav-item::before { display: none; }
  .tp-nav-item span.tp-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tp-nav-badge { position: absolute; top: .25rem; right: .25rem; }

  .tp-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* Topbar: hide wordmark, keep icon only — logo + name + logout no longer
     fit side by side on narrow phones (was overlapping) */
  .tp-topbar__brand span { display: none; }
}

/* Content area */
.tp-content {
  flex: 1;
  padding: 1.5rem 1rem;
  min-width: 0;
  max-width: 1080px;
}
@media (min-width: 768px) {
  .tp-content { padding: 2rem 2.5rem; }
}

/* Panel */
.tp-panel { display: none; }
.tp-panel--active { display: block; }

/* ── Page header ────────────────────────────────────────────────── */
.tp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.tp-page-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-text);
  margin: 0 0 .25rem;
  letter-spacing: -.02em;
}
.tp-page-sub {
  font-size: .875rem;
  color: var(--clr-text-muted);
  margin: 0;
}

/* ── Stats bar ──────────────────────────────────────────────────── */
.tp-stats {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.tp-stat-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  flex: 1;
  min-width: 130px;
  display: flex;
  align-items: center;
  gap: .875rem;
  box-shadow: var(--shadow-xs);
}
.tp-stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tp-stat-icon--blue,
.tp-stat-icon--green,
.tp-stat-icon--amber  { background: var(--clr-primary-light); color: var(--clr-primary); }
.tp-stat-num  { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--clr-text); }
.tp-stat-label{ font-size: .75rem; color: var(--clr-text-muted); margin-top: .15rem; }

/* ── Filter bar ─────────────────────────────────────────────────── */
.tp-filter-bar {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: var(--shadow-xs);
}
.tp-search-wrap {
  flex: 1;
  min-width: 160px;
  position: relative;
}
.tp-search-wrap svg {
  position: absolute;
  left: .75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-faint);
  pointer-events: none;
}
.tp-search {
  width: 100%;
  padding: .55rem .875rem .55rem 2.25rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-family: var(--font);
  color: var(--clr-text);
  background: #fafafa;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.tp-search:focus { border-color: var(--clr-border-focus); box-shadow: 0 0 0 3px rgba(59,130,246,.15); background: #fff; }
.tp-select {
  padding: .55rem .875rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-family: var(--font);
  color: var(--clr-text);
  background: #fafafa;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.tp-select:focus { border-color: var(--clr-border-focus); }

.tp-filter-count {
  font-size: .8125rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
  margin-left: auto;
}
.tp-filter-count strong { color: var(--clr-text); font-weight: 700; }

/* ── Class grid ─────────────────────────────────────────────────── */
.tp-class-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 540px)  { .tp-class-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .tp-class-grid { grid-template-columns: repeat(3, 1fr); } }

.tp-class-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tp-class-card:hover {
  border-color: var(--clr-text-faint);
  box-shadow: var(--shadow-sm);
}

/* Card header */
.tp-class-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tp-class-code {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-text-faint);
}

.tp-cap-badge {
  font-size: .6875rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
  background: var(--clr-bg);
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
}

/* Card body */
.tp-class-subject {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.3;
}

.tp-class-info {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8125rem;
  color: var(--clr-text-muted);
}
.tp-class-info li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
}
.tp-class-info svg { flex-shrink: 0; margin-top: 1px; opacity: .6; }
.tp-class-fee { font-weight: 600; color: var(--clr-text); }

.tp-class-note {
  font-size: .8rem;
  color: var(--clr-text-muted);
  font-style: italic;
  margin: 0;
  padding: .5rem .625rem;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.4;
}

/* Card footer */
.tp-class-card__foot {
  margin-top: auto;
  padding-top: .875rem;
  border-top: 1px solid #f1f5f9;
}

/* ── Application list ───────────────────────────────────────────── */
.tp-app-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.tp-app-item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition);
}
.tp-app-item:hover { border-color: #cbd5e1; }
.tp-app-item--approved  { border-left: 4px solid var(--clr-success); }
.tp-app-item--rejected  { border-left: 4px solid var(--clr-danger); opacity: .75; }
.tp-app-item--pending   { border-left: 4px solid var(--clr-warning); }
.tp-app-item--day_thu   { border-left: 4px solid #0ea5e9; }
.tp-app-item--teaching  { border-left: 4px solid var(--clr-primary); }
.tp-app-item--completed { border-left: 4px solid var(--clr-text-faint); opacity: .8; }
.tp-app-item--cancelled { border-left: 4px solid #7c2d12; opacity: .75; }

.tp-app-item__main { flex: 1; min-width: 0; }
.tp-app-code {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-text-faint);
  display: inline-block;
  margin-bottom: .375rem;
}
.tp-app-subject { font-size: .9375rem; font-weight: 700; color: var(--clr-text); }
.tp-app-addr    { font-size: .8125rem; color: var(--clr-text-muted); margin-top: .15rem; }

.tp-app-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .375rem;
  flex-shrink: 0;
}
.tp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .625rem;
  border-radius: 99px;
}
.tp-status-pill--pending   { background: #fef3c7; color: #92400e; }
.tp-status-pill--approved  { background: #dcfce7; color: #14532d; }
.tp-status-pill--rejected  { background: #fee2e2; color: #7f1d1d; }
.tp-status-pill--day_thu   { background: #e0f2fe; color: #075985; }
.tp-status-pill--teaching  { background: #dbeafe; color: #1e3a8a; }
.tp-status-pill--completed { background: #f1f5f9; color: #475569; }
.tp-status-pill--cancelled { background: #fee2e2; color: #7c2d12; }
.tp-status-pill::before { content: '●'; font-size: .5rem; }
.tp-app-date { font-size: .75rem; color: var(--clr-text-faint); }

.tp-proposal-pending {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .625rem;
  border-radius: 99px;
  background: #fef3c7;
  color: #92400e;
}
.tp-cancel-pending {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .625rem;
  border-radius: 99px;
  background: #fee2e2;
  color: #7f1d1d;
}

/* ── Profile 2-col layout ────────────────────────────────────────── */
.tp-profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.25rem;
}
@media (min-width: 900px) {
  .tp-profile-layout { grid-template-columns: 1fr 284px; }
}
.tp-profile-layout .tp-profile-wrap { max-width: none; }

.tp-profile-aside-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 900px) {
  .tp-profile-aside { position: sticky; top: calc(56px + 1.5rem); }
}

.tp-aside-missing {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.tp-aside-missing li {
  font-size: .8rem;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.tp-aside-missing li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-warning);
  flex-shrink: 0;
}
.tp-aside-profile-btn {
  width: 100%;
  justify-content: center;
  margin-top: 1.1rem;
  display: flex;
  gap: .4rem;
}

/* ── Profile form ───────────────────────────────────────────────── */
.tp-profile-wrap  { max-width: 640px; }

.tp-profile-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
}

.tp-profile-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--clr-border);
}
.tp-profile-hero img {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--clr-border);
  object-fit: cover;
  flex-shrink: 0;
}
.tp-profile-hero-info h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .25rem; }
.tp-profile-hero-info p  { font-size: .875rem; color: var(--clr-text-muted); margin: 0; }

.tp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 480px) { .tp-field-row { grid-template-columns: 1fr; } }

.tp-field { margin-bottom: 1rem; }
.tp-field:last-child { margin-bottom: 0; }
.tp-field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .4rem;
}
.tp-field label small { font-weight: 400; color: var(--clr-text-faint); }
.tp-field input,
.tp-field textarea,
.tp-field select {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: var(--font);
  color: var(--clr-text);
  background: #fafafa;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  resize: vertical;
}
.tp-field input:focus,
.tp-field textarea:focus {
  border-color: var(--clr-border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  background: var(--clr-surface);
}
.tp-field input:disabled {
  background: #f8fafc;
  color: var(--clr-text-faint);
  cursor: not-allowed;
}
.tp-field small { display: block; font-size: .8rem; color: var(--clr-text-faint); margin-top: .3rem; }

.tp-profile-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  outline: none;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.3); }

.btn--primary {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
  box-shadow: 0 2px 8px rgba(29,78,216,.25);
  padding: .6rem 1.25rem; font-size: .9rem;
}
.btn--primary:hover:not(:disabled) { background: #1e40af; border-color: #1e40af; box-shadow: 0 4px 12px rgba(29,78,216,.35); }

.btn--outline {
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  border-color: var(--clr-border);
  padding: .6rem 1.25rem; font-size: .9rem;
}
.btn--outline:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; color: var(--clr-text); }

.btn--danger {
  background: #fef2f2;
  color: var(--clr-danger);
  border-color: #fecaca;
  padding: .6rem 1.25rem; font-size: .9rem;
}
.btn--danger:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; }

.btn--success {
  background: var(--clr-success);
  color: #fff;
  border-color: var(--clr-success);
  padding: .6rem 1.25rem; font-size: .9rem;
}
.btn--success:hover:not(:disabled) { background: #15803d; border-color: #15803d; }

.btn--full    { width: 100%; }
.btn--sm      { padding: .4rem .875rem; font-size: .8125rem; }
.btn--xs      { padding: .25rem .625rem; font-size: .75rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Modal ──────────────────────────────────────────────────────── */
.tp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 500;
  padding: 0;
  animation: fadeOverlay .2s ease;
}
@keyframes fadeOverlay { from { opacity: 0; } }

@media (min-width: 480px) {
  .tp-modal-overlay { align-items: center; padding: 1rem; }
}

.tp-modal {
  background: var(--clr-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slideUp .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp { from { transform: translateY(60px); opacity: 0; } }

@media (min-width: 480px) {
  .tp-modal {
    border-radius: var(--radius-xl);
    padding: 2rem;
    animation: scaleIn .2s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes scaleIn { from { transform: scale(.9); opacity: 0; } }
}

.tp-modal-handle {
  width: 36px; height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  margin: 0 auto 1.25rem;
  display: block;
}
@media (min-width: 480px) { .tp-modal-handle { display: none; } }

.tp-modal h3 { font-size: 1.125rem; font-weight: 800; color: var(--clr-text); margin: 0 0 .5rem; }
.tp-modal p  { font-size: .9rem; color: var(--clr-text-muted); margin: 0 0 1.25rem; line-height: 1.5; }
.tp-modal-note { font-size: .8125rem; color: var(--clr-text-faint); background: var(--clr-bg); border-radius: var(--radius-md); padding: .625rem .875rem; }
.tp-modal-actions { display: flex; gap: .625rem; margin-top: 1.25rem; flex-wrap: wrap; }
.tp-modal-actions .btn { flex: 1; }

/* ── Empty state ────────────────────────────────────────────────── */
.tp-empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--clr-text-faint);
}
.tp-empty-state svg { opacity: .3; margin-bottom: .875rem; }
.tp-empty-state h3 { font-size: 1rem; font-weight: 700; color: var(--clr-text-muted); margin: 0 0 .5rem; }
.tp-empty-state p  { font-size: .875rem; margin: 0; }

/* ── Skeleton loader ────────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}
.tp-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}
.tp-skeleton-card {
  height: 220px;
  border-radius: var(--radius-lg);
}

/* ── Toast ──────────────────────────────────────────────────────── */
.tp-toast-wrap {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .tp-toast-wrap { bottom: 1.5rem; right: 1.5rem; left: auto; transform: none; align-items: flex-end; }
}
.tp-toast {
  background: #1e293b;
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: .625rem;
  animation: toastIn .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events: all;
  max-width: 340px;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.95); } }
.tp-toast--success { background: #14532d; }
.tp-toast--error   { background: #7f1d1d; }
.tp-toast-dismiss  {
  background: none; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; padding: 0 0 0 .25rem; font-size: 1rem;
}

/* ================================================================
   Profile Gia Sư — tpp-* (public page)
   Thiết kế theo phong cách Preply/TutorOcean
   ================================================================ */

/* ── Base ─────────────────────────────────────────────────────── */
.tpp-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F8FAFC;
  min-height: 100vh;
  padding: 2rem 0 5rem;
}
.tpp-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── 70/30 layout ─────────────────────────────────────────────── */
.tpp-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px)  { .tpp-body { grid-template-columns: 1fr 360px; } }
@media (min-width: 1100px) { .tpp-body { grid-template-columns: 1fr 400px; } }

/* ── Left column ─────────────────────────────────────────────── */
.tpp-main { display: flex; flex-direction: column; gap: 24px; }

/* ── Generic section card ─────────────────────────────────────── */
.tpp-section {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.tpp-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: #111827;
}

/* ═══════════════════════════════════════════════════════════════
   S1 — HERO
   ═══════════════════════════════════════════════════════════════ */
.tpp-hero {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.tpp-hero-inner {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}
@media (max-width: 640px) {
  .tpp-hero { padding: 24px; }
  .tpp-hero-inner { flex-direction: column; align-items: center; }
  .tpp-hero-body  { text-align: center; }
}

/* Avatar */
.tpp-avatar-wrap { position: relative; flex-shrink: 0; }
.tpp-avatar {
  width: 160px; height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #E5E7EB;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  display: block;
}
.tpp-online-dot {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 20px; height: 20px;
  background: #22C55E;
  border: 3px solid #fff;
  border-radius: 50%;
}

/* Name & subtitle */
.tpp-hero-body { flex: 1; min-width: 0; }
.tpp-name-row  {
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .4rem;
}
.tpp-name {
  font-size: 3rem; font-weight: 700;
  margin: 0; color: #111827; line-height: 1.1;
}
@media (max-width: 640px) { .tpp-name { font-size: 2rem; } }

.tpp-verified-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: #2563EB; color: #fff;
  border-radius: 50%; font-size: 1.1rem; font-weight: 800;
  flex-shrink: 0; line-height: 1;
}
.tpp-subtitle {
  font-size: 1.375rem; color: #6B7280;
  margin: 0 0 1.25rem; font-weight: 400;
}
@media (max-width: 640px) { .tpp-subtitle { font-size: 1rem; } }

/* Value proposition card */
.tpp-vp-card {
  display: flex; align-items: flex-start; gap: .75rem;
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 1.75rem;
}
.tpp-vp-emoji { font-size: 1.5rem; flex-shrink: 0; line-height: 1; margin-top: .05rem; }
.tpp-vp-text  {
  margin: 0; font-size: 1rem;
  color: #15803D; font-weight: 500; line-height: 1.65;
}

/* Stats row */
.tpp-stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
@media (max-width: 640px) { .tpp-stats-row { gap: 1rem 1.5rem; justify-content: center; } }
.tpp-stat-item  { display: flex; flex-direction: row; align-items: flex-start; gap: .5rem; }
.tpp-stat-icon  { font-size: 1.375rem; line-height: 1.2; flex-shrink: 0; }
.tpp-stat-text  { display: flex; flex-direction: column; gap: .05rem; }
.tpp-stat-value { font-size: 1.375rem; font-weight: 800; color: #111827; line-height: 1.2; }
.tpp-stat-label { font-size: .75rem; color: #6B7280; font-weight: 400; }
@media (max-width: 640px) {
  .tpp-stat-value { font-size: 1.125rem; }
  .tpp-stat-label { font-size: .7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   S2 — VERIFIED BADGES
   ═══════════════════════════════════════════════════════════════ */
.tpp-badges-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 600px) { .tpp-badges-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.tpp-badge-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px;
  min-height: 90px;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s;
}
.tpp-badge-card:hover {
  border-color: #2563EB;
  box-shadow: 0 4px 20px rgba(37,99,235,.1);
}
.tpp-badge-icon { flex-shrink: 0; }
.tpp-badge-body { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tpp-badge-body strong { font-size: .88rem; font-weight: 700; color: #111827; line-height: 1.3; word-break: break-word; }
.tpp-badge-body span   { font-size: .75rem; color: #6B7280; }

/* ═══════════════════════════════════════════════════════════════
   S3 — SUBJECTS
   ═══════════════════════════════════════════════════════════════ */
.tpp-subject-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .tpp-subject-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .tpp-subject-grid { grid-template-columns: repeat(2, 1fr); } }

.tpp-subject-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 24px 16px;
  min-height: 220px;
  display: flex; flex-direction: column;
  align-items: center; gap: .75rem;
  text-align: center;
  cursor: default;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tpp-subject-card:hover {
  border-color: #2563EB;
  box-shadow: 0 8px 24px rgba(37,99,235,.1);
  transform: translateY(-3px);
}
.tpp-subj-icon-wrap {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tpp-subject-name { font-size: .95rem; font-weight: 700; color: #111827; line-height: 1.3; }
.tpp-subject-sub  { font-size: .78rem; color: #6B7280; line-height: 1.45; }
.tpp-subj-dts {
  display: flex; flex-wrap: wrap; gap: .25rem;
  justify-content: center; margin-top: .2rem;
}
.tpp-subj-dt-pill {
  background: #EFF6FF; color: #3B82F6;
  border: 1px solid #BFDBFE;
  border-radius: 99px;
  padding: .1rem .55rem;
  font-size: .63rem; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   S4 — REVIEWS
   ═══════════════════════════════════════════════════════════════ */
.tpp-praise-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tpp-praise-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 99px;
  padding: .5rem 1rem;
  font-size: .88rem; font-weight: 500; color: #374151;
  cursor: default;
  transition: border-color .15s, background .15s;
}
.tpp-praise-tag:hover { border-color: #9CA3AF; }
.tpp-praise-tag--active {
  background: #EFF6FF; border-color: #2563EB; color: #2563EB;
}
.tpp-praise-count {
  background: #E5E7EB; color: #374151;
  border-radius: 99px; padding: .05rem .5rem;
  font-size: .75rem; font-weight: 700;
}
.tpp-praise-tag--active .tpp-praise-count { background: #DBEAFE; color: #2563EB; }

.tpp-reviews-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 3rem 1rem;
  background: #F9FAFB; border-radius: 16px; text-align: center;
}
.tpp-reviews-empty p { font-size: .88rem; color: #9CA3AF; margin: 0; max-width: 300px; }

/* ═══════════════════════════════════════════════════════════════
   S5 — GIỚI THIỆU
   ═══════════════════════════════════════════════════════════════ */
.tpp-intro-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.75rem;
}
@media (min-width: 640px) { .tpp-intro-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

.tpp-bio {
  font-size: .95rem; line-height: 1.85; color: #374151;
}
.tpp-bio--collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpp-expand-btn {
  background: none; border: none;
  color: #2563EB; font-size: .88rem; font-weight: 600;
  cursor: pointer; padding: .5rem 0 0;
  display: flex; align-items: center; gap: .25rem;
}
.tpp-expand-btn:hover { text-decoration: underline; }

.tpp-achievement-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.tpp-achievement-bullets li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .95rem;
}
.tpp-ach-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #F0FDF4; border: 1.5px solid #86EFAC;
  border-radius: 50%; color: #16A34A;
  font-weight: 800; font-size: .72rem;
  flex-shrink: 0; margin-top: 2px;
}
.tpp-achievement-bullets li span:last-child { color: #374151; line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════
   S6 — PHƯƠNG PHÁP + HỌC VIÊN
   ═══════════════════════════════════════════════════════════════ */
.tpp-method-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 640px) { .tpp-method-grid { grid-template-columns: 1fr 1fr; } }

.tpp-method-card {
  background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 16px; padding: 28px;
}
.tpp-method-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; font-weight: 700; margin: 0 0 1.25rem; color: #111827;
}
.tpp-checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .75rem;
}
.tpp-checklist li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; color: #374151;
}
.tpp-check-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-weight: 800; font-size: .65rem;
  flex-shrink: 0; margin-top: 2px;
}
.tpp-check-icon--blue  { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.tpp-check-icon--green { background: #F0FDF4; color: #16A34A; border: 1px solid #86EFAC; }

/* ═══════════════════════════════════════════════════════════════
   S7 — INFO BAR
   ═══════════════════════════════════════════════════════════════ */
.tpp-info-bar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (min-width: 640px) { .tpp-info-bar { grid-template-columns: repeat(4, 1fr); } }

.tpp-info-item {
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: 16px; padding: 20px 16px;
  min-height: 100px;
  display: flex; align-items: center; gap: .875rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.tpp-info-icon { font-size: 1.5rem; flex-shrink: 0; }
.tpp-info-body { display: flex; flex-direction: column; gap: .2rem; }
.tpp-info-label { font-size: .7rem; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tpp-info-val   { font-size: .9rem; font-weight: 600; color: #111827; line-height: 1.4; }

/* Video */
.tpp-video-wrap {
  position: relative; padding-bottom: 56.25%;
  height: 0; overflow: hidden; border-radius: 16px;
}
.tpp-video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.tpp-sidebar-col {}
.tpp-sidebar-sticky {
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 900px) {
  .tpp-sidebar-sticky { position: sticky; top: 24px; }
}
.tpp-sidebar-card {
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

/* Price block */
.tpp-price-block { margin-bottom: 1.25rem; }
.tpp-price {
  font-size: 2.125rem; font-weight: 800;
  color: #2563EB; line-height: 1.1;
}
.tpp-price span { font-size: .9rem; font-weight: 400; color: #6B7280; }
.tpp-price--thoa { font-size: 1.2rem; color: #6B7280; font-weight: 400; }
.tpp-price-alt {
  font-size: .88rem; color: #374151;
  margin-top: .5rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.tpp-price-alt small { font-size: .75rem; color: #6B7280; }

/* Trial box */
.tpp-trial-box {
  display: flex; align-items: center; gap: .75rem;
  background: #FFFBEB; border: 1px solid #FCD34D;
  border-radius: 12px; padding: 14px 16px;
  margin-bottom: 1rem;
}
.tpp-trial-box > span { font-size: 1.25rem; flex-shrink: 0; }
.tpp-trial-box > div { display: flex; flex-direction: column; gap: .1rem; }
.tpp-trial-box strong { font-weight: 700; color: #92400E; font-size: .9rem; }
.tpp-trial-box span:last-child { color: #B45309; font-size: .76rem; }

/* CTA buttons */
.tpp-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; border-radius: 14px;
  font-size: 1rem; font-weight: 600;
  text-decoration: none; border: none;
  cursor: pointer; margin-bottom: .75rem;
  transition: opacity .15s, box-shadow .15s;
  font-family: inherit;
}
.tpp-cta:last-of-type { margin-bottom: 0; }
.tpp-cta--primary {
  background: #2563EB; color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
.tpp-cta--primary:hover { opacity: .9; }
.tpp-cta--secondary {
  background: #fff; color: #2563EB;
  border: 2px solid #2563EB;
}
.tpp-cta--secondary:hover { background: #EFF6FF; }

/* Quick info card */
.tpp-qi-card { padding: 20px 24px; }
.tpp-qi-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 0;
  border-bottom: 1px solid #F3F4F6;
}
.tpp-qi-item:last-child { border-bottom: none; padding-bottom: 0; }
.tpp-qi-item:first-child { padding-top: 0; }
.tpp-qi-item svg { flex-shrink: 0; }
.tpp-qi-item div { display: flex; flex-direction: column; gap: .1rem; }
.tpp-qi-label { font-size: .76rem; color: #9CA3AF; font-weight: 500; }
.tpp-qi-val   { font-size: .9rem; font-weight: 600; color: #111827; }

/* Calendar */
.tpp-cal-heading { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: #111827; }
.tpp-cal-header  {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: .75rem;
}
.tpp-cal-month { font-size: .92rem; font-weight: 700; color: #111827; }
.tpp-cal-nav {
  background: #F3F4F6; border: none;
  border-radius: 8px; width: 28px; height: 28px;
  cursor: pointer; font-size: .8rem; color: #374151;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.tpp-cal-nav:hover { background: #E5E7EB; }
.tpp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.tpp-cal-dow {
  text-align: center; font-size: .64rem;
  font-weight: 600; color: #9CA3AF; padding: .25rem 0;
}
.tpp-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: .78rem; font-weight: 500;
}
.tpp-cal-day--full    { background: #F3F4F6; color: #9CA3AF; }
.tpp-cal-day--avail   { background: #2563EB; color: #fff; cursor: pointer; font-weight: 700; }
.tpp-cal-day--avail:hover { background: #1D4ED8; }
.tpp-cal-day--today   { outline: 2px solid #F59E0B; outline-offset: -2px; }
.tpp-cal-day--selected{ outline: 2px solid #22C55E; outline-offset: -2px; }

/* Time slots */
.tpp-time-slots { margin-top: 1rem; }
.tpp-slots-label {
  font-size: .72rem; font-weight: 600; color: #6B7280;
  margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .05em;
}
.tpp-slots-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.tpp-slot-btn {
  background: #F9FAFB; border: 1.5px solid #E5E7EB;
  border-radius: 10px; padding: .45rem .875rem;
  font-size: .82rem; font-weight: 600; color: #374151;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
}
.tpp-slot-btn:hover { border-color: #2563EB; background: #EFF6FF; color: #2563EB; }

/* Achievements sidebar */
.tpp-ach-heading { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: #111827; }
.tpp-ach-list    { display: flex; flex-direction: column; gap: .875rem; }
.tpp-ach-row     { display: flex; align-items: center; gap: .75rem; }
.tpp-ach-em      { font-size: 1.25rem; flex-shrink: 0; }
.tpp-ach-row div { display: flex; flex-direction: column; gap: .1rem; }
.tpp-ach-row strong { font-size: .88rem; font-weight: 600; color: #111827; line-height: 1.3; }

/* ================================================================
   DASHBOARD — Tab Hồ Sơ  (pf-* và subj-*)
   ================================================================ */

/* ── Profile hero card ─────────────────────────────────────────── */
.pf-hero-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs);
}
.pf-hero-avatar-wrap { position: relative; flex-shrink: 0; }
.pf-hero-avatar {
  width: 72px; height: 72px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--clr-primary-light);
  box-shadow: var(--shadow-sm);
  display: block;
}
.pf-hero-online {
  position: absolute; bottom: 3px; right: 3px;
  width: 13px; height: 13px;
  background: var(--clr-success);
  border-radius: 50%; border: 2px solid #fff;
}
.pf-hero-body { flex: 1; min-width: 0; }
.pf-hero-name {
  font-size: 1.125rem; font-weight: 700; color: var(--clr-text);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .2rem;
}
.pf-hero-trust {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600;
  padding: .175rem .5rem; border-radius: 99px;
}
.pf-hero-trust--verified { background: var(--clr-primary-light); color: var(--clr-primary); }
.pf-hero-trust--expert   { background: #f0fdf4; color: var(--clr-success); }
.pf-hero-headline { font-size: .875rem; color: var(--clr-text-muted); margin-bottom: .5rem; }
.pf-hero-headline--empty { font-style: italic; color: var(--clr-text-faint); }
.pf-hero-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.pf-hero-link {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .8rem; color: var(--clr-primary); text-decoration: none; font-weight: 500;
}
.pf-hero-link:hover { text-decoration: underline; }
.pf-hero-link--muted { color: var(--clr-text-muted); }
.pf-hero-link--cv { color: var(--clr-success); }

/* ── Profile completeness ──────────────────────────────────────── */
.pf-completeness {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding: .875rem 1.25rem;
  margin-bottom: 1.25rem; box-shadow: var(--shadow-xs);
}
.pf-completeness__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .5rem;
}
.pf-completeness__label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8125rem; font-weight: 600; color: var(--clr-text);
}
.pf-completeness__pct { font-size: .95rem; font-weight: 700; }
.pf-completeness__pct--green { color: var(--clr-success); }
.pf-completeness__pct--blue  { color: var(--clr-primary); }
.pf-completeness__pct--amber { color: var(--clr-warning); }
.pf-completeness__track {
  height: 7px; background: var(--clr-border);
  border-radius: 99px; overflow: hidden; margin-bottom: .45rem;
}
.pf-completeness__fill {
  height: 100%; border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.pf-completeness__fill--green { background: var(--clr-success); }
.pf-completeness__fill--blue  { background: var(--clr-primary); }
.pf-completeness__fill--amber { background: var(--clr-accent); }
.pf-completeness__hint {
  font-size: .775rem; color: var(--clr-text-muted);
  margin: 0; display: flex; align-items: center; gap: .25rem;
}
.pf-completeness__hint--done { color: var(--clr-success); font-weight: 500; }

/* ── Form section wrappers ─────────────────────────────────────── */
.pf-section { padding: 1.375rem 0; border-bottom: 1px solid var(--clr-border); }
.pf-section--last { border-bottom: none; }
.pf-section-hd {
  display: flex; align-items: center; gap: .625rem; margin-bottom: 1.125rem;
}
.pf-section-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
}
.pf-section-icon--blue   { background: var(--clr-primary-light); color: var(--clr-primary); }
.pf-section-icon--purple { background: #f3f0ff; color: #7c3aed; }
.pf-section-icon--green  { background: #f0fdf4; color: var(--clr-success); }
.pf-section-icon--amber  { background: #fffbeb; color: var(--clr-warning); }
.pf-section-icon--teal   { background: #f0fdfa; color: #0d9488; }
.pf-section-icon--gray   { background: #f8fafc; color: var(--clr-text-muted); }
.pf-section-icon--shield { background: #eff6ff; color: var(--clr-primary); }
.pf-section-title { font-size: .9375rem; font-weight: 700; color: var(--clr-text); }

/* Kept for verify card section label fallback */
.pf-section-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--clr-text-muted); border-bottom: 1px solid var(--clr-border);
  padding-bottom: .35rem; margin-bottom: .85rem;
}

/* ── Checkboxes (hình thức dạy) ────────────────────────────────── */
.pf-checkbox-group { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: .375rem; }
.pf-checkbox-item  { display: flex; align-items: center; gap: .35rem; font-weight: 400; cursor: pointer; font-size: .875rem; }

/* ── Xác thực tài liệu (Nhóm C) ───────────────────────────────── */
.pf-verify-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .9rem; border-radius: 99px;
  font-size: .8125rem; font-weight: 600; margin-bottom: .75rem;
}
.pf-verify-badge--gray   { background:#f1f5f9; color:#64748b; }
.pf-verify-badge--yellow { background:#fef3c7; color:#92400e; }
.pf-verify-badge--green  { background:#dcfce7; color:#166534; }
.pf-verify-badge--red    { background:#fee2e2; color:#991b1b; }
.pf-verify-reason { font-size:.825rem; color:#dc2626; margin:.25rem 0 .75rem; }

.pf-doc-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:.5rem 0 .5rem; }
@media(max-width:480px){ .pf-doc-grid { grid-template-columns:1fr; } }
.pf-doc-group { border:1.5px solid var(--clr-border); border-radius:var(--radius-md); padding:.875rem; display:flex; flex-direction:column; gap:.375rem; }
.pf-doc-group__name { font-weight:600; font-size:.875rem; }
.pf-doc-group__hint { font-size:.775rem; color:var(--clr-text-muted); }
.pf-doc-group__row  { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.375rem; }
@media(max-width:360px){ .pf-doc-group__row { grid-template-columns:1fr; } }
.pf-doc-group .pf-doc-box { border-color:var(--clr-border); background:#fafafa; padding:.625rem .75rem; }
.pf-doc-box {
  border:1.5px solid var(--clr-border); border-radius:var(--radius-md);
  padding:.875rem; display:flex; flex-direction:column; gap:.375rem;
}
.pf-doc-box__title  { font-weight:600; font-size:.875rem; }
.pf-doc-box__hint   { font-size:.775rem; color:var(--clr-text-muted); }
.pf-doc-box__state  { font-size:.775rem; color:var(--clr-text-muted); }
.pf-doc-box__state--ok { color:#16a34a; font-weight:600; }
.pf-doc-upload-label {
  display:inline-flex; align-items:center; gap:.35rem;
  cursor:pointer; margin-top:.25rem; font-size:.8125rem; padding:.3rem .75rem;
}
.pf-doc-uploading { display:flex; align-items:center; gap:.4rem; font-size:.8125rem; color:var(--clr-text-muted); margin-top:.25rem; }
.pf-doc-note { font-size:.775rem; color:var(--clr-text-muted); margin:.25rem 0 0; }

/* ── Nhóm B: Subject picker ────────────────────────────────────── */
.subj-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  min-height: 2rem; margin-bottom: .75rem;
}
.subj-tags__empty { color: var(--clr-text-muted); font-size: .875rem; font-style: italic; }
.subj-tag {
  display: inline-flex; align-items: center; gap: .375rem;
  background: #eff6ff; color: #2563eb;
  border: 1px solid #bfdbfe; border-radius: 99px;
  padding: .25rem .75rem; font-size: .8125rem; line-height: 1.4;
}
.subj-tag__rm {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: 1.1rem; line-height: 1; padding: 0; opacity: .65;
}
.subj-tag__rm:hover { opacity: 1; }

.subj-picker {
  border: 1px solid var(--clr-border); border-radius: var(--radius-md);
  padding: .875rem 1rem; margin-top: .375rem; background: #fafafa;
}
.subj-step {
  display: flex; align-items: center; gap: .5rem;
  color: var(--clr-text-muted); font-size: .8rem; font-weight: 600;
  margin-bottom: .5rem; margin-top: .625rem;
}
.subj-step:first-child { margin-top: 0; }
.subj-step__num {
  width: 1.375rem; height: 1.375rem;
  background: var(--clr-primary); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.subj-pills { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .25rem; }
.subj-pill {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 99px;
  padding: .3rem .8rem; font-size: .8125rem; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s; line-height: 1.4;
}
.subj-pill:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.subj-pill--active { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
.subj-pill--selected { background: #dcfce7; border-color: #16a34a; color: #15803d; }
.subj-pill--active.subj-pill--selected { background: #15803d; border-color: #15803d; color: #fff; }
.subj-pill--custom { border-style: dashed; color: var(--clr-text-muted); }
.subj-pill--custom:hover, .subj-pill--custom.subj-pill--active { border-style: solid; }
.subj-custom-wrap { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.subj-custom-row  { display: flex; gap: .5rem; flex-wrap: wrap; }
.subj-custom-row input { flex: 1 1 140px; min-width: 0; padding: .4rem .65rem; font-size: .875rem;
  border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); background: #fff; }
.subj-custom-row input:focus { outline: none; border-color: var(--clr-primary); }
.subj-dt-checks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-bottom: .25rem; }
.subj-dt-label { display: flex; align-items: center; gap: .35rem; font-size: .875rem; cursor: pointer; font-weight: 400; }
.subj-dt-label input { accent-color: var(--clr-primary); }
.tpp-ach-row span   { font-size: .74rem; color: #6B7280; }

/* ════════════════════════════════════════════════════════════
   Availability Scheduler  (.av-*)  v2 — Modern SaaS
   ════════════════════════════════════════════════════════════ */
.pf-section-icon--indigo { background: #eef2ff; color: #4f46e5; }

/* Card override — scheduler section gets elevated card look */
.pf-section--calendar {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  border: 1px solid #F1F5F9;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem;
}

/* Toolbar */
.av-toolbar {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
}
.av-btn {
  padding: .375rem .8rem;
  border: 1.5px solid #E2E8F0; border-radius: 20px;
  background: #fff; cursor: pointer;
  font-size: .8125rem; font-weight: 500; color: #374151;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  user-select: none; white-space: nowrap; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.av-btn:hover {
  background: #F8FAFC; border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.av-btn--primary { background: #2563EB; color: #fff; border-color: #2563EB; }
.av-btn--primary:hover { background: #1D4ED8; border-color: #1D4ED8; box-shadow: 0 2px 8px rgba(37,99,235,.3); }
.av-btn--danger  { color: #EF4444; border-color: #FECACA; background: #fff; }
.av-btn--danger:hover  { background: #FEF2F2; border-color: #FCA5A5; }

/* Hint */
.av-hint { font-size: .8125rem; color: #64748B; margin: 0 0 .875rem; line-height: 1.55; }

/* Grid wrapper */
.av-grid-wrap {
  overflow: auto; max-height: 468px;
  border-radius: 12px; border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); cursor: default;
}

/* Grid */
.av-grid {
  display: grid;
  grid-template-columns: 46px repeat(7, minmax(32px, 1fr));
  min-width: 272px;
  user-select: none; -webkit-user-select: none;
}

/* Corner — sticky top+left */
.av-corner {
  position: sticky; top: 0; left: 0; z-index: 4;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  border-right:  1px solid #E2E8F0;
}

/* Day headers — sticky top */
.av-day-hd {
  position: sticky; top: 0; z-index: 3;
  background: #F8FAFC; text-align: center;
  font-size: .75rem; font-weight: 700; color: #475569;
  padding: .55rem .25rem;
  border-bottom: 1px solid #E2E8F0;
  border-right:  1px solid #E2E8F0;
  cursor: pointer; letter-spacing: .01em;
  transition: background .12s, color .12s;
}
.av-day-hd:last-child { border-right: none; }
.av-day-hd:hover { background: #EFF6FF; color: #2563EB; }
.av-day-hd--all  { background: #DBEAFE !important; color: #1D4ED8 !important; }

/* Hour labels — sticky left, clickable */
.av-hour-label {
  position: sticky; left: 0; z-index: 2;
  font-size: .6875rem; color: #94A3B8; font-weight: 500;
  padding: 0 .5rem; height: 34px;
  display: flex; align-items: center; justify-content: flex-end;
  background: #F8FAFC;
  border-bottom: 1px solid #F1F5F9;
  border-right:  1px solid #E2E8F0;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.av-hour-label:hover { background: #EFF6FF; color: #2563EB; }
.av-hour-label--zone { border-top: 2px solid #E2E8F0; }
.av-hour-label--all  { background: #DBEAFE !important; color: #1D4ED8 !important; }

/* Cells */
.av-cell {
  height: 34px;
  border-right:  1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  background: #F8FAFC; cursor: pointer;
  transition: background .15s ease; position: relative;
}
.av-cell:last-child { border-right: none; }
.av-cell--zone { border-top: 2px solid #E2E8F0; }

/* Peak hours (17–21h) subtle warm tint when unselected */
.av-cell--peak { background: #FEFCE8; }
.av-cell--peak:hover:not(.av-cell--on):not(.av-cell--preview) { background: #FEF08A; }

/* Hover */
.av-cell:hover:not(.av-cell--on):not(.av-cell--preview):not(.av-cell--peak) { background: #DCFCE7; }

/* Drag preview */
.av-cell--preview { background: #BBF7D0 !important; }

/* Selected */
.av-cell--on {
  background: #22C55E !important;
  transition: background .15s ease;
}
.av-cell--on:hover { background: #16A34A !important; }
.av-cell--on::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
  color: rgba(255,255,255,.75); line-height: 1; pointer-events: none;
}

/* Stats footer */
.av-footer {
  margin-top: .875rem;
  min-height: 1.75rem;
  display: flex; align-items: center;
}
.av-footer__empty {
  font-size: .8125rem; color: #94A3B8; font-style: italic;
}
.av-footer__stats {
  font-size: .875rem; color: #374151;
  display: flex; align-items: center; gap: .375rem;
}
.av-footer__stats strong {
  color: #16A34A; font-size: 1rem; font-weight: 700;
}

@media (max-width: 520px) {
  .av-grid { grid-template-columns: 38px repeat(7, minmax(26px, 1fr)); min-width: 222px; }
  .av-cell, .av-hour-label { height: 30px; }
  .av-hour-label { font-size: .6rem; padding: 0 .2rem; }
  .av-day-hd { font-size: .6875rem; padding: .45rem .15rem; }
  .av-btn { padding: .3rem .6rem; font-size: .75rem; }
  .av-cell--on::after { font-size: .5rem; }
}

/* ── Mini read-only grid (profile page) ── */
.av-mini {
  display: grid;
  grid-template-columns: 20px repeat(7, 1fr);
  gap: 1px; background: #E2E8F0;
  border-radius: 8px; overflow: hidden;
}
.av-mini-corner, .av-mini-hd {
  background: #F8FAFC; text-align: center;
  padding: 3px 1px; font-weight: 700; color: #475569; font-size: .625rem;
}
.av-mini-label {
  background: #F8FAFC; text-align: right;
  padding-right: 3px; min-height: 10px; font-size: .5rem; color: #94A3B8;
  display: flex; align-items: center; justify-content: flex-end;
}
.av-mini-cell { background: #F1F5F9; min-height: 10px; }
.av-mini-cell--on { background: #22C55E; }
.tpp-cal-note  { font-size: .75rem; color: #64748B; margin: .625rem 0 0; line-height: 1.4; }
.tpp-cal-empty { font-size: .8125rem; color: #9CA3AF; text-align: center; padding: 1rem 0; margin: 0; }

/* ════════════════════════════════════════════════════════════
   Public Tutor Availability Card  (.tpp-av-*)
   ════════════════════════════════════════════════════════════ */

/* Card */
.tpp-av-card { padding: 1.125rem !important; }

/* Header */
.tpp-av-hd {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: .75rem; margin-bottom: 1rem;
}
.tpp-av-title {
  font-size: .9375rem; font-weight: 700; color: #1E293B;
  margin: 0 0 .2rem; line-height: 1.3;
}
.tpp-av-sub { font-size: .75rem; color: #64748B; margin: 0; line-height: 1.4; }

.tpp-av-view-btn {
  flex-shrink: 0;
  padding: .35rem .7rem;
  border: 1.5px solid #E2E8F0; border-radius: 8px;
  background: #fff; font-size: .75rem; font-weight: 500;
  color: #475569; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.tpp-av-view-btn:hover { background: #F8FAFC; border-color: #94A3B8; color: #1E293B; }

/* Day list */
.tpp-av-list { display: flex; flex-direction: column; gap: .5rem; }

.tpp-av-day {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .5rem 0;
  border-bottom: 1px solid #F8FAFC;
}
.tpp-av-day:last-child { border-bottom: none; padding-bottom: 0; }

.tpp-av-day__name {
  font-size: .8125rem; font-weight: 600; color: #374151;
}
.tpp-av-day__chips {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.tpp-av-day__none {
  font-size: .75rem; color: #CBD5E1; font-style: italic;
}

/* Time chips */
.tpp-av-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem;
  background: #DCFCE7; color: #15803D;
  border-radius: 12px; font-size: .8rem; font-weight: 500;
  line-height: 1.4; white-space: nowrap;
}
.tpp-av-chip--peak {
  background: #FEF9C3; color: #92400E;
}
.tpp-av-badge { font-size: .75rem; }

/* Summary footer */
.tpp-av-summary {
  margin-top: .875rem; padding-top: .75rem;
  border-top: 1px solid #F1F5F9;
  display: flex; flex-direction: column; gap: .5rem;
}
.tpp-av-summary__row {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .875rem;
}
.tpp-av-summary__label { font-size: .7rem; color: #64748B; margin-bottom: .1rem; }
.tpp-av-summary__val   { font-size: .875rem; font-weight: 600; color: #1E293B; }

/* ── Availability modal ────────────────────────────────────── */
.tpp-av-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.tpp-av-modal[hidden] { display: none; }

.tpp-av-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.tpp-av-modal__box {
  position: relative; z-index: 1;
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 100%; max-width: 680px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.tpp-av-modal__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem 1.25rem .875rem;
  border-bottom: 1px solid #F1F5F9;
}
.tpp-av-modal__ttl {
  font-size: 1rem; font-weight: 700; color: #1E293B; margin: 0;
}
.tpp-av-modal__close {
  width: 2rem; height: 2rem;
  border: none; background: #F8FAFC; border-radius: 8px;
  font-size: .875rem; cursor: pointer; color: #64748B;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.tpp-av-modal__close:hover { background: #FEE2E2; color: #DC2626; }

.tpp-av-modal .av-grid-wrap {
  border-radius: 0; border: none;
  box-shadow: none; flex: 1; min-height: 0;
}

.tpp-av-modal__legend {
  padding: .75rem 1.25rem; font-size: .75rem; color: #64748B;
  border-top: 1px solid #F1F5F9; margin: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
}
.tpp-av-modal__dot {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; background: #F1F5F9;
  border: 1px solid #E2E8F0; vertical-align: middle; margin-right: .25rem;
}
.tpp-av-modal__dot--on   { background: #22C55E; border-color: #22C55E; }
.tpp-av-modal__dot--peak { background: #FEFCE8; border-color: #FDE68A; }

/* ── Modal Đặt học thử ─────────────────────────────────────── */
.gsc-ht-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.gsc-ht-overlay[hidden] { display: none; }

.gsc-ht-box {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column;
}

.gsc-ht-handle { display: none; }

.gsc-ht-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
  gap: .75rem;
}
.gsc-ht-title { font-size: 1.125rem; font-weight: 800; color: var(--clr-text); margin: 0; }
.gsc-ht-subtitle { font-size: .875rem; color: var(--clr-text-muted); margin: .2rem 0 0; }
.gsc-ht-close {
  flex-shrink: 0; width: 32px; height: 32px;
  border: none; background: var(--clr-bg);
  border-radius: 50%; cursor: pointer;
  font-size: 1rem; color: var(--clr-text-muted);
  display: flex; align-items: center; justify-content: center;
}
.gsc-ht-close:hover { background: #fee2e2; color: #dc2626; }

/* Form body */
#gsc-ht-form { padding: 1.25rem 1.5rem 1.5rem; }

.gsc-ht-field { margin-bottom: 1rem; }
.gsc-ht-label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--clr-text); margin-bottom: .375rem;
}
.gsc-ht-label .gsc-ht-req { color: var(--clr-danger); margin-left: .15rem; }

.gsc-ht-input,
.gsc-ht-select,
.gsc-ht-textarea {
  width: 100%; padding: .625rem .875rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: .9375rem; color: var(--clr-text);
  background: var(--clr-surface);
  transition: border-color .15s;
  box-sizing: border-box;
}
.gsc-ht-input:focus,
.gsc-ht-select:focus,
.gsc-ht-textarea:focus { outline: none; border-color: var(--clr-primary); }
.gsc-ht-input.is-error,
.gsc-ht-select.is-error,
.gsc-ht-textarea.is-error { border-color: var(--clr-danger); }
.gsc-ht-err-msg { font-size: .75rem; color: var(--clr-danger); margin-top: .25rem; display: none; }
.gsc-ht-err-msg.visible { display: block; }

/* Radio */
.gsc-ht-radios { display: flex; gap: .75rem; flex-wrap: wrap; }
.gsc-ht-radio-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; cursor: pointer; color: var(--clr-text);
}

/* Chips khung giờ */
.gsc-ht-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.gsc-ht-chip {
  padding: .35rem .875rem;
  border: 1.5px solid var(--clr-border);
  border-radius: 99px; font-size: .8125rem;
  cursor: pointer; background: var(--clr-surface);
  color: var(--clr-text-muted); transition: all .15s;
  user-select: none;
}
.gsc-ht-chip.active {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
  color: var(--clr-primary); font-weight: 600;
}

/* Trust line */
.gsc-ht-trust {
  font-size: .8rem; color: var(--clr-text-muted);
  text-align: center; margin: .75rem 0 1rem;
}

/* Submit */
.gsc-ht-submit {
  width: 100%; padding: .875rem 1rem;
  background: var(--clr-primary); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.gsc-ht-submit:hover:not(:disabled) { background: var(--clr-primary-dark); transform: translateY(-1px); }
.gsc-ht-submit:disabled { opacity: .7; cursor: not-allowed; }

/* Spinner */
.gsc-ht-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gsc-spin .7s linear infinite;
  display: none;
}
.gsc-ht-submit.loading .gsc-ht-spinner { display: block; }
.gsc-ht-submit.loading .gsc-ht-btn-text { display: none; }
@keyframes gsc-spin { to { transform: rotate(360deg); } }

/* Alert */
.gsc-ht-alert {
  border-radius: var(--radius-md); padding: .75rem 1rem;
  font-size: .875rem; margin-top: .875rem;
}
.gsc-ht-alert--error { background: #fef2f2; color: var(--clr-danger); border: 1px solid #fecaca; }

/* Success screen */
#gsc-ht-success[hidden] { display: none; }
#gsc-ht-success {
  padding: 2rem 1.5rem 2.5rem;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.gsc-ht-ok-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #dcfce7; color: #16a34a;
  font-size: 2rem; display: flex; align-items: center; justify-content: center;
}
.gsc-ht-ok-title { font-size: 1.25rem; font-weight: 800; color: var(--clr-text); margin: 0; }
.gsc-ht-ok-msg { font-size: .9375rem; color: var(--clr-text-muted); margin: 0; line-height: 1.6; }
.gsc-ht-ok-id { font-size: .875rem; color: var(--clr-text-faint); }
.gsc-ht-ok-phone { font-size: .875rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md); padding: .625rem 1rem; color: #92400e; }
.gsc-ht-ok-more {
  margin-top: .5rem; padding: .625rem 1.5rem;
  border: 1.5px solid var(--clr-border); border-radius: var(--radius-md);
  font-size: .875rem; font-weight: 600; color: var(--clr-text-muted);
  text-decoration: none;
}
.gsc-ht-ok-more:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

/* Mobile: full-screen */
@media (max-width: 639px) {
  .gsc-ht-overlay { align-items: flex-end; padding: 0; }
  .gsc-ht-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%; max-height: 92vh;
  }
  .gsc-ht-handle {
    display: block; width: 40px; height: 4px;
    background: var(--clr-border); border-radius: 2px;
    margin: .75rem auto .25rem;
  }
}

/* ── Panel: Học thử ──────────────────────────────────────────────────────── */
.tp-ht-list { display: flex; flex-direction: column; gap: 1rem; }

.tp-ht-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tp-ht-card__header {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--clr-border);
  background: #fafafa;
}

.tp-ht-card__id { font-size: .8rem; font-weight: 700; color: var(--clr-text-muted); }
.tp-ht-card__time { font-size: .8rem; color: var(--clr-text-muted); margin-left: auto; }

.tp-ht-card__body { padding: .875rem 1rem; display: flex; flex-direction: column; gap: .5rem; }

.tp-ht-row { display: grid; grid-template-columns: 90px 1fr; gap: .5rem; font-size: .875rem; }
.tp-ht-lbl { color: var(--clr-text-muted); font-weight: 500; }

.tp-ht-card__actions {
  display: flex; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--clr-border);
  background: #fafafa;
}

.tp-ht-note {
  margin: 0; padding: .75rem 1rem;
  font-size: .85rem; color: #16a34a;
  border-top: 1px solid var(--clr-border);
  background: #f0fdf4;
}

/* ── Avatar upload ───────────────────────────────────────────────────────── */
.pf-hero-avatar-wrap { position: relative; display: inline-block; }

.pf-avatar-upload-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transition: opacity .18s;
}
.pf-hero-avatar-wrap:hover .pf-avatar-upload-btn { opacity: 1; }

.pf-avatar-uploading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TUTOR LISTING (.tgl-*)  —  page-tutor-profile.php chế độ listing
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page & layout ──────────────────────────────────────────────────────── */
.tgl-page { background: #f8fafc; min-height: 100vh; font-family: 'Inter', sans-serif; padding: 1.5rem 0 3rem; }
.tgl-container {
  max-width: 1280px; margin: 0 auto; padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  grid-template-rows: auto 1fr;
  column-gap: 1.5rem;
  align-items: start;
}
.tgl-mobile-bar { display: none; grid-column: 1 / -1; align-items: center; gap: .75rem; padding-bottom: 1rem; }

/* ── Filter sidebar ─────────────────────────────────────────────────────── */
.tgl-sidebar-left { grid-column: 1; position: relative; }
.tgl-filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; }
.tgl-filter-panel {
  background: #fff; border-radius: 16px; border: 1px solid #e2e8f0;
  overflow: hidden; position: sticky; top: 1.5rem;
}
.tgl-filter-header {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
.tgl-filter-title { font-size: 1rem; font-weight: 700; flex: 1; margin: 0; }
.tgl-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #16a34a; color: #fff; font-size: .7rem; font-weight: 700;
}
.tgl-filter-clear { font-size: .8rem; color: #64748b; text-decoration: none; white-space: nowrap; }
.tgl-filter-clear:hover { color: #16a34a; }
.tgl-filter-close { display: none; background: none; border: none; cursor: pointer; font-size: 1.1rem; color: #64748b; padding: 0 .25rem; line-height: 1; }
.tgl-filter-form { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tgl-filter-section { display: flex; flex-direction: column; gap: .4rem; }
.tgl-filter-section-title { font-size: .78rem; font-weight: 700; color: #6b7280; margin: 0 0 .2rem; text-transform: uppercase; letter-spacing: .04em; }
.tgl-filter-opt { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #374151; cursor: pointer; line-height: 1.4; }
.tgl-filter-opt input[type="radio"] { accent-color: #16a34a; cursor: pointer; flex-shrink: 0; }
.tgl-subjects-extra { display: none; }
.tgl-subjects-extra.tgl-expanded { display: block; }
.tgl-see-more {
  display: inline-flex; align-items: center; gap: .2rem; margin-top: .2rem;
  background: none; border: none; padding: 0;
  font-size: .78rem; color: #16a34a; font-weight: 600; cursor: pointer;
}
.tgl-see-more:hover { text-decoration: underline; }
.tgl-filter-select {
  width: 100%; padding: .5rem .75rem;
  border: 1px solid #d1d5db; border-radius: 8px;
  font-size: .875rem; color: #374151; background: #fff; cursor: pointer;
}
/* Price range slider */
.tgl-price-display {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: .75rem;
}
.tgl-price-dash { color: #9ca3af; }
.tgl-dual-range {
  position: relative; height: 36px;
}
.tgl-range-track {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 4px;
  background: #e2e8f0; border-radius: 2px; pointer-events: none;
}
.tgl-range-fill {
  position: absolute; height: 100%;
  background: #16a34a; border-radius: 2px;
}
.tgl-range-input {
  position: absolute; width: 100%; height: 4px; top: 50%;
  transform: translateY(-50%); margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
}
.tgl-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #16a34a;
  border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  pointer-events: all; cursor: pointer;
}
.tgl-range-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #16a34a; border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  pointer-events: all; cursor: pointer;
}
.tgl-range-input:focus { outline: none; }
.tgl-range-input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(22,163,74,.25); }
.tgl-apply-btn {
  padding: .65rem 1rem; background: #16a34a; color: #fff;
  border: none; border-radius: 10px; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.tgl-apply-btn:hover { background: #15803d; }

/* ── Mobile filter & sort ────────────────────────────────────────────────── */
.tgl-filter-open-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; background: #fff; color: #374151;
  border: 1px solid #d1d5db; border-radius: 10px;
  font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.tgl-sort-select-mobile {
  flex: 1; padding: .55rem .75rem;
  border: 1px solid #d1d5db; border-radius: 10px;
  font-size: .875rem; color: #374151; background: #fff;
}

/* ── Main ───────────────────────────────────────────────────────────────── */
.tgl-main { grid-column: 2; min-width: 0; }
.tgl-results-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem;
}
.tgl-results-count { font-size: .9rem; color: #6b7280; }
.tgl-results-count strong { color: #111827; font-weight: 700; }
.tgl-sort-wrap { display: flex; align-items: center; gap: .5rem; }
.tgl-sort-label { font-size: .85rem; color: #6b7280; white-space: nowrap; }
.tgl-sort-select {
  padding: .45rem .75rem; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: .875rem; color: #374151; background: #fff; cursor: pointer;
}

/* ── Tutor cards ────────────────────────────────────────────────────────── */
.tgl-cards { display: flex; flex-direction: column; gap: 1rem; }
.tgl-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  display: flex; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
}
.tgl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }

.tgl-card-img-wrap { position: relative; flex-shrink: 0; width: 100px; background: #f1f5f9; overflow: hidden; }
.tgl-card-img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 120px; }
.tgl-verified {
  position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #16a34a; color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700;
}

.tgl-card-body { flex: 1; padding: .75rem 1.1rem; display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.tgl-card-top { display: flex; gap: 1rem; align-items: flex-start; }
.tgl-card-info { flex: 1; min-width: 0; }
.tgl-card-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 .2rem; }
.tgl-card-name a { color: #111827; text-decoration: none; }
.tgl-card-name a:hover { color: #16a34a; }
.tgl-card-rating { display: flex; align-items: center; gap: .35rem; margin-bottom: .15rem; }
.tgl-stars { display: inline-flex; gap: 1px; }
.tgl-star { font-size: .85rem; }
.tgl-star--full  { color: #f59e0b; }
.tgl-star--half  { color: #f59e0b; opacity: .6; }
.tgl-star--empty { color: #d1d5db; }
.tgl-rating-num { font-size: .82rem; font-weight: 600; color: #374151; }
.tgl-card-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; margin-bottom: .15rem; }
.tgl-card-name-row .tgl-card-name { margin: 0; }
.tgl-badge-row { display: flex; flex-wrap: wrap; gap: .25rem; }
.tgl-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .15rem .5rem; border-radius: 20px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.tgl-badge--top         { background: #fef3c7; color: #92400e; }
.tgl-badge--verified    { background: #dcfce7; color: #15803d; }
.tgl-badge--recommended { background: #dbeafe; color: #1d4ed8; }
.tgl-badge--fast        { background: #fff7ed; color: #c2410c; }
.tgl-badge--exam        { background: #f3e8ff; color: #7e22ce; }

.tgl-card-subtitle { font-size: .8rem; color: #6b7280; margin: 0; line-height: 1.4; }

/* price-area: chỉ hiện giá, căn phải */
.tgl-card-price-area { flex-shrink: 0; text-align: right; }
.tgl-card-price { font-size: 1.05rem; font-weight: 700; color: #111827; white-space: nowrap; }
.tgl-card-price span { font-size: .72rem; font-weight: 400; color: #6b7280; }
.tgl-card-price--thoa { font-size: .875rem; color: #6b7280; font-weight: 500; }
/* desktop: show full price, hide compact */
.tgl-price-full { display: inline; }
.tgl-price-k    { display: none; }

/* split: trái (tags+info) | phải (CTA trên + tim dưới) */
.tgl-card-split {
  display: flex; align-items: flex-start; gap: .75rem;
}
.tgl-card-left {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .22rem;
}
.tgl-card-right {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.tgl-card-cta {
  display: inline-block; padding: .4rem .85rem;
  background: #16a34a; color: #fff; border-radius: 10px;
  font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.tgl-card-cta:hover { background: #15803d; color: #fff; }
.tgl-card-heart {
  background: none; border: 1px solid #e2e8f0; border-radius: 8px;
  color: #9ca3af; cursor: pointer; padding: .3rem .4rem; line-height: 1;
  transition: color .15s, border-color .15s;
}
.tgl-card-heart:hover { color: #ef4444; border-color: #fca5a5; }

.tgl-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tgl-tag {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .18rem .5rem; border-radius: 6px;
  font-size: .74rem; font-weight: 500;
}
.tgl-tag--subject { background: #dcfce7; color: #15803d; }
.tgl-tag--area    { background: #dbeafe; color: #1d4ed8; }
.tgl-tag--method  { background: #fef3c7; color: #92400e; }

.tgl-info-row { display: flex; flex-wrap: wrap; gap: .2rem .65rem; align-items: center; }
.tgl-info-item { font-size: .79rem; color: #6b7280; display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.tgl-info-item .tgl-stars { font-size: .75rem; }

.tgl-card-bio {
  font-size: .84rem; color: #4b5563; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.5;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.tgl-pagination { display: flex; justify-content: center; align-items: center; gap: .3rem; margin-top: 2rem; flex-wrap: wrap; }
.tgl-page-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .5rem;
  border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; color: #374151; font-size: .875rem; text-decoration: none;
  transition: all .15s;
}
.tgl-page-btn:hover:not(.tgl-page-btn--active) { border-color: #16a34a; color: #16a34a; }
.tgl-page-btn--active { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 600; cursor: default; }
.tgl-page-ellipsis { color: #9ca3af; padding: 0 .25rem; align-self: center; }

/* ── Sidebar CTA card ───────────────────────────────────────────────────── */
.tgl-sidebar-cta {
  margin: 0 1.25rem 1.25rem;
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  text-align: center;
}
.tgl-sidebar-cta__title { font-size: .85rem; font-weight: 700; color: #111827; margin: 0 0 .3rem; }
.tgl-sidebar-cta__desc  { font-size: .78rem; color: #6b7280; margin: 0 0 .75rem; line-height: 1.4; }
.tgl-sidebar-cta__btn {
  display: block; padding: .55rem 1rem;
  background: #16a34a; color: #fff;
  border-radius: 10px; font-size: .83rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.tgl-sidebar-cta__btn:hover { background: #15803d; color: #fff; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.tgl-empty { text-align: center; padding: 4rem 2rem; color: #6b7280; }
.tgl-empty p { margin: 1rem 0 .5rem; font-size: .95rem; }
.tgl-empty-reset {
  display: inline-block; margin-top: .5rem; padding: .5rem 1.25rem;
  background: #f1f5f9; color: #374151; border-radius: 8px;
  text-decoration: none; font-size: .875rem;
}
.tgl-empty-reset:hover { background: #e2e8f0; }
.tgl-empty-desc { font-size: .875rem; color: #6b7280; margin: 0 0 1rem; }
.tgl-empty-cta {
  display: inline-block; margin-bottom: .75rem;
  padding: .65rem 1.5rem; background: #16a34a; color: #fff;
  border-radius: 10px; font-size: .9rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.tgl-empty-cta:hover { background: #15803d; color: #fff; }

/* ── Right sidebar ──────────────────────────────────────────────────────── */
.tgl-sidebar-right { grid-column: 3; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.5rem; }
.tgl-right-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.tgl-right-card-title { font-size: .95rem; font-weight: 700; margin: 0 0 1rem; color: #111827; }

.tgl-trust-items { display: flex; flex-direction: column; gap: .75rem; }
.tgl-trust-item { display: flex; align-items: flex-start; gap: .75rem; }
.tgl-trust-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tgl-trust-item > div:last-child { display: flex; flex-direction: column; }
.tgl-trust-item strong { font-size: .83rem; font-weight: 600; color: #111827; }
.tgl-trust-item span   { font-size: .76rem; color: #6b7280; }
.tgl-trust-stats { display: flex; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.tgl-trust-stat { flex: 1; text-align: center; }
.tgl-trust-stat strong { display: block; font-size: 1.3rem; font-weight: 800; color: #16a34a; }
.tgl-trust-stat span   { font-size: .73rem; color: #6b7280; }

.tgl-uni-logos { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.tgl-uni-label { font-size: .7rem; color: #9ca3af; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.tgl-uni-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem;
}
.tgl-uni-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .5rem .4rem; border: 1px solid #e5e7eb; border-radius: 10px;
  background: #f9fafb; text-align: center;
}
.tgl-uni-item span:last-child {
  font-size: .68rem; color: #6b7280; line-height: 1.2;
}
.tgl-uni-img {
  width: 40px; height: 40px; object-fit: contain;
}

.tgl-rank-btn {
  display: block; margin-top: .75rem; padding: .55rem;
  border: 1px solid #e2e8f0; border-radius: 10px;
  text-align: center; font-size: .82rem; font-weight: 500; color: #374151;
  text-decoration: none; transition: border-color .15s, color .15s;
}
.tgl-rank-btn:hover { border-color: #16a34a; color: #16a34a; }

.tgl-top-list { display: flex; flex-direction: column; gap: .5rem; }
.tgl-top-item { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; padding: .35rem; border-radius: 8px; transition: background .15s; }
.tgl-top-item:hover { background: #f8fafc; }
.tgl-top-rank { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; }
.tgl-top-rank--1 { background: #f59e0b; }
.tgl-top-rank--2 { background: #94a3b8; }
.tgl-top-rank--3 { background: #b45309; }
.tgl-top-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tgl-top-info { flex: 1; min-width: 0; }
.tgl-top-info strong { display: block; font-size: .85rem; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgl-top-info span   { font-size: .76rem; color: #f59e0b; }

.tgl-contact-card .tgl-right-card-title { margin-bottom: .5rem; }
.tgl-contact-desc { font-size: .82rem; color: #6b7280; margin: 0 0 .75rem; line-height: 1.5; }
.tgl-contact-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: 10px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  margin-bottom: .5rem; transition: opacity .15s;
}
.tgl-contact-btn:last-child { margin-bottom: 0; }
.tgl-contact-btn:hover { opacity: .85; }
.tgl-contact-btn--phone { background: #16a34a; color: #fff; }
.tgl-contact-btn--zalo  { background: #0068ff; color: #fff; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tgl-container { grid-template-columns: 240px 1fr; }
  .tgl-sidebar-right { display: none; }
}
@media (max-width: 768px) {
  .tgl-container { grid-template-columns: 1fr; }
  .tgl-mobile-bar { display: flex; }

  .tgl-sidebar-left {
    position: fixed; inset: 0; z-index: 200;
    pointer-events: none; visibility: hidden;
  }
  .tgl-sidebar-left--open { pointer-events: auto; visibility: visible; }
  .tgl-sidebar-left--open .tgl-filter-overlay { display: block; }

  .tgl-filter-panel {
    position: fixed; top: 0; left: -300px; bottom: 0; width: 290px;
    border-radius: 0; border: none; overflow-y: auto; z-index: 201;
    transition: left .25s ease;
    /* tránh "Áp dụng" bị sticky nav của theme che */
    padding-bottom: 80px;
  }
  .tgl-sidebar-left--open .tgl-filter-panel { left: 0; }
  .tgl-filter-close { display: flex; }
  .tgl-sort-wrap { display: none; }
  .tgl-main { grid-column: 1; }

  /* Right sidebar: hiện bên dưới danh sách thẻ */
  .tgl-sidebar-right { display: flex; grid-column: 1; position: static; top: auto; }
  /* Trust items: 3 icon cùng hàng ngang */
  .tgl-trust-items { flex-direction: row; gap: .4rem; }
  .tgl-trust-item { flex: 1; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: .2rem; }
  .tgl-trust-item > div:last-child { align-items: center; }
  .tgl-trust-item strong { font-size: .72rem; line-height: 1.3; }
  .tgl-trust-item > div:last-child span { font-size: .62rem; }
}

/* ── Mobile card redesign — ≤640px ─────────────────────────── */
@media (max-width: 640px) {
  /* Photo: square 88px, bo góc mềm */
  .tgl-card-img-wrap { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; }
  .tgl-card-img { min-height: 88px; object-fit: cover; }

  /* Card body compact */
  .tgl-card-body { padding: .6rem .7rem; }

  /* Card top: GIỮ layout row — tên + giá cùng hàng */
  .tgl-card-top { gap: .5rem; }

  /* Price: hiện compact "120k", màu xanh */
  .tgl-price-full { display: none; }
  .tgl-price-k    { display: inline; }
  .tgl-card-price { color: #16a34a; font-size: .92rem; }
  .tgl-card-price--thoa { font-size: .78rem; }

  /* Text sizes gọn hơn */
  .tgl-badge { font-size: .67rem; padding: .07rem .3rem; }
  .tgl-card-name { font-size: .92rem; }
  .tgl-card-subtitle { font-size: .74rem; }
  .tgl-info-item { font-size: .74rem; }
  .tgl-card-bio { font-size: .78rem; }
  .tgl-tag { font-size: .7rem; padding: .12rem .4rem; }

  /* Split wrap: right column (CTA+heart) xuống full-width */
  .tgl-card-split { flex-wrap: wrap; }
  .tgl-card-right {
    flex-direction: column; width: 100%;
    align-items: stretch; gap: .3rem; margin-top: .15rem;
  }
  .tgl-card-right .tgl-card-cta { text-align: center; padding: .55rem 1rem; font-size: .9rem; }
  .tgl-card-right .tgl-card-heart { align-self: flex-end; }
}

/* ── Trust section inline (mobile only) ─────────────────────── */
.tgl-trust-inline { display: none; }
@media (max-width: 768px) {
  .tgl-trust-inline {
    display: block; background: #f0fdf4;
    border: 1px solid #bbf7d0; border-radius: 16px; padding: 1rem;
  }
  .tgl-trust-inline__title {
    font-size: .9rem; font-weight: 700; color: #111827; margin: 0 0 .75rem;
  }
  .tgl-trust-inline__items { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
  .tgl-trust-inline__item {
    font-size: .78rem; color: #16a34a; font-weight: 500;
    background: #dcfce7; border-radius: 20px; padding: .2rem .65rem;
  }
  .tgl-trust-inline__stats {
    display: flex; gap: 1rem; justify-content: center;
    padding-top: .75rem; border-top: 1px solid #bbf7d0;
  }
  .tgl-trust-inline__stat { text-align: center; }
  .tgl-trust-inline__stat strong { display: block; font-size: 1.2rem; font-weight: 800; color: #16a34a; }
  .tgl-trust-inline__stat span   { font-size: .74rem; color: #6b7280; }
}


/* ================================================================
   PROFILE PAGE — .gsp-* (desktop) + .gpm-* (mobile)
================================================================ */
:root{
  --c-primary:#16A34A;--c-primary-d:#15803D;--c-secondary:#22C55E;
  --c-bg:#F4F6F9;--c-card:#FFFFFF;--c-border:#E8EBEF;
  --c-text:#111827;--c-muted:#6B7280;--c-faint:#9CA3AF;
  --c-tint:#F0FDF4;--c-tint-bd:#DCFCE7;
  --c-star:#FACC15;--c-red:#EF4444;--c-zalo:#0068FF;
  --c-blue:#2563EB;--c-amber:#D97706;--c-violet:#7C3AED;--c-orange:#EA580C;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --sh:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
  --maxw:1540px;
  --gutter:clamp(12px,4vw,18px);
}
.gsp *,.gsp *::before,.gsp *::after{box-sizing:border-box;}
.gsp{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;line-height:1.45;}
.gsp img{display:block;max-width:100%;}
.gsp button{font-family:inherit;cursor:pointer;border:none;background:none;}
.gsp a{text-decoration:none;color:inherit;}
.gsp .ico{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.gsp .ico.fill{fill:currentColor;stroke:none;}
.gsp .card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh);}
.gsp h3.t{margin:0 0 16px;font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.gsp h3.t .ico{color:var(--c-primary);}
.gsp .link{display:inline-flex;align-items:center;gap:4px;color:var(--c-primary);font-size:.86rem;font-weight:600;}
.gsp-wrap{max-width:var(--maxw);margin:0 auto;padding:24px;}
.gsp-grid{
  display:grid;gap:20px;align-items:stretch;
  grid-template-columns:repeat(12,1fr);
  grid-template-areas:
    "hero hero hero hero hero hero price price price info info info"
    "achv achv achv achv achv achv achv achv achv lich lich lich"
    "subj subj subj subj subj giot giot giot giot lich lich lich"
    "tha  tha  tha  cer  cer  cer  rev  rev  rev  high high high"
    "foot foot foot foot foot foot foot foot foot foot foot foot";
}
.gsp-hero{grid-area:hero;}.gsp-price{grid-area:price;}.gsp-info{grid-area:info;}
.gsp-achv{grid-area:achv;}.gsp-lich{grid-area:lich;}.gsp-subj{grid-area:subj;}
.gsp-giot{grid-area:giot;}.gsp-tha{grid-area:tha;}.gsp-cer{grid-area:cer;}
.gsp-rev{grid-area:rev;}.gsp-high{grid-area:high;}.gsp-foot{grid-area:foot;}
/* HERO */
.gsp-hero{padding:24px;display:flex;gap:22px;}
.gsp-ava{position:relative;flex:0 0 auto;}
.gsp-ava img{width:128px;height:160px;object-fit:cover;border-radius:14px;background:#E2E8F0;}
.gsp-online{position:absolute;right:8px;bottom:10px;width:18px;height:18px;border-radius:50%;background:var(--c-secondary);border:3px solid #fff;}
.gsp-herobody{flex:1 1 auto;min-width:0;}
.gsp-hname{font-size:2rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
.gsp-hname .ico{width:.75em;height:.75em;color:var(--c-primary);}
.gsp-hrole{margin-top:4px;color:var(--c-muted);font-size:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.gsp-hrole b{color:var(--c-text);font-weight:600;}
.gsp-hrole .ico.fill{color:var(--c-star);}
.gsp-hloc{margin-top:8px;color:var(--c-muted);font-size:.94rem;display:flex;align-items:center;gap:6px;}
.gsp-hloc .ico{color:var(--c-red);}
.gsp-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.gsp-chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-primary);border:1px solid var(--c-tint-bd);}
.gsp-chip.b{background:#EFF6FF;color:var(--c-blue);border-color:#DBEAFE;}
.gsp-chip.v{background:#F5F3FF;color:var(--c-violet);border-color:#EDE9FE;}
.gsp-chip .ico{width:.95em;height:.95em;}
.gsp-stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:20px;}
.gsp-stat{display:flex;flex-direction:column;gap:2px;}
.gsp-stat .top{display:flex;align-items:center;gap:7px;font-size:1.2rem;font-weight:800;}
.gsp-stat .lbl{font-size:.8rem;color:var(--c-muted);}
.gsp-stat .c-star{color:var(--c-star);}.gsp-stat .c-gr{color:var(--c-primary);}.gsp-stat .c-bl{color:var(--c-blue);}.gsp-stat .c-rd{color:var(--c-red);}
/* PRICE */
.gsp-price{padding:24px;display:flex;flex-direction:column;}
.gsp-pricetop{text-align:center;}
.gsp-priceval{font-size:2rem;font-weight:800;color:var(--c-primary);}
.gsp-priceval span{font-size:1rem;font-weight:600;color:var(--c-muted);}
.gsp-pricesub{font-size:.85rem;color:var(--c-muted);margin-top:4px;}
.gsp-pbtns{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.gsp .gsp-btn{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-md);font-weight:700;font-size:.98rem;visibility:visible!important;opacity:1!important;width:100%;}
.gsp .gsp-btn-primary{background:var(--c-primary)!important;color:#fff!important;border:none!important;}
.gsp .gsp-btn-primary:hover{background:var(--c-primary-d)!important;}
.gsp .gsp-btn-outline{background:#fff!important;color:var(--c-primary)!important;border:1px solid var(--c-primary)!important;}
.gsp .gsp-btn-outline:hover{background:var(--c-tint)!important;}
.gsp .gsp-btn-zalo{background:#fff!important;color:var(--c-zalo)!important;border:1px solid #cfe0ff!important;}
.gsp .gsp-btn-zalo:hover{background:#F0F6FF!important;}
.gsp-zbadge{background:var(--c-zalo);color:#fff;font-size:.65rem;font-weight:800;padding:2px 5px;border-radius:4px;letter-spacing:.02em;}
.gsp-priceresp{text-align:center;font-size:.82rem;color:var(--c-muted);margin-top:14px;}
/* INFO */
.gsp-info{padding:22px;}
.gsp-irow{display:flex;align-items:center;gap:12px;padding:11px 0;}
.gsp-irow+.gsp-irow{border-top:1px solid #F3F4F6;}
.gsp-irow .ico{color:var(--c-primary);width:1.1em;height:1.1em;flex:0 0 auto;}
.gsp-irow .k{width:96px;flex:0 0 auto;color:var(--c-muted);font-size:.88rem;}
.gsp-irow .v{font-weight:600;font-size:.92rem;}
/* ACHIEVEMENT BAR */
.gsp-achv{padding:18px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gsp-ach{display:flex;align-items:center;gap:12px;}
.gsp-ach .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.gsp-ach .ic.blue{background:#EFF6FF;color:var(--c-blue);}.gsp-ach .ic.red{background:#FEF2F2;color:var(--c-red);}
.gsp-ach .ic.green{background:var(--c-tint);color:var(--c-primary);}.gsp-ach .ic.orange{background:#FFF7ED;color:var(--c-orange);}
.gsp-ach h4{margin:0;font-size:.92rem;font-weight:700;}.gsp-ach p{margin:2px 0 0;font-size:.78rem;color:var(--c-muted);}
/* SUBJECTS */
.gsp-subj{padding:22px;}
.gsp-subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;}
.gsp-mon{border:1px solid var(--c-border);border-radius:var(--r-md);padding:14px;}
.gsp-mon .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.gsp-mon .ic.g{background:var(--c-tint);color:var(--c-primary);}.gsp-mon .ic.b{background:#EFF6FF;color:var(--c-blue);}
.gsp-mon .ic.o{background:#FFF7ED;color:var(--c-orange);}.gsp-mon .ic.v{background:#F5F3FF;color:var(--c-violet);}
.gsp-mon .nm{font-weight:700;font-size:1rem;}.gsp-mon .lv{font-size:.78rem;color:var(--c-muted);margin-top:2px;}
.gsp-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.gsp-video{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#E2E8F0;}
.gsp-video img{width:100%;height:100%;object-fit:cover;}
.gsp-video::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.6));}
.gsp-video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;}
.gsp-video .play span{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--c-primary);box-shadow:0 2px 8px rgba(0,0,0,.25);}
.gsp-video .play .ico{width:20px;height:20px;margin-left:2px;}
.gsp-video .vmeta{position:absolute;left:10px;right:10px;bottom:9px;z-index:3;display:flex;align-items:center;gap:8px;}
.gsp-video .vt{color:#fff;font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gsp-video:hover .play span{background:#fff;}
/* BIO */
.gsp-giot{padding:22px;}
.gsp-giot p{margin:0 0 12px;font-size:.92rem;color:#374151;line-height:1.65;}
.gsp-bul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:11px;}
.gsp-bul li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;}
.gsp-bul .ico{color:var(--c-primary);width:1.1em;height:1.1em;flex:0 0 auto;margin-top:.18em;}
/* ACHIEVEMENTS */
.gsp-tha{padding:22px;}
.gsp-talist{display:grid;gap:14px;}
.gsp-tarow{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;}
.gsp-tarow .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--c-tint);color:var(--c-primary);}
.gsp-tarow .ic.am{background:#FFFBEB;color:var(--c-amber);}
/* CERTIFICATES */
.gsp-cer{padding:22px;}
.gsp-cers{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px;}
.gsp-cer-item{text-align:center;}
.gsp-cer-item .thumb{display:flex;align-items:center;justify-content:center;height:78px;border:1px solid var(--c-border);border-radius:10px;background:#F8FAFC;color:var(--c-faint);margin-bottom:7px;}
.gsp-cer-item .thumb .ico{width:26px;height:26px;}
.gsp-cer-item:hover .thumb{border-color:var(--c-primary);color:var(--c-primary);}
.gsp-cer-item small{font-size:.76rem;color:var(--c-muted);font-weight:500;}
.gsp-empty-note{font-size:.88rem;color:var(--c-faint);margin:8px 0 0;}
/* REVIEWS */
.gsp-rev{padding:22px;}
.gsp-revhead{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.gsp-revscore{font-size:1.6rem;font-weight:800;}
.gsp-revstars{display:inline-flex;gap:2px;color:var(--c-star);}
.gsp-revstars .ico{width:18px;height:18px;}
.gsp-revcount{color:var(--c-muted);font-size:.84rem;}
.gsp-quote{background:#F8FAFC;border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px 16px 16px 50px;position:relative;}
.gsp-quote .qi{position:absolute;top:12px;left:14px;color:var(--c-tint-bd);}
.gsp-quote .qi .ico{width:26px;height:26px;}
.gsp-quote p{margin:0;font-size:.9rem;color:#374151;line-height:1.6;}
.gsp-quote .by{margin-top:10px;font-size:.82rem;color:var(--c-muted);}
.gsp-dots{display:flex;justify-content:center;gap:6px;margin-top:14px;}
.gsp-dots i{width:7px;height:7px;border-radius:50%;background:#D1D5DB;display:inline-block;}
.gsp-dots i.on{background:var(--c-primary);width:18px;border-radius:4px;}
/* HIGHLIGHTS */
.gsp-high{padding:22px;}
.gsp-hlist{display:grid;gap:18px;}
.gsp-hitem{display:flex;gap:12px;}
.gsp-hitem .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.gsp-hitem .ic.am{background:#FFFBEB;color:var(--c-amber);}.gsp-hitem .ic.gr{background:var(--c-tint);color:var(--c-primary);}
.gsp-hitem .ic.bl{background:#EFF6FF;color:var(--c-blue);}.gsp-hitem .ic.rd{background:#FEF2F2;color:var(--c-red);}
.gsp-hitem h4{margin:0;font-size:.92rem;font-weight:700;}.gsp-hitem p{margin:3px 0 0;font-size:.8rem;color:var(--c-muted);line-height:1.4;}
/* SCHEDULE */
.gsp-lich{padding:22px;}
.gsp-lichhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.gsp-lichhead h3{margin:0;font-size:1.1rem;font-weight:700;}
.gsp-sched{display:grid;grid-template-columns:auto repeat(7,1fr);gap:10px 6px;align-items:center;}
.gsp-sched .hd{text-align:center;font-size:.78rem;font-weight:700;color:var(--c-muted);}
.gsp-sched .rowlbl{font-size:.82rem;padding-right:4px;}
.gsp-sched .rowlbl b{display:block;font-weight:700;}.gsp-sched .rowlbl span{font-size:.72rem;color:var(--c-faint);}
.gsp-dot{width:13px;height:13px;border-radius:50%;margin:0 auto;background:#E5E7EB;}
.gsp-dot.free{background:var(--c-primary);}
.gsp-legend{display:flex;justify-content:center;gap:22px;margin-top:16px;font-size:.82rem;color:var(--c-muted);}
.gsp-legend span{display:inline-flex;align-items:center;gap:7px;}
.gsp-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;}.gsp-legend i.free{background:var(--c-primary);}.gsp-legend i.busy{background:#E5E7EB;}
.gsp-method{margin-top:22px;padding-top:20px;border-top:1px solid var(--c-border);}
.gsp-method h4{margin:0 0 14px;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.gsp-method h4 .ico{color:var(--c-primary);}
.gsp-method ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.gsp-method li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;}
.gsp-method li .ico{color:var(--c-primary);width:1.1em;height:1.1em;flex:0 0 auto;margin-top:.15em;}
/* FOOTER */
.gsp-foot{padding:20px 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.gsp-fitem{display:flex;align-items:center;gap:12px;}
.gsp-fitem .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--c-tint);color:var(--c-primary);flex:0 0 auto;}
.gsp-fitem h4{margin:0;font-size:.88rem;font-weight:700;}.gsp-fitem p{margin:2px 0 0;font-size:.78rem;color:var(--c-muted);}
/* BREAKPOINT */
.gsp-desktop{display:none;}
@media(min-width:768px) and (max-width:1023px){
  .gpm{max-width:720px;}
}
@media(min-width:1024px){
  .gsp-desktop{display:block;}
  .gpm{display:none!important;}
  .zalo-float__label{display:none!important;}
}

/* ── GPM: MOBILE PROFILE (≤768px) ─────────────────────────────── */
.gpm *,.gpm *::before,.gpm *::after{box-sizing:border-box;}
.gpm{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;line-height:1.45;
  width:100%;max-width:480px;margin:0 auto;padding-bottom:24px;}
.gpm img{display:block;max-width:100%;}
.gpm button{font-family:inherit;cursor:pointer;border:none;background:none;}
.gpm a{text-decoration:none;color:inherit;}
.gpm .ico{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.gpm .ico.fill{fill:currentColor;stroke:none;}
.gpm .card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh);}
.gpm-sec{margin:0 var(--gutter) 14px;padding:16px;}
.gpm h3.t{margin:0 0 14px;font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.gpm h3.t .ico{color:var(--c-primary);}
.gpm .sechead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.gpm .sechead h3{margin:0;font-size:1.05rem;font-weight:700;}
.gpm .link{display:inline-flex;align-items:center;gap:3px;color:var(--c-primary);font-size:.84rem;font-weight:600;background:none;border:none;cursor:pointer;font-family:inherit;}
/* TOP BAR */
.gpm-top{position:sticky;top:0;z-index:40;background:var(--c-bg);display:flex;align-items:center;justify-content:space-between;padding:10px var(--gutter);}
.gpm-tbtn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--c-border);color:var(--c-text);}
.gpm-tright{display:flex;gap:8px;}
/* HERO */
.gpm-hero{margin:4px var(--gutter) 14px;overflow:hidden;}
.gpm-cover{height:84px;background:linear-gradient(135deg,#DCFCE7,#BBF7D0);}
.gpm-herobody{padding:0 16px 18px;text-align:center;margin-top:-48px;}
.gpm-ava{position:relative;display:inline-block;}
.gpm-ava img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#E2E8F0;border:4px solid #fff;}
.gpm-online{position:absolute;right:6px;bottom:8px;width:16px;height:16px;border-radius:50%;background:var(--c-secondary);border:3px solid #fff;}
.gpm-hname{margin-top:6px;font-size:1.45rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:-.01em;}
.gpm-hname .ico{width:.75em;height:.75em;color:var(--c-primary);}
.gpm-hrole{color:var(--c-muted);font-size:.92rem;margin-top:2px;}
.gpm-hloc{color:var(--c-muted);font-size:.88rem;margin-top:6px;display:inline-flex;align-items:center;gap:5px;}
.gpm-hloc .ico{color:var(--c-red);}
.gpm-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:12px;}
.gpm-chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-primary);border:1px solid var(--c-tint-bd);}
.gpm-chip.b{background:#EFF6FF;color:var(--c-blue);border-color:#DBEAFE;}
.gpm-chip.v{background:#F5F3FF;color:var(--c-violet);border-color:#EDE9FE;}
.gpm-chip .ico{width:.9em;height:.9em;}
.gpm-stats{display:flex;justify-content:space-around;gap:6px;margin-top:18px;}
.gpm-stat{flex:1;text-align:center;}
.gpm-stat .top{display:inline-flex;align-items:center;gap:5px;font-size:1.05rem;font-weight:800;}
.gpm-stat .lbl{font-size:.7rem;color:var(--c-muted);margin-top:2px;}
.gpm-stat .i-star{color:var(--c-star);}
.gpm-stat .i-u{color:var(--c-primary);}
.gpm-stat .i-b{color:var(--c-blue);}
.gpm-stat .i-h{color:var(--c-red);}
/* PRICE */
.gpm-price{margin:0 var(--gutter) 14px;padding:18px;}
.gpm-priceval{font-size:1.6rem;font-weight:800;color:var(--c-primary);}
.gpm-priceval span{font-size:.9rem;font-weight:600;color:var(--c-muted);}
.gpm-pricesub{font-size:.85rem;color:var(--c-muted);margin-top:2px;}
.gpm-pbtns{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.gpm-prow{display:flex;gap:10px;}
.gpm .gpm-btn{display:flex!important;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:var(--r-md);font-weight:700;font-size:.92rem;visibility:visible!important;opacity:1!important;flex:1;cursor:pointer;}
.gpm .gpm-btn-primary{background:var(--c-primary)!important;color:#fff!important;border:none!important;}
.gpm .gpm-btn-primary:hover{background:var(--c-primary-d)!important;}
.gpm .gpm-btn-outline{background:#fff!important;color:var(--c-primary)!important;border:1px solid var(--c-primary)!important;}
.gpm .gpm-btn-zalo{background:#fff!important;color:var(--c-zalo)!important;border:1px solid #cfe0ff!important;}
.gpm-zbadge{background:var(--c-zalo);color:#fff;font-size:.58rem;font-weight:800;padding:2px 4px;border-radius:4px;}
.gpm-priceresp{text-align:center;font-size:.8rem;color:var(--c-muted);margin-top:12px;}
/* ACHIEVEMENT BAR */
.gpm-achv{margin:0 var(--gutter) 14px;padding:16px 10px;display:flex;justify-content:space-between;gap:6px;}
.gpm-ach{flex:1;text-align:center;}
.gpm-ach .ic{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:7px;}
.gpm-ach .ic.blue{background:#EFF6FF;color:var(--c-blue);}
.gpm-ach .ic.red{background:#FEF2F2;color:var(--c-red);}
.gpm-ach .ic.green{background:var(--c-tint);color:var(--c-primary);}
.gpm-ach .ic.orange{background:#FFF7ED;color:var(--c-orange);}
.gpm-ach h4{margin:0;font-size:.82rem;font-weight:700;}
.gpm-ach p{margin:1px 0 0;font-size:.66rem;color:var(--c-muted);}
/* MÔN DẠY */
.gpm-subjects{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gpm-mon{display:flex;align-items:center;gap:10px;border:1px solid var(--c-border);border-radius:var(--r-md);padding:12px;}
.gpm-mon .ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.gpm-mon .ic.g{background:var(--c-tint);color:var(--c-primary);}
.gpm-mon .ic.b{background:#EFF6FF;color:var(--c-blue);}
.gpm-mon .ic.o{background:#FFF7ED;color:var(--c-orange);}
.gpm-mon .ic.v{background:#F5F3FF;color:var(--c-violet);}
.gpm-mon .nm{font-weight:700;font-size:.92rem;}
.gpm-mon .lv{font-size:.72rem;color:var(--c-muted);}
/* VIDEO */
.gpm-vscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.gpm-vscroll::-webkit-scrollbar{display:none;}
.gpm-video{position:relative;flex:0 0 82%;scroll-snap-align:start;border-radius:12px;overflow:hidden;aspect-ratio:16/11;background:#E2E8F0;display:block;}
.gpm-video img{width:100%;height:100%;object-fit:cover;}
.gpm-video::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.6));}
.gpm-video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;}
.gpm-video .play span{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--c-primary);}
.gpm-video .play .ico{width:18px;height:18px;margin-left:2px;}
.gpm-video .vmeta{position:absolute;left:9px;right:9px;bottom:8px;z-index:3;}
.gpm-video .vt{color:#fff;font-size:.74rem;font-weight:600;}
/* GIỚI THIỆU / CHECKLIST */
.gpm-sec p.intro{margin:0 0 12px;font-size:.9rem;color:#374151;line-height:1.6;}
.gpm-bul{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.gpm-bul li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;line-height:1.4;}
.gpm-bul .ico{color:var(--c-primary);width:1.15em;height:1.15em;flex:0 0 auto;margin-top:1px;}
/* THÀNH TÍCH */
.gpm-talist{display:grid;gap:15px;}
.gpm-tarow{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;line-height:1.4;}
.gpm-tarow .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:#FFFBEB;color:var(--c-amber);}
/* ĐÁNH GIÁ */
.gpm-revhead{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.gpm-revscore{font-size:1.4rem;font-weight:800;}
.gpm-revstars{display:inline-flex;gap:1px;color:var(--c-star);}
.gpm-revstars .ico{width:16px;height:16px;}
.gpm-revcount{color:var(--c-muted);font-size:.8rem;}
.gpm-quote{background:#F8FAFC;border:1px solid var(--c-border);border-radius:var(--r-md);padding:15px;}
.gpm-quote .qi .ico{width:22px;height:22px;color:var(--c-tint-bd);}
.gpm-quote p{margin:6px 0 0;font-size:.9rem;color:#374151;line-height:1.55;}
.gpm-quote .by{margin-top:10px;font-size:.82rem;color:var(--c-muted);}
/* CHỨNG CHỈ */
.gpm-cscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;}
.gpm-cscroll::-webkit-scrollbar{display:none;}
.gpm-cer-card{flex:0 0 auto;width:110px;scroll-snap-align:start;text-align:center;}
.gpm-cer-card .thumb{display:flex;align-items:center;justify-content:center;height:80px;border:1px solid var(--c-border);border-radius:10px;background:#F8FAFC;color:var(--c-faint);margin-bottom:7px;}
.gpm-cer-card .thumb .ico{width:26px;height:26px;}
.gpm-cer-card:hover .thumb{border-color:var(--c-primary);color:var(--c-primary);}
.gpm-cer-card small{font-size:.76rem;color:var(--c-muted);display:block;line-height:1.3;}
/* LỊCH RẢNH */
.gpm-sched{display:grid;grid-template-columns:auto repeat(7,1fr);gap:10px 4px;align-items:center;}
.gpm-sched .hd{text-align:center;font-size:.72rem;font-weight:700;color:var(--c-muted);}
.gpm-sched .rowlbl{font-size:.76rem;}
.gpm-sched .rowlbl b{display:block;font-weight:700;}
.gpm-sched .rowlbl span{font-size:.62rem;color:var(--c-faint);}
.gpm-dot{width:12px;height:12px;border-radius:50%;margin:0 auto;background:#E5E7EB;}
.gpm-dot.free{background:var(--c-primary);}
.gpm-legend{display:flex;justify-content:center;gap:20px;margin-top:14px;font-size:.8rem;color:var(--c-muted);}
.gpm-legend span{display:inline-flex;align-items:center;gap:6px;}
.gpm-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.gpm-legend i.free{background:var(--c-primary);}
.gpm-legend i.busy{background:#E5E7EB;}
/* ĐIỂM NỔI BẬT */
.gpm-hlist{display:grid;gap:16px;}
.gpm-hitem{display:flex;gap:11px;}
.gpm-hitem .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.gpm-hitem .ic.am{background:#FFFBEB;color:var(--c-amber);}
.gpm-hitem .ic.gr{background:var(--c-tint);color:var(--c-primary);}
.gpm-hitem .ic.bl{background:#EFF6FF;color:var(--c-blue);}
.gpm-hitem .ic.rd{background:#FEF2F2;color:var(--c-red);}
.gpm-hitem h4{margin:0;font-size:.9rem;font-weight:700;}
.gpm-hitem p{margin:2px 0 0;font-size:.78rem;color:var(--c-muted);line-height:1.4;}
/* CHÍNH SÁCH */
.gpm-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.gpm-fitem{display:flex;align-items:center;gap:10px;}
.gpm-fitem .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--c-tint);color:var(--c-primary);flex:0 0 auto;}
.gpm-fitem h4{margin:0;font-size:.84rem;font-weight:700;}
.gpm-fitem p{margin:1px 0 0;font-size:.74rem;color:var(--c-muted);}
/* DOTS */
.gpm-dots{display:flex;justify-content:center;gap:6px;margin-top:12px;}
.gpm-dots i{width:7px;height:7px;border-radius:50%;background:#D1D5DB;display:inline-block;}
.gpm-dots i.on{background:var(--c-primary);width:18px;border-radius:4px;}