/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--nen-sang, #f3f4f6);
  font-family: var(--font-chinh, 'Segoe UI', -apple-system, sans-serif);
  font-size: 16px;
  color: var(--chu-chinh, #1a1a2e);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font-chinh);
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
}

p {
  margin: 0;
}

/* ===== UTILITY ===== */
.an {
  display: none !important;
}

.an_hien {
  visibility: hidden;
}

.flex {
  display: flex;
}

.flex_canh_giua {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_hang {
  display: flex;
  align-items: center;
}

.gap_sm { gap: var(--khoang-sm); }
.gap_md { gap: var(--khoang-md); }
.gap_lg { gap: var(--khoang-lg); }

.chu_dam { font-weight: 700; }
.chu_nghieng { font-style: italic; }
.chu_nhe { color: var(--chu-phu); font-size: var(--font-co-vua); }

/* ===== LOADING OVERLAY — see styles/loading.css (shared HL + MODULAR) ===== */

/* ===== LOGIN SCREEN — see styles/login.css (shared HL + MODULAR) ===== */

/* ===== MÀN HÌNH PHỤ (Sub-screen Drawer) ===== */
.lop_phu_popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lop_phu_popup.hien {
  opacity: 1;
  pointer-events: all;
}

/* Panel trượt từ phải — landscape/desktop */
.hop_popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(720px, 74vw);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -6px 0 40px rgba(0,0,0,0.22);
}

.lop_phu_popup.hien .hop_popup {
  transform: translateX(0);
}

/* Header xanh */
.dau_man_hinh_phu {
  background: linear-gradient(90deg, #025b48 0%, #047a60 100%);
  padding: 10px 56px 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  flex-shrink: 0;
  position: relative;
}

.nut_back_popup {
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  font-family: var(--font-chinh);
}

.nut_back_popup:hover {
  background: rgba(255,255,255,0.3);
}

.tieu_de_man_hinh_phu {
  font-size: var(--font-co-xl);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.nut_dong_man_hinh_phu {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  transition: background 0.15s;
  line-height: 1;
  font-family: var(--font-chinh);
}

.nut_dong_man_hinh_phu:hover {
  background: rgba(255,255,255,0.35);
}

/* Vùng nội dung cuộn */
.noi_dung_man_hinh_phu {
  flex: 1;
  overflow-y: auto;
  padding: var(--khoang-lg);
  -webkit-overflow-scrolling: touch;
}

/* Danh sách nút trong popup */
.danh_sach_nut_popup {
  display: flex;
  flex-direction: column;
  gap: var(--khoang-sm);
}

.nut_popup_muc {
  display: flex;
  align-items: center;
  gap: var(--khoang-md);
  padding: var(--khoang-md);
  background: var(--nen-sang);
  border: 1.5px solid #e2e8f0;
  border-radius: var(--goc-vua);
  text-align: left;
  text-decoration: none;
  color: var(--chu-chinh);
  transition: var(--chuyen-tiep);
  cursor: pointer;
  font-family: var(--font-chinh);
  font-size: var(--font-co-lon);
}

.nut_popup_muc:hover {
  background: var(--mau-chinh-nhat);
  border-color: var(--mau-chinh);
  transform: translateY(-2px);
  box-shadow: var(--bong-chinh);
}

.nut_popup_muc .bieu_tuong_popup {
  font-size: 20px;
  flex-shrink: 0;
}

.nut_popup_muc .ten_popup {
  font-weight: 600;
  margin-bottom: 2px;
}

.nut_popup_muc .mo_ta_popup {
  font-size: var(--font-co-vua);
  color: var(--chu-phu);
}

.khung_trinh_phat_nhung {
  width: 100%;
  background: #0b1020;
  border: 1px solid #1f2937;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  position: relative;
}

.iframe_trinh_phat_nhung {
  width: 100%;
  height: min(70vh, 620px);
  border: 0;
  display: block;
  background: #000;
}

.lop_phu_chan_nut_player {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 72px;
  z-index: 3;
  pointer-events: auto;
  background: transparent;
}

.ghi_chu_trinh_phat_nhung {
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
}

/* ===== CẬP NHẬT PROFILE ===== */
.vung_cap_nhat_profile {
  margin-bottom: 20px;
}

.khung_cap_nhat_profile {
  background: #f8fcfb;
  border: 1px solid #d8ebe4;
  border-radius: var(--goc-lon);
  padding: 16px;
  box-shadow: none;
}

.tieu_de_cap_nhat_profile {
  font-size: clamp(28px, 3vw, 42px);
  color: #025b48;
  margin: 0;
  font-weight: 900;
}

.mo_ta_cap_nhat_profile {
  color: #4f5f5b;
  margin: 8px 0 0;
  font-size: 15px;
}

.profile_hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 2px solid #d9ece5;
}

.badge_profile {
  background: linear-gradient(135deg, #0b8a63, #046b4f);
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.luoi_profile_goc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cot_profile_tieu_chuan {
  background: #ffffff;
  border: 1px solid #d8ebe4;
  border-radius: var(--goc-vua);
  padding: 16px;
}

.cot_profile_upload {
  background: #ffffff;
  border: 1px solid #d8ebe4;
  border-radius: var(--goc-vua);
  box-shadow: none;
  padding: 16px;
}

.tieu_de_cot_profile {
  color: #025b48;
  font-weight: 800;
  text-align: left;
  font-size: 1.2rem;
  margin: 0 0 16px;
}

.muc_tieu_chuan_profile {
  margin-bottom: 12px;
}

.muc_tieu_chuan_profile h4 {
  color: #047857;
  font-weight: 800;
  margin-bottom: 6px;
  font-size: 15px;
}

.muc_tieu_chuan_profile p,
.muc_tieu_chuan_profile ul {
  margin: 0;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #d8ebe4;
  border-radius: 10px;
  font-weight: 600;
  color: #1f2937;
}

.muc_tieu_chuan_profile ul {
  padding-left: 28px;
}

.card_tieu_chuan {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card_tieu_chuan:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 91, 72, 0.08);
}

.canh_bao_dang_chup {
  background: #fff6db !important;
  border-color: #f2d9a6 !important;
  color: #92400e;
  font-weight: 800 !important;
}

.khung_pham_vi_profile {
  background: #ffffff;
  border: 1px solid #d8ebe4;
  padding: 12px;
  border-radius: 10px;
}

.khung_pham_vi_profile p {
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
}

.khung_pham_vi_profile p:last-child {
  margin-bottom: 0;
}

.khung_cam_profile {
  background: linear-gradient(180deg, #fff4f2 0%, #ffe7e2 100%);
  border: 1px solid #f1b9ad;
  border-radius: 12px;
  padding: 15px;
}

.khung_cam_profile h4 {
  margin: 0 0 10px;
  color: #c2410c;
  font-weight: 800;
  font-size: 1rem;
}

.khung_cam_profile ul {
  margin: 0;
  padding-left: 22px;
  color: #9a3412;
  font-weight: 600;
}

.khung_cam_profile p {
  margin: 10px 0 0;
  font-style: normal;
  font-weight: 700;
  color: #7c2d12;
}

.khung_iframe_profile {
  width: 100%;
  height: 600px;
  border: 1px solid #d8ebe4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(2, 91, 72, 0.04);
}

.khung_iframe_profile iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ghi_chu_upload_profile {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.ghi_chu_upload_profile.tren {
  margin-top: 0;
}

.ghi_chu_upload_profile.duoi {
  margin-top: 10px;
}

/* Bảng hoa hồng sản phẩm */
.bang_hoa_hong {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--khoang-sm);
  font-size: var(--font-co-vua);
}

/* ===== MÁY TÍNH (Lãi kép + Thời gian chờ) ===== */
.may_tinh_wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.may_tinh_nhap_lieu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.may_tinh_truong {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.may_tinh_truong label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.may_tinh_input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-chinh);
  outline: none;
  transition: border-color 0.2s;
}

.may_tinh_input:focus {
  border-color: #025b48;
  box-shadow: 0 0 0 2px rgba(2, 91, 72, 0.12);
}

.nut_tinh_may_tinh {
  padding: 10px 20px;
  background: var(--mau-chinh);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-chinh);
  cursor: pointer;
  transition: opacity 0.2s;
  align-self: flex-start;
}

.nut_tinh_may_tinh:hover { opacity: 0.88; }

.may_tinh_ket_qua {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px;
}

.tom_tat_lai_kep {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.dong_tom_tat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.so_lai_kep {
  font-size: 18px;
  color: #065f46;
  font-weight: 900;
}

.chi_tiet_lai_kep summary {
  font-weight: 700;
  font-size: 13px;
  color: #025b48;
  cursor: pointer;
  padding: 6px 0;
}

/* Tabs thời gian chờ */
.tgc_tab_wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.tgc_tab {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-chinh);
  cursor: pointer;
  transition: all 0.2s;
}

.tgc_tab.hoat_dong {
  background: var(--mau-chinh);
  color: white;
  border-color: var(--mau-chinh);
}

.tgc_panel { }

.tgc_ket_qua {
  margin-top: 12px;
}

.tgc_danh_sach {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tgc_milestone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 14px;
}

.tgc_label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.tgc_value {
  font-size: 15px;
  font-weight: 800;
  color: #065f46;
}


.bang_hoa_hong th {
  background: var(--mau-chinh);
  color: white;
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
}

.bang_hoa_hong td {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  text-align: center;
}

.bang_hoa_hong tr:nth-child(even) td {
  background: var(--nen-sang);
}

.ten_san_pham {
  font-weight: 700;
  color: var(--mau-chinh);
  font-size: var(--font-co-lon);
  margin-bottom: var(--khoang-xs);
  padding: var(--khoang-sm) 0;
  border-bottom: 2px solid var(--mau-chinh-nhe);
}

.dinh_ky_dong_phi {
  font-size: var(--font-co-vua);
  color: var(--chu-phu);
  margin-bottom: var(--khoang-sm);
}

.muc_san_pham {
  margin-bottom: var(--khoang-lg);
  padding: var(--khoang-md);
  background: white;
  border-radius: var(--goc-vua);
  border: 1px solid #e2e8f0;
}

/* Liên hệ bộ phận */
.muc_lien_he {
  margin-bottom: var(--khoang-md);
  padding: var(--khoang-md);
  background: var(--nen-sang);
  border-radius: var(--goc-vua);
  border-left: 4px solid var(--mau-chinh);
}

.ten_nhom_lien_he {
  font-weight: 700;
  color: var(--mau-chinh);
  margin-bottom: var(--khoang-xs);
}

.ho_tro_khu_vuc {
  font-size: var(--font-co-vua);
  color: var(--chu-phu);
  margin-bottom: var(--khoang-xs);
}

.thong_tin_lien_he_email {
  font-size: var(--font-co-vua);
  color: var(--mau-chinh);
  font-weight: 600;
  word-break: break-all;
}

.thong_tin_lien_he_link {
  display: inline-block;
  font-size: var(--font-co-vua);
  color: #0369a1;
  font-weight: 600;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.thong_tin_lien_he_link:hover {
  color: #025b48;
}

.danh_sach_ho_tro_popup {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #4a5568;
}

.danh_sach_ho_tro_popup li {
  margin-bottom: 5px;
  line-height: 1.45;
}

/* Lịch đào tạo */
.bang_lich {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-co-vua);
}

.bang_lich th {
  background: var(--mau-chinh);
  color: white;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
}

.bang_lich td {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  vertical-align: top;
}

.bang_lich tr:nth-child(even) td {
  background: #f8fffe;
}

.ghi_chu_lich {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--goc-vua);
  padding: var(--khoang-sm) var(--khoang-md);
  font-size: var(--font-co-vua);
  color: #92400e;
  margin-top: var(--khoang-md);
}

/* ===== TAB LỊCH ĐÀO TẠO ===== */
.hang_tab_lich {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 0 0 0;
  border-bottom: 2px solid var(--mau-chinh-nhe);
  margin-bottom: var(--khoang-md);
}

.nut_tab_lich {
  padding: 8px 16px;
  border: 1.5px solid var(--mau-chinh-nhe);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #f1faf7;
  color: var(--mau-chinh);
  font-size: var(--font-co-vua);
  font-weight: 600;
  font-family: var(--font-chinh);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-bottom: -2px;
}

.nut_tab_lich:hover {
  background: var(--mau-chinh-nhat);
}

.nut_tab_lich.hoat_dong {
  background: var(--mau-chinh);
  color: #ffffff;
  border-color: var(--mau-chinh);
}

.noi_dung_tab_lich {
  display: none;
}

.noi_dung_tab_lich.hien {
  display: block;
}

.vung_cuon_bang_lich {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--goc-vua);
  border: 1px solid #e2e8f0;
}

/* ===== THẺ LỊCH ĐÀO TẠO (card style) ===== */
.the_lich_mit {
  display: flex;
  border: 1.5px solid #c8e6de;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(2,91,72,0.08);
}

/* Cột trái: số thứ tự + văn phòng */
.dau_the_lich {
  background: linear-gradient(160deg, #025b48 0%, #047a60 100%);
  color: #ffffff;
  min-width: 80px;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  flex-shrink: 0;
}

.so_thu_tu_lich {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

.van_phong_lich {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.9;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Cột phải: nội dung */
.noi_dung_the_lich {
  flex: 1;
  min-width: 0;
}

/* Hàng ngày học */
.hang_ngay_lich {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}

.o_ngay_lich {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border-right: 1px solid #e2e8f0;
}

.o_ngay_lich:last-child {
  border-right: none;
}

/* Ô ngày thi nền xanh nhạt */
.o_ngay_thi {
  background: #f0fdf4;
}

.icon_lich {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}

.nhan_lich {
  font-size: 10px;
  font-weight: 700;
  color: #025b48;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.gia_tri_lich {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.3;
  white-space: normal;
}

.gia_tri_lich br {
  line-height: 1.2;
}

.the_lich_het_han {
  opacity: 0.55;
  filter: grayscale(25%);
  border-color: #e8d5c4;
  background: #faf6f0;
}

.the_lich_het_han .dau_the_lich {
  background: linear-gradient(165deg, #a86a36 0%, #8f5424 100%);
}

.nhan_het_han {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}

/* Hàng meta (mã lớp, trainer...) */
.hang_meta_lich {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: #f8fffe;
  padding: 6px 14px;
  font-size: 12px;
  color: #4a5568;
}

.hang_meta_lich span {
  padding: 3px 10px 3px 0;
  margin-right: 8px;
  border-right: 1px solid #d1e9e3;
}

.hang_meta_lich span:last-child {
  border-right: none;
}

.hang_meta_lich b {
  color: #025b48;
}

.khung_luu_y_mit {
  margin-top: 14px;
  border: 1px solid #f3c995;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff7ed 100%);
  padding: 14px;
  box-shadow: 0 6px 18px rgba(146, 64, 14, 0.08);
}

.tieu_de_luu_y_mit {
  font-size: 16px;
  font-weight: 800;
  color: #9a3412;
  margin-bottom: 6px;
}

.mo_ta_luu_y_mit {
  font-size: 13px;
  color: #7c2d12;
  margin-bottom: 10px;
}

.danh_sach_luu_y_mit {
  list-style: none;
  counter-reset: luuymit;
  margin: 0;
  padding-left: 0;
}

.danh_sach_luu_y_mit li {
  counter-increment: luuymit;
  position: relative;
  font-size: 13px;
  color: #3b2a1a;
  line-height: 1.5;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid #f5dcc0;
  border-radius: 10px;
  padding: 10px 12px 10px 44px;
}

.danh_sach_luu_y_mit li::before {
  content: counter(luuymit);
  position: absolute;
  top: 10px;
  left: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f97316;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.danh_sach_luu_y_mit li:last-child {
  margin-bottom: 0;
}

/* Topic đào tạo thumbnail */
.anh_topic {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--goc-vua) var(--goc-vua) 0 0;
}

/* Scrollbar tùy chỉnh */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nen-sang); }
::-webkit-scrollbar-thumb { background: var(--mau-chinh-nhe); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mau-chinh); }

/* ===== Công cụ PDF ===== */
.cong_cu_pdf_wrap { display: flex; flex-direction: column; gap: 12px; }

.pdf_menu_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.pdf_menu_card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.pdf_menu_card:hover {
  border-color: #667eea;
  box-shadow: 0 2px 12px rgba(102,126,234,.18);
}

.pdf_menu_card .pdf_card_icon { font-size: 32px; margin-bottom: 8px; display: block; }

.pdf_drop_zone {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: #6b7280;
  font-size: 14px;
}

.pdf_drop_zone:hover, .pdf_drop_zone.dragover {
  border-color: #667eea;
  background: #f0f2ff;
}

.nut_quay_lai_pdf {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nut_quay_lai_pdf:hover { opacity: 0.75; }

.pdf_file_list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }

.pdf_file_item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

.pdf_file_item .pdf_file_name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf_file_item .pdf_file_size { color: #6b7280; font-size: 11px; white-space: nowrap; }
.pdf_file_item button { background: none; border: none; cursor: pointer; color: #ef4444; font-size: 16px; line-height: 1; padding: 0 2px; }

/* ===== Công cụ JSON converter ===== */
.json_cv_wrap { display: flex; flex-direction: column; gap: 12px; }

.json_cv_drop_zone {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: #6b7280;
  font-size: 14px;
}

.json_cv_drop_zone:hover, .json_cv_drop_zone.dragover {
  border-color: #667eea;
  background: #f0f2ff;
}

.json_cv_file_tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.json_cv_tab {
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s;
}

.json_cv_tab.active { border-color: #667eea; background: #eef2ff; color: #3730a3; font-weight: 600; }

/* ===== Professional display mode, aligned with REPORT modular ===== */
body.giao_dien_chuyen_nghiep .bieu_tuong_menu,
body.giao_dien_chuyen_nghiep .bieu_tuong_danh_muc,
body.giao_dien_chuyen_nghiep .bieu_tuong_nut,
body.giao_dien_chuyen_nghiep .bieu_tuong_popup,
body.giao_dien_chuyen_nghiep .icon_lich,
body.giao_dien_chuyen_nghiep .pdf_card_icon {
  display: none !important;
}

body.giao_dien_chuyen_nghiep .dau_nut,
body.giao_dien_chuyen_nghiep .nut_popup_muc {
  gap: 10px;
}

body.giao_dien_chuyen_nghiep .muc_menu_sidebar,
body.giao_dien_chuyen_nghiep .nut_tab_lich,
body.giao_dien_chuyen_nghiep .nut_dang_nhap,
body.giao_dien_chuyen_nghiep .nut_dang_xuat_sidebar,
body.giao_dien_chuyen_nghiep .nut_dang_xuat_mobile {
  border-radius: 8px;
  letter-spacing: 0;
}

/* ===== Modular formatting layer for HL professional mode ===== */
body.giao_dien_chuyen_nghiep {
  background: #f3f4f6;
  color: #1a1a2e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.giao_dien_chuyen_nghiep button,
body.giao_dien_chuyen_nghiep input,
body.giao_dien_chuyen_nghiep select,
body.giao_dien_chuyen_nghiep textarea {
  font: inherit;
}

body.giao_dien_chuyen_nghiep input,
body.giao_dien_chuyen_nghiep select,
body.giao_dien_chuyen_nghiep textarea,
body.giao_dien_chuyen_nghiep .may_tinh_input,
body.giao_dien_chuyen_nghiep .o_tim_kiem_desktop {
  min-height: 40px;
  border: 1.5px solid #b3d9d0;
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

body.giao_dien_chuyen_nghiep input:focus,
body.giao_dien_chuyen_nghiep select:focus,
body.giao_dien_chuyen_nghiep textarea:focus,
body.giao_dien_chuyen_nghiep .may_tinh_input:focus,
body.giao_dien_chuyen_nghiep .o_tim_kiem_desktop:focus {
  border-color: #025b48;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 91, 72, 0.12);
}

body.giao_dien_chuyen_nghiep .nut_dang_nhap {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  background: #025b48;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.15;
  transition: all 0.2s ease;
}

body.giao_dien_chuyen_nghiep .muc_section,
body.giao_dien_chuyen_nghiep .man_hinh_tim_kiem,
body.giao_dien_chuyen_nghiep .khung_cap_nhat_profile,
body.giao_dien_chuyen_nghiep .agent-selection,
body.giao_dien_chuyen_nghiep .muc_san_pham,
body.giao_dien_chuyen_nghiep .cot_profile_tieu_chuan,
body.giao_dien_chuyen_nghiep .cot_profile_upload {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body.giao_dien_chuyen_nghiep .muc_section {
  margin-bottom: 24px;
  overflow: hidden;
}

body.giao_dien_chuyen_nghiep .man_hinh_danh_muc {
  padding: 16px;
}

body.giao_dien_chuyen_nghiep .dau_danh_muc {
  margin-bottom: 12px;
}

body.giao_dien_chuyen_nghiep .nhan_danh_muc,
body.giao_dien_chuyen_nghiep .nhan_tim_kiem,
body.giao_dien_chuyen_nghiep .nhan_lich,
body.giao_dien_chuyen_nghiep .may_tinh_truong label,
body.giao_dien_chuyen_nghiep .ho_tro_khu_vuc {
  color: #374151;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.giao_dien_chuyen_nghiep .tieu_de_danh_muc,
body.giao_dien_chuyen_nghiep .tieu_de_tim_kiem,
body.giao_dien_chuyen_nghiep .tieu_de_cap_nhat_profile,
body.giao_dien_chuyen_nghiep .tieu_de_cot_profile,
body.giao_dien_chuyen_nghiep .ten_san_pham,
body.giao_dien_chuyen_nghiep .ten_nhom_lien_he {
  color: #025b48;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
}

body.giao_dien_chuyen_nghiep .luoi_danh_muc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.giao_dien_chuyen_nghiep .the_danh_muc {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid #b3d9d0;
  border-radius: 8px;
  background: #e6f4f1;
  color: #025b48;
  text-align: center;
  font-family: var(--font-chinh);
  transition: all 0.2s ease;
}

body.giao_dien_chuyen_nghiep .the_danh_muc:hover {
  transform: translateY(-2px);
  border-color: #025b48;
  box-shadow: 0 2px 10px rgba(2, 91, 72, 0.15);
}

body.giao_dien_chuyen_nghiep .noi_dung_the_danh_muc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.giao_dien_chuyen_nghiep .ten_danh_muc {
  color: #025b48;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

body.giao_dien_chuyen_nghiep .mo_ta_danh_muc {
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

body.giao_dien_chuyen_nghiep .hop_popup {
  width: min(720px, 74vw);
  background: #ffffff;
  box-shadow: -6px 0 40px rgba(0, 0, 0, 0.22);
}

body.giao_dien_chuyen_nghiep .dau_man_hinh_phu {
  min-height: 56px;
  padding: 10px 56px 10px 16px;
  background: linear-gradient(90deg, #025b48 0%, #047a60 100%);
}

body.giao_dien_chuyen_nghiep .tieu_de_man_hinh_phu {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  text-transform: uppercase;
}

body.giao_dien_chuyen_nghiep .noi_dung_man_hinh_phu {
  padding: 16px;
  background: #f8fffe;
}

body.giao_dien_chuyen_nghiep .nut_popup_muc {
  min-height: 56px;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #b3d9d0;
  border-radius: 8px;
  box-shadow: none;
  color: #1a1a2e;
}

body.giao_dien_chuyen_nghiep .nut_popup_muc:hover {
  background: #f8fcfb;
  border-color: #025b48;
  transform: none;
  box-shadow: none;
}

body.giao_dien_chuyen_nghiep .nut_popup_muc .ten_popup {
  color: #025b48;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

body.giao_dien_chuyen_nghiep .nut_popup_muc .mo_ta_popup {
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

body.giao_dien_chuyen_nghiep .bang_hoa_hong,
body.giao_dien_chuyen_nghiep .bang_lich {
  font-size: 14px;
}

body.giao_dien_chuyen_nghiep .bang_hoa_hong th,
body.giao_dien_chuyen_nghiep .bang_lich th {
  background: #025b48;
  color: #ffffff;
  font-weight: 900;
}

body.giao_dien_chuyen_nghiep .bang_hoa_hong td,
body.giao_dien_chuyen_nghiep .bang_lich td {
  border-color: #e2e8f0;
  color: #1a1a2e;
  font-weight: 600;
}

body.giao_dien_chuyen_nghiep .nut_tab_lich {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #b3d9d0;
  border-radius: 8px;
  background: #ffffff;
  color: #025b48;
  font-weight: 900;
}

body.giao_dien_chuyen_nghiep .nut_tab_lich.hoat_dong {
  background: #025b48;
  border-color: #025b48;
  color: #ffffff;
}

/* ===== KẾT QUẢ TÌM KIẾM D1 ===== */
body.giao_dien_chuyen_nghiep .danh_sach_ket_qua_tim_kiem {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.giao_dien_chuyen_nghiep .muc_ket_qua_tim_kiem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}

body.giao_dien_chuyen_nghiep .muc_ket_qua_tim_kiem:hover {
  border-color: #025b48;
  box-shadow: 0 0 0 3px rgba(2, 91, 72, 0.08);
  background: #f8fdfb;
}

body.giao_dien_chuyen_nghiep .bieu_tuong_ket_qua {
  font-size: 1.4em;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7f2;
  border-radius: 6px;
}

body.giao_dien_chuyen_nghiep .noi_dung_ket_qua {
  flex: 1;
  min-width: 0;
}

body.giao_dien_chuyen_nghiep .ten_ket_qua {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.92em;
  line-height: 1.3;
  word-break: break-word;
}

body.giao_dien_chuyen_nghiep .duong_dan_ket_qua {
  margin-top: 4px;
  font-size: 0.78em;
  color: #718096;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.giao_dien_chuyen_nghiep .trang_thai_tim_kiem {
  text-align: center;
  padding: 32px 16px;
  color: #718096;
  font-size: 0.9em;
}

body.giao_dien_chuyen_nghiep .trang_thai_tim_kiem.loi {
  color: #c53030;
}

body.giao_dien_chuyen_nghiep .nut_xem_them_tim_kiem {
  margin-top: 12px;
  width: 100%;
  min-height: 40px;
  border: 1px dashed #b3d9d0;
  border-radius: 8px;
  background: transparent;
  color: #025b48;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.giao_dien_chuyen_nghiep .nut_xem_them_tim_kiem:hover {
  background: #e6f7f2;
  border-style: solid;
}

body.giao_dien_chuyen_nghiep .nut_xem_them_tim_kiem.an {
  display: none;
}