/* ===== Design tokens ===== */
:root {
  --accent: #2454ff;
  --accent-dark: #1638b0;
  --cta: #f5a623;
  --cta-dark: #cc8309;
  --text: #1a1d29;
  --muted: #6b7080;
  --border: #dfe2ea;
  --bg: #eef4ff;
  --card-bg: #ffffff;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

/* ===== Page background ===== */
/* Painted on the canvas itself. Mobile browsers can leave the area below the page
   unpainted for a frame while scrolling or rubber-banding; without this it shows through
   as white. */
html {
  background-color: #FFFF70;
  /* Fluid root size: text across the whole site is in rem, so this one line scales every
     font-size continuously with real viewport width (14px at 320px phones, up to the full
     16px at 640px+ desktop) instead of jumping between fixed breakpoints. Edit the 3 clamp()
     numbers here to change how small/large text gets site-wide on narrow screens. */
  font-size: clamp(14px, 12px + 0.625vw, 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  /* Backstop against horizontal-overflow bugs (like the compare-table one this guards
     against): if any element ever pushes wider than the viewport despite its own
     containment rules, this clips it instead of letting the whole page grow and show
     blank space / a horizontal scrollbar. */
  overflow-x: hidden;
  font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background-color: #FFFF70;
  color: var(--text);
}

/* ===== Hero (top banner with logo + site title) ===== */
.hero {
  background: #FFFF70;
  color: var(--text);
  padding: 48px 24px 40px;
  text-align: center;
  border-bottom: 3px solid #fff;
}

.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  position: absolute;
  left: 10px;
  top: calc(50% - 10px);
  transform: translateY(-50%);
  display: block;
  height: 75px;
  padding: 8px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(20, 20, 40, 0.18);
}

.hero-logo img {
  display: block;
  height: 100%;
  width: auto;
}

@media (max-width: 640px) {
  .hero {
    padding-top: 28px;
  }

  /* Logo stacks above the title instead of sitting beside it on narrow phones. */
  .hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .hero-logo {
    position: static;
    transform: none;
    align-self: flex-start;
  }
}

.hero h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .hero h1 {
    font-weight: 800;
    /* Sized specifically so the full Vietnamese title stays on one line at any phone width:
       the 5.5vw term tracks the actual space available, the -3px trims a safety margin, and
       the whole thing is bounded so it never goes below 15px or above 36px. If you widen the
       title text later, shrink these numbers (smaller vw coefficient / more negative offset)
       to keep it fitting on one line. */
    font-size: clamp(14px, 5vw - 3px, 34px);
  }
}

.hero p {
  margin: 0;
  opacity: 1;
  font-size: 0.9rem;
}

/* ===== Main content shell ===== */
main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.tab-panel:not([hidden]) {
  animation: tab-panel-in 0.5s var(--ease-smooth);
}

@keyframes tab-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Tool tabs (GPA / Filters / Compare switcher) ===== */
.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tool-tab {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.7125rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}

.tool-tab:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 20, 40, 0.15);
}

.tool-tab.active {
  background: #fff;
  color: var(--accent-dark);
  border-color: #fff;
}

/* ===== Shared card shell for the 3 tool panels (GPA / Filters / Compare) ===== */
.filters,
.gpa-tool,
.compare-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.filters,
.gpa-tool,
.compare-tool {
  flex-direction: column;
  align-items: stretch;
}

.compare-tool {
  padding-top: 20px;
  padding-bottom: 5px;
}

/* ===== GPA calculator tool ===== */
.gpa-formula {
  margin: 0;
  color: var(--accent-dark);
  font-size: 1.125rem;
  font-weight: 700;
  font-family: ui-monospace, "Segoe UI", Menlo, Consolas, monospace;
  background: var(--bg);
  padding: 10px 14px;
  border-radius: 8px;
  align-self: flex-start;
}

@media (max-width: 640px) {
  .gpa-formula {
    font-size: 0.75rem;
  }
}

.gpa-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.gpa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gpa-fields .feedback-field input,
.gpa-actions .apply-btn,
.gpa-actions .reset-btn {
  height: 42px;
  font-family: inherit;
}

.gpa-fields .feedback-field input.invalid {
  border-color: #c22;
}

.gpa-fields .feedback-field input.invalid:focus {
  box-shadow: 0 0 0 3px rgba(194, 34, 34, 0.15);
}

.field-warning {
  min-height: 1.125rem;
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.325;
  font-weight: 700;
  color: #c22;
}

@media (max-width: 640px) {
  /* GPA score fields stack full-width instead of sharing a row on phones. */
  .gpa-fields {
    gap: 10px;
  }

  .gpa-fields .feedback-field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .gpa-fields .field-warning {
    min-height: 0;
    margin-top: 5px;
  }

  .gpa-actions {
    flex-basis: 100%;
  }
}

.gpa-result {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.gpa-result.success {
  background: rgba(36, 84, 255, 0.08);
  color: var(--accent-dark);
}

.gpa-result.error {
  background: rgba(194, 34, 34, 0.08);
  color: #c22;
}

/* ===== Compare tool (up to 3 schools side by side) ===== */
.compare-selects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.compare-selects .filter-group {
  min-width: 0;
}

.compare-selects .toggle-text {
  flex: 1;
  text-align: center;
}

@media (max-width: 640px) {
  /* 3 school pickers stack into 1 column on phones instead of squeezing side by side. */
  .compare-selects {
    grid-template-columns: 1fr;
  }
}

.compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.compare-actions .apply-btn,
.compare-actions .reset-btn {
  flex: 1;
}

.compare-result {
  overflow-x: auto;
  /* Explicit belt-and-suspenders containment: the compare-table below can be wider than
     this box (min-width: 480px, so 2-3 schools stay legible instead of squishing). That's
     meant to scroll locally via overflow-x, which normally also lets a flex item shrink
     past its content's min-width — but that depends on a subtle flexbox auto-min-size rule
     that some mobile browsers don't apply consistently, letting the table force the whole
     page wider instead of just scrolling inside this box. max-width/min-width here make the
     containment unconditional instead of relying on that implicit behavior. */
  max-width: 100%;
  min-width: 0;
}

.compare-result:empty {
  display: none;
}

.compare-result:not(:empty) {
  animation: compare-result-in 0.32s var(--ease-smooth);
}

@keyframes compare-result-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.compare-table {
  width: 100%;
  min-width: 480px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.compare-table col.compare-col-label {
  width: 18%;
}

.compare-table th,
.compare-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.compare-table thead th {
  color: var(--accent-dark);
  font-size: 0.95rem;
}

.compare-table tbody th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ===== Filters tool ===== */
.filters-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--text);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 16px;
  align-items: end;
}

.filters-grid .filter-group {
  min-width: 0;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  flex: 1 1 220px;
}

.filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

/* ===== Dropdown component (shared by Filters + Compare pickers) ===== */
.dropdown-check-list {
  position: relative;
}

.dropdown-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.toggle-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown-toggle:hover {
  border-color: var(--accent);
}

.filters .dropdown-toggle,
.filter-actions .apply-btn,
.filter-actions .reset-btn {
  height: 42px;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dropdown-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36, 84, 255, 0.15);
}

.chevron {
  color: var(--muted);
  margin-left: 8px;
  transition: transform 0.15s ease;
}

.dropdown-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 20, 40, 0.12);
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
  /* Open/close is animated, so the panel can no longer use the `hidden` attribute:
     display:none has nothing to transition from. visibility keeps it out of reach of the
     pointer and of assistive tech while closed, and the panel is absolutely positioned so
     it still takes up no space. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.2s ease,
              transform 0.28s var(--ease-smooth),
              visibility 0s linear 0.28s;
}

.dropdown-panel.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease,
              transform 0.28s var(--ease-smooth),
              visibility 0s;
}

/* Options ripple in behind the panel. The delays live only in the open state, so closing
   fades them all out together instead of staggering in reverse. */
.dropdown-panel label {
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.3s var(--ease-smooth), transform 0.4s var(--ease-spring), background 0.15s ease;
}

.dropdown-panel.open label {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-panel.open label:nth-child(1) {
  transition-delay: 0.030s;
}

.dropdown-panel.open label:nth-child(2) {
  transition-delay: 0.052s;
}

.dropdown-panel.open label:nth-child(3) {
  transition-delay: 0.074s;
}

.dropdown-panel.open label:nth-child(4) {
  transition-delay: 0.096s;
}

.dropdown-panel.open label:nth-child(5) {
  transition-delay: 0.118s;
}

.dropdown-panel.open label:nth-child(6) {
  transition-delay: 0.140s;
}

.dropdown-panel.open label:nth-child(7) {
  transition-delay: 0.162s;
}

.dropdown-panel.open label:nth-child(8) {
  transition-delay: 0.184s;
}

.dropdown-panel.open label:nth-child(9) {
  transition-delay: 0.206s;
}

.dropdown-panel.open label:nth-child(10) {
  transition-delay: 0.228s;
}

.dropdown-panel.open label:nth-child(11) {
  transition-delay: 0.250s;
}

.dropdown-panel.open label:nth-child(12) {
  transition-delay: 0.272s;
}

/* ===== Reduced-motion overrides (kept in sync with every animated element below) ===== */
@media (prefers-reduced-motion: reduce) {
  .dropdown-panel,
  .dropdown-panel.open,
  .dropdown-panel label,
  .dropdown-panel.open label,
  .star-wrap .star-fill,
  .apply-btn,
  .reset-btn,
  .tool-tab,
  .feedback-submit,
  .register-btn,
  .modal-cancel,
  .share-fab,
  .share-pill,
  .share-option {
    transition-duration: 0s;
    transition-delay: 0s;
    transform: none;
  }

  /* Not folded into the block above: this transform also centers the icon (position:absolute
     + translate(-50%,-50%)), so it can't be reset to none like the others — only the timing
     is disabled here, so the crossfade still swaps correctly, just instantly. */
  .share-fab-icon {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

.dropdown-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.dropdown-panel label:hover {
  background: var(--bg);
}

.dropdown-panel label.option-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown-panel input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* ===== Shared buttons (apply / reset, used across all 3 tools) ===== */
.apply-btn {
  padding: 10px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  height: fit-content;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .apply-btn:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20, 20, 40, 0.18);
  }
}

.reset-btn {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  height: fit-content;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reset-btn:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20, 20, 40, 0.12);
    color: var(--accent);
  }
}

/* ===== Results grid + school cards ===== */
.results-count {
  color: var(--text);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.results-grid {
  display: grid;
  /* min(340px, 100%) means the card's minimum width can never exceed the container's own
     width, so this grid can't force horizontal overflow on any screen, even one narrower
     than 340px. */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 18px;
  align-items: stretch;
}

.school-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.18s ease;
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.school-card.is-appearing {
  /* Long ease-out: most of the travel happens early, then a slow settle, so the card
     drifts into place instead of snapping. Only opacity and transform animate, which the
     compositor can handle without repainting the card on every frame. */
  animation: card-appear 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .school-card.is-appearing,
  .modal-overlay,
  .modal-box,
  .tab-panel:not([hidden]),
  .chat-toast,
  .chat-toast.chat-toast-out,
  .compare-result:not(:empty) {
    animation: none;
  }
}

.school-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(20, 20, 40, 0.12);
}

.school-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.open-page-hint {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.card-thumb {
  width: calc(100% + 36px);
  margin: -18px -18px 0;
  height: 160px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.school-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.school-city {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.detail-hero .school-city {
  color: var(--text);
}

.school-region {
  display: inline-block;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.detail-hero .school-region {
  background: #fff;
  color: var(--accent-dark);
}

.school-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.tag.matched {
  background: rgba(36, 84, 255, 0.1);
  border-color: rgba(36, 84, 255, 0.3);
  color: var(--accent-dark);
}

.tag-more {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-style: italic;
}

.tag-program {
  background: #fff7e6;
  border-color: #f2d9a3;
}

.tag-program.matched {
  background: rgba(36, 84, 255, 0.1);
  border-color: rgba(36, 84, 255, 0.3);
  color: var(--accent-dark);
}

/* ===== Detail blocks (shared between result cards' data and the school detail page) ===== */
.detail-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-heading {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-dark);
}

.detail-subblock {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
}

.detail-subblock strong {
  color: var(--text);
}

.bullet-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
}

.no-data {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

.no-results {
  color: var(--text);
  text-align: center;
  padding: 40px 0;
}

/* ===== Footer ===== */
footer {
  text-align: center;
  color: var(--text);
  font-size: 0.85rem;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

footer p {
  font-weight: 700;
}

.loading-text {
  text-align: center;
  color: var(--text);
  padding: 60px 0;
}

/* ===== School detail page (school.html) ===== */
.detail-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.detail-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.back-link {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.detail-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-hero h1 {
  margin: 0;
  font-size: 1.7rem;
}

.contact-link {
  display: inline-block;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-all;
}

.address-list {
  margin-top: 10px;
}

.address-list li {
  margin-bottom: 10px;
}

.address-zh {
  color: var(--muted);
  font-size: 0.8rem;
}

.detail-intro {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 720px;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 900px) {
  .detail-layout {
    grid-template-columns: 2fr 1fr;
  }

  .detail-sidebar {
    position: sticky;
    top: 20px;
  }
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.detail-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-card {
  gap: 12px;
}

.section-heading {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--accent-dark);
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}

.detail-notfound {
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

/* ===== Feedback / registration form (used inside the contact + rating modals) ===== */
.feedback-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feedback-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.feedback-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
}

.feedback-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.feedback-field input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}

.feedback-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36, 84, 255, 0.15);
}

.feedback-submit {
  padding: 10px 22px;
  background: var(--cta);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background 0.15s ease;
}

.feedback-submit:hover {
  background: var(--cta-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 20, 40, 0.18);
}

.feedback-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ===== Star rating widget ===== */
.star-rating,
.rating-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The grey star stays in flow and sizes the box, so the box is always exactly as wide as
   the glyph the font actually draws. The old fixed `width: 1em` was a guess at the advance
   width of ★, and the gold overlay — clipped to that width by overflow:hidden, while the
   grey star below it was not clipped — ended up a few pixels short of it.
   The 1.15 line-height leaves the glyph headroom inside the clip box so nothing is
   trimmed vertically either. */
.star-wrap {
  position: relative;
  display: inline-block;
  line-height: 1.15;
}

.star-rating .star-wrap {
  font-size: 1.7rem;
}

.rating-stars .star-wrap {
  font-size: 1.05rem;
}

.star-wrap .star-bg {
  display: block;
  white-space: nowrap;
  color: var(--border);
}

/* Sits exactly on top of the grey star; the inline width (0-100%) is what reveals it. */
.star-wrap .star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;
  transition: width 0.12s var(--ease-smooth);
}

.star-wrap.interactive {
  cursor: pointer;
  user-select: none;
}

/* ===== Site-wide rating summary (footer) ===== */
.site-rating {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
}

.rating-percentage {
  font-weight: 600;
  color: var(--text);
}

.rating-empty {
  font-style: italic;
}

/* ===== "Đăng ký tư vấn" register button on school cards ===== */
.register-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.register-row .open-page-hint {
  margin-top: 0;
  padding-top: 0;
}

.register-btn {
  padding: 7px 16px;
  background: var(--cta);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background 0.15s ease;
}

.register-btn:hover {
  background: var(--cta-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 20, 40, 0.18);
}

/* ===== Modal (contact form + rating popup) ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 25, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: modal-overlay-in 0.2s ease;
}

@keyframes modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 28px;
  max-width: 380px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: modal-box-in 0.32s var(--ease-smooth);
}

@keyframes modal-box-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-box .feedback-field {
  flex: 0 0 auto;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.modal-actions .feedback-submit {
  flex: 1 1 auto;
}

.modal-cancel {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), border-color 0.15s ease, color 0.15s ease;
}

.modal-cancel:hover {
  border-color: var(--muted);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 20, 40, 0.1);
}

.modal-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}

.modal-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.modal-stars {
  justify-content: center;
  padding: 6px 0;
}

.feedback-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.feedback-tag {
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.feedback-tag:hover {
  border-color: var(--accent);
}

.feedback-tag.selected {
  background: rgba(36, 84, 255, 0.1);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.feedback-comment {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.feedback-comment:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36, 84, 255, 0.15);
}


/* ===== Toast notifications (bottom-right "Đã gửi" / error popups) ===== */
.chat-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(420px, calc(100vw - 40px));
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 30px 16px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  z-index: 1100;
  animation: chat-toast-in 0.3s var(--ease-smooth);
}

.chat-toast.chat-toast-out {
  animation: chat-toast-out 0.2s ease forwards;
}

@keyframes chat-toast-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes chat-toast-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(10px); opacity: 0; }
}

.chat-toast-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.chat-toast-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

.chat-toast-body {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.chat-toast.success {
  background: #1a7f37;
  border-color: #1a7f37;
}

.chat-toast.error {
  background: #c22;
  border-color: #c22;
}

.chat-toast.success .chat-toast-title,
.chat-toast.success .chat-toast-body,
.chat-toast.error .chat-toast-title,
.chat-toast.error .chat-toast-body {
  color: #fff;
}

.chat-toast.success .chat-toast-close,
.chat-toast.error .chat-toast-close {
  color: rgba(255, 255, 255, 0.85);
}

/* ===== Floating share widget (bottom-right) ===== */
.share-widget {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 641px) {
  /* Scaling the whole fixed widget (instead of doubling each internal size individually)
     keeps the FAB, pill, icons and gaps all proportional automatically. Anchored to the
     bottom-right corner so it grows up and to the left, staying pinned to the same edge
     instead of drifting from its default center-origin scale. */
  .share-widget {
    transform: scale(2);
    transform-origin: bottom right;
  }
}

.share-fab {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 20, 40, 0.28);
  transition: transform 0.2s var(--ease-spring), background 0.2s ease, box-shadow 0.3s var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .share-fab:hover {
    box-shadow: 0 6px 18px rgba(20, 20, 40, 0.32);
  }
}

.share-fab:active {
  transform: scale(0.9);
}

.share-fab[aria-expanded="true"] {
  background: var(--accent-dark);
  box-shadow: 0 6px 20px rgba(20, 20, 40, 0.35);
}

.share-fab-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
  transition: opacity 0.3s var(--ease-smooth), transform 0.35s var(--ease-spring);
}

.share-fab-icon-close {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(-45deg);
}

.share-fab[aria-expanded="true"] .share-fab-icon-share {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(45deg);
}

.share-fab[aria-expanded="true"] .share-fab-icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.share-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 20, 40, 0.18);
  max-width: 0;
  padding: 8px 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.5s var(--ease-spring), padding 0.5s var(--ease-spring), opacity 0.25s var(--ease-smooth);
}

.share-pill.open {
  max-width: 260px;
  padding: 8px;
  opacity: 1;
  pointer-events: auto;
}

.share-option {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.4);
  transition: opacity 0.3s var(--ease-smooth), transform 0.4s var(--ease-spring), box-shadow 0.2s var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .share-option:hover {
    box-shadow: 0 4px 10px rgba(20, 20, 40, 0.2);
  }
}

.share-pill.open .share-option {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.share-pill.open .share-option:active {
  transform: scale(0.88);
}

.share-pill.open .share-option:nth-child(1) { transition-delay: 0.06s; }
.share-pill.open .share-option:nth-child(2) { transition-delay: 0.12s; }
.share-pill.open .share-option:nth-child(3) { transition-delay: 0.18s; }
.share-pill.open .share-option:nth-child(4) { transition-delay: 0.24s; }

.share-copy { background: var(--accent); }

.share-zalo,
.share-facebook,
.share-messenger {
  background: #fff;
  border: 1px solid var(--border);
  cursor: pointer;
}