/* =========================================
   ROOT
========================================= */

#tra-cuu-tn {
  --primary-tn: #2563eb;
  --primary-dark-tn: #1d4ed8;

  --text-tn: #172033;
  --muted-tn: #667085;

  --border-tn: #e4e7ec;

  --blue-bg-tn: #eff6ff;
  --green-tn: #087a55;
  --green-bg-tn: #ecfdf3;

  --purple-tn: #6941c6;
  --purple-bg-tn: #f4f3ff;

  --red-tn: #b42318;
  --red-bg-tn: #fef3f2;

  --orange-tn: #b54708;
  --orange-bg-tn: #fffaeb;

  max-width: 1180px;

  margin: 0 auto 50px;

  color: var(--text-tn);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  line-height: 1.55;
}


/* =========================================
   HERO
========================================= */

#tra-cuu-tn .hero-tn {
  display: flex;

  align-items: center;

  gap: 18px;

  padding: 25px 27px;

  margin-bottom: 20px;

  border-radius: 18px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f46e5
    );

  box-shadow:
    0 10px 30px
    rgba(37, 99, 235, .18);
}


#tra-cuu-tn .hero-icon-tn {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 60px;
  height: 60px;

  flex: 0 0 auto;

  border-radius: 15px;

  background:
    rgba(255, 255, 255, .15);

  font-size: 30px;
}


#tra-cuu-tn .hero-content-tn h2 {
  margin: 0 0 4px;

  color: #fff;

  font-size: 27px;

  line-height: 1.3;
}


#tra-cuu-tn .hero-content-tn p {
  margin: 0;

  color:
    rgba(255, 255, 255, .88);

  font-size: 14px;
}


/* =========================================
   BOX
========================================= */

#tra-cuu-tn .search-box-tn,
#tra-cuu-tn .school-result-tn {
  padding: 22px;

  border:
    1px solid
    var(--border-tn);

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 5px 20px
    rgba(16, 24, 40, .04);
}


#tra-cuu-tn .search-grid-tn {
  display: grid;

  grid-template-columns:
    180px
    minmax(280px, 1fr);

  gap: 14px;

  align-items: end;
}


#tra-cuu-tn .field-tn label {
  display: block;

  margin-bottom: 7px;

  color: #344054;

  font-size: 13px;

  font-weight: 650;
}


#tra-cuu-tn select {
  width: 100%;

  height: 46px;

  box-sizing: border-box;

  padding:
    0 42px 0 13px;

  border:
    1px solid #d0d5dd;

  border-radius: 10px;

  outline: none;

  background-color: #fff;

  color: var(--text-tn);

  font: inherit;

  font-size: 14px;

  cursor: pointer;

  transition:
    border-color .15s,
    box-shadow .15s;
}


#tra-cuu-tn select:focus {
  border-color: #84adff;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, .11);
}


/* =========================================
   STATUS
========================================= */

#tra-cuu-tn .status-tn {
  margin: 16px 0;

  padding: 14px 16px;

  border-radius: 11px;

  font-size: 14px;
}


#tra-cuu-tn .status-tn.loading-tn {
  color: #1d4ed8;

  background: #eff6ff;
}


#tra-cuu-tn .status-tn.error-tn {
  color: var(--red-tn);

  background: var(--red-bg-tn);
}


#tra-cuu-tn .status-tn.info-tn {
  color: var(--orange-tn);

  background: var(--orange-bg-tn);
}


/* =========================================
   SCHOOL HEADER
========================================= */

#tra-cuu-tn .school-result-tn {
  margin-top: 18px;
}


#tra-cuu-tn .school-header-tn {
  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--border-tn);
}


#tra-cuu-tn .school-code-tn {
  display: inline-block;

  margin-bottom: 7px;

  padding: 4px 10px;

  border-radius: 7px;

  background: #eff4ff;

  color: #3538cd;

  font-size: 12px;

  font-weight: 750;
}


#tra-cuu-tn .school-header-tn h2 {
  margin: 0 0 7px;

  color: #101828;

  font-size: 23px;

  line-height: 1.35;
}


#tra-cuu-tn .school-meta-tn {
  color: var(--muted-tn);

  font-size: 13px;
}


/* =========================================
   STATS
========================================= */

#tra-cuu-tn .stats-tn {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin: 18px 0;
}


#tra-cuu-tn .stat-tn {
  padding: 14px;

  border:
    1px solid #eaecf0;

  border-radius: 12px;

  background: #fafbff;
}


#tra-cuu-tn .stat-number-tn {
  display: block;

  margin-bottom: 2px;

  color: #101828;

  font-size: 21px;

  font-weight: 760;
}


#tra-cuu-tn .stat-label-tn {
  color: var(--muted-tn);

  font-size: 12px;
}


/* =========================================
   FILTER
========================================= */

#tra-cuu-tn .program-filter-tn {
  display: grid;

  grid-template-columns:
    minmax(280px, 1.5fr)
    minmax(220px, .8fr);

  gap: 12px;

  padding: 17px;

  border:
    1px solid #eaecf0;

  border-radius: 13px;

  background: #fafbfc;
}


#tra-cuu-tn .result-count-tn {
  margin: 17px 0 10px;

  color: var(--muted-tn);

  font-size: 13px;
}


/* =========================================
   PROGRAM CARD
========================================= */

#tra-cuu-tn .program-card-tn {
  margin-bottom: 14px;

  overflow: hidden;

  border:
    1px solid
    var(--border-tn);

  border-radius: 14px;

  background: #fff;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}


#tra-cuu-tn .program-card-tn:hover {
  border-color: #bfd2ff;

  box-shadow:
    0 8px 24px
    rgba(37, 99, 235, .08);

  transform:
    translateY(-1px);
}


#tra-cuu-tn .program-head-tn {
  padding: 16px 18px;

  background:
    linear-gradient(
      90deg,
      #f3f7ff 0%,
      #ffffff 72%
    );

  border-left:
    4px solid
    var(--primary-tn);
}


#tra-cuu-tn .program-title-row-tn {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 14px;
}


/* TIÊU ĐỀ NGÀNH NỔI BẬT */
#tra-cuu-tn .program-title-tn {
  position: relative;

  margin: 0 0 9px;

  color: #0f3fa8;

  font-size: 17px;

  font-weight: 800;

  line-height: 1.45;

  letter-spacing: -.1px;
}


#tra-cuu-tn .program-title-tn::before {
  content: "";

  display: inline-block;

  margin-right: 7px;

  color: #2563eb;

  font-size: 10px;

  vertical-align: 2px;
}


#tra-cuu-tn .program-code-list-tn {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


#tra-cuu-tn .code-chip-tn {
  display: inline-flex;

  padding: 3px 8px;

  border-radius: 6px;

  background: #eef2f7;

  color: #475467;

  font-size: 11px;

  font-weight: 650;
}


#tra-cuu-tn .program-extra-tn {
  margin-top: 8px;

  color: var(--muted-tn);

  font-size: 12px;
}


#tra-cuu-tn .program-type-tn {
  flex: 0 0 auto;

  padding: 4px 8px;

  border-radius: 7px;

  background:
    var(--purple-bg-tn);

  color:
    var(--purple-tn);

  font-size: 10px;

  font-weight: 700;
}


/* =========================================
   SCORE
========================================= */

#tra-cuu-tn .score-list-tn {
  border-top:
    1px solid #eaecf0;
}


#tra-cuu-tn .score-row-tn {
  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    minmax(180px, 1.3fr)
    115px;

  gap: 15px;

  align-items: center;

  padding: 13px 17px;

  border-bottom:
    1px solid #f2f4f7;
}


#tra-cuu-tn .score-row-tn:last-child {
  border-bottom: 0;
}


#tra-cuu-tn .method-name-tn {
  color: #344054;

  font-size: 13px;

  font-weight: 680;
}


#tra-cuu-tn .method-track-tn {
  margin-top: 2px;

  color: #98a2b3;

  font-size: 10px;
}


#tra-cuu-tn .score-detail-tn {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  align-items: center;
}


#tra-cuu-tn .comb-chip-tn,
#tra-cuu-tn .component-chip-tn {
  display: inline-flex;

  padding: 3px 7px;

  border-radius: 6px;

  font-size: 10px;

  font-weight: 650;
}


#tra-cuu-tn .comb-chip-tn {
  color: #175cd3;

  background: #eff8ff;
}


#tra-cuu-tn .component-chip-tn {
  color: #6941c6;

  background: #f9f5ff;
}


#tra-cuu-tn .score-note-tn {
  width: 100%;

  margin-top: 4px;

  color: #98a2b3;

  font-size: 10px;
}


#tra-cuu-tn .score-value-tn {
  text-align: right;
}


#tra-cuu-tn .score-number-tn {
  display: block;

  color: #d92d20;

  font-size: 21px;

  font-weight: 800;

  line-height: 1.2;
}


#tra-cuu-tn .score-scale-tn {
  color: #98a2b3;

  font-size: 10px;
}


#tra-cuu-tn .converted-tn {
  display: inline-block;

  margin-top: 4px;

  padding: 2px 6px;

  border-radius: 5px;

  color:
    var(--green-tn);

  background:
    var(--green-bg-tn);

  font-size: 9px;

  font-weight: 700;
}


/* =========================================
   EMPTY
========================================= */

#tra-cuu-tn .empty-program-tn {
  padding: 20px;

  border-top:
    1px solid #eaecf0;

  color: var(--muted-tn);

  font-size: 13px;

  text-align: center;
}


#tra-cuu-tn .no-result-tn {
  padding: 35px 15px;

  color: var(--muted-tn);

  text-align: center;
}


/* =========================================
   LOAD MORE
========================================= */

#tra-cuu-tn .load-more-wrap-tn {
  margin-top: 15px;

  text-align: center;
}


#tra-cuu-tn .load-more-tn {
  padding: 10px 22px;

  cursor: pointer;

  border:
    1px solid #d0d5dd;

  border-radius: 9px;

  background: #fff;

  color: #344054;

  font: inherit;

  font-size: 13px;

  font-weight: 650;
}


#tra-cuu-tn .load-more-tn:hover {
  color: #1d4ed8;

  border-color: #84adff;

  background: #f8faff;
}


/* =========================================
   SOURCES
========================================= */

#tra-cuu-tn .sources-wrap-tn {
  margin-top: 25px;

  padding-top: 17px;

  border-top:
    1px solid #eaecf0;
}


#tra-cuu-tn .toggle-source-tn {
  padding: 0;

  cursor: pointer;

  border: 0;

  background: transparent;

  color:
    var(--primary-tn);

  font: inherit;

  font-size: 12px;

  font-weight: 650;
}


#tra-cuu-tn .sources-tn {
  margin-top: 10px;

  padding: 13px;

  border-radius: 10px;

  background: #f8fafc;

  font-size: 11px;
}


#tra-cuu-tn .source-item-tn {
  margin-bottom: 7px;
}


#tra-cuu-tn .source-item-tn:last-child {
  margin-bottom: 0;
}


#tra-cuu-tn .source-item-tn a {
  color: #175cd3;

  text-decoration: none;
}


#tra-cuu-tn .source-item-tn a:hover {
  text-decoration: underline;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  #tra-cuu-tn {
    margin-top: 10px;
  }


  #tra-cuu-tn .hero-tn {
    padding: 20px 18px;

    border-radius: 14px;
  }


  #tra-cuu-tn .hero-icon-tn {
    width: 48px;
    height: 48px;

    font-size: 24px;
  }


  #tra-cuu-tn .hero-content-tn h2 {
    font-size: 21px;
  }


  #tra-cuu-tn .search-box-tn,
  #tra-cuu-tn .school-result-tn {
    padding: 15px;

    border-radius: 13px;
  }


  #tra-cuu-tn .search-grid-tn,
  #tra-cuu-tn .program-filter-tn {
    grid-template-columns: 1fr;
  }


  #tra-cuu-tn .stats-tn {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #tra-cuu-tn .score-row-tn {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  #tra-cuu-tn .score-value-tn {
    text-align: left;
  }


  #tra-cuu-tn .program-title-row-tn {
    flex-direction: column;
  }


  #tra-cuu-tn .program-title-tn {
    font-size: 16px;
  }

}


/* =========================================
   PRECISE METHOD CLASSIFICATION
========================================= */

#tra-cuu-tn .score-row-equivalent-tn {
  background: #fcfcfd;
}

#tra-cuu-tn .method-kind-tn {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 800;
}

#tra-cuu-tn .method-kind-direct-tn {
  color: #067647;
  background: #ecfdf3;
}

#tra-cuu-tn .method-kind-combined-tn {
  color: #6941c6;
  background: #f4f3ff;
}

#tra-cuu-tn .method-kind-equivalent-tn {
  color: #175cd3;
  background: #eff8ff;
}

#tra-cuu-tn .component-required-tn {
  color: #6941c6;
  background: #f4f3ff;
}

#tra-cuu-tn .component-alternative-tn {
  color: #175cd3;
  background: #eff8ff;
}

#tra-cuu-tn .comb-chip-tn {
  color: #475467;
  background: #f2f4f7;
}

#tra-cuu-tn .raw-scale-tn {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 9px;
}

#tra-cuu-tn .score-note-warning-tn {
  color: #b54708;
}


#tra-cuu-tn .raw-missing-row-tn {
  background: #fcfcfd;
}

#tra-cuu-tn .method-kind-missing-tn {
  color: #475467;
  background: #f2f4f7;
}

#tra-cuu-tn .raw-missing-value-tn {
  color: #98a2b3;
  font-size: 24px;
  font-weight: 800;
}

#tra-cuu-tn .native-summary-tn {
  padding: 10px 16px 12px;
  border-top: 1px dashed #eaecf0;
  color: #667085;
  background: #fcfcfd;
  font-size: 11px;
  line-height: 1.55;
}

#tra-cuu-tn .empty-methods-tn {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}