/* =========================================================
   1. GIAO DIỆN LỊCH THI APTIS (TÍCH XANH & SỐ LỚN)
========================================================= */
:root {
  --aptis-primary: #0f6c5d;
  --aptis-primary-hover: #0a4f44;
  --aptis-primary-light: #e6f4f1;
  --aptis-accent: #e11d48;
  --aptis-accent-hover: #be123c;
  --aptis-success: #10b981;
  --aptis-success-light: #d1fae5;
  --aptis-bg-page: #f0f4f8;
  --aptis-bg-card: #ffffff;
  --aptis-border: #e2e8f0;
  --aptis-text-main: #1e293b;
  --aptis-text-muted: #64748b;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.edulife-aptis-container * { box-sizing: border-box; }
.edulife-aptis-container {
  font-family: var(--font-stack);
  background-color: var(--aptis-bg-page);
  color: var(--aptis-text-main);
  padding: 30px 15px;
  line-height: 1.5;
}
.edulife-aptis-container .app-container { max-width: 1180px; margin: 0 auto; }

/* Header APTIS */
.edulife-aptis-container .header-section { text-align: center; margin-bottom: 28px; }
.edulife-aptis-container .top-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background-color: var(--aptis-primary-light); color: var(--aptis-primary);
  font-size: 0.8rem; font-weight: 700; padding: 6px 16px;
  border-radius: 20px; margin-bottom: 12px; text-transform: uppercase;
}
.edulife-aptis-container .main-title { font-size: 1.85rem; font-weight: 800; color: var(--aptis-primary); margin-bottom: 8px; }
.edulife-aptis-container .subtitle { color: var(--aptis-text-muted); font-size: 0.95rem; margin: 4px 0 0; }
.edulife-aptis-container .subtitle-highlight { color: var(--aptis-primary); font-weight: 700; }

/* Filter APTIS */
.edulife-aptis-container .quick-options { display: flex; gap: 8px; flex-wrap: wrap; }
.edulife-aptis-container .filter-card {
  background: var(--aptis-bg-card); border-radius: 16px; padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); border: 1px solid var(--aptis-border);
  margin-bottom: 24px; display: flex; flex-direction: column; gap: 18px;
}
.edulife-aptis-container .filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edulife-aptis-container .filter-label { font-weight: 600; font-size: 0.95rem; color: var(--aptis-text-main); min-width: 110px; }
.edulife-aptis-container .pill-btn {
  background: #f1f5f9; border: 1px solid transparent; padding: 8px 18px;
  border-radius: 20px; font-size: 0.88rem; font-weight: 600;
  color: var(--aptis-text-main); cursor: pointer; transition: all 0.2s ease;
}
.edulife-aptis-container .pill-btn:hover { background: var(--aptis-primary-light); color: var(--aptis-primary); }
.edulife-aptis-container .pill-btn.active { background: var(--aptis-primary); color: #ffffff; box-shadow: 0 2px 8px rgba(15, 108, 93, 0.25); }

/* Dropdown Xem Thêm APTIS */
.edulife-aptis-container .more-months-wrapper { position: relative; display: inline-block; }
.edulife-aptis-container .more-btn { background: #e2e8f0; border: 1px dashed #94a3b8; display: flex; align-items: center; gap: 4px; }
.edulife-aptis-container .more-btn.active { border-style: solid; border-color: var(--aptis-primary); background: var(--aptis-primary-light); color: var(--aptis-primary); }
/* "left"/"width" được tính lại bằng JS (positionMoreDropdown()) mỗi lần mở, để tự co/dịch lại
   vừa trong màn hình thay vì luôn mở cứng sang phải theo nút bấm rồi tràn ra ngoài viewport gây
   scroll ngang cho cả trang -- box-sizing:border-box để padding không cộng dồn vào width JS đặt. */
.edulife-aptis-container .more-dropdown {
  display: none; position: absolute; top: 110%; left: 0; background: #ffffff; box-sizing: border-box;
  min-width: 160px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 12px;
  border: 1px solid var(--aptis-border); z-index: 100; padding: 6px 0; max-height: 250px;
  overflow-y: auto; overflow-x: hidden;
}
.edulife-aptis-container .more-dropdown.show { display: block; }
.edulife-aptis-container .dropdown-item {
  padding: 10px 16px; font-size: 0.88rem; font-weight: 500; color: var(--aptis-text-main);
  cursor: pointer; display: block; width: 100%; text-align: left; border: none; background: transparent;
}
.edulife-aptis-container .dropdown-item:hover, .edulife-aptis-container .dropdown-item.active { background: var(--aptis-primary-light); color: var(--aptis-primary); font-weight: 600; }
.edulife-aptis-container .status-bar { margin-bottom: 20px; font-size: 0.95rem; color: var(--aptis-text-muted); padding-left: 8px; }
.edulife-aptis-container .status-bar strong { color: var(--aptis-primary); }

/* Results APTIS */
.edulife-aptis-container .results-container { display: flex; flex-direction: column; gap: 24px; }
.edulife-aptis-container .aptis-center-card {
  background: var(--aptis-bg-card); border-radius: 16px; border: 1px solid var(--aptis-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); display: flex; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.edulife-aptis-container .aptis-center-card:hover { box-shadow: 0 10px 30px rgba(15, 108, 93, 0.08); border-color: #cbd5e1; }
.edulife-aptis-container .card-info-col { width: 40%; background-color: #f8fafc; padding: 24px; border-right: 1px solid var(--aptis-border); display: flex; flex-direction: column; justify-content: space-between; }
.edulife-aptis-container .org-name { font-size: 0.98rem; font-weight: 700; color: var(--aptis-primary); margin-bottom: 12px; line-height: 1.4; }
.edulife-aptis-container .locations-wrapper { margin-bottom: 14px; }
.edulife-aptis-container .location-title { font-size: 0.8rem; font-weight: 700; color: var(--aptis-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.edulife-aptis-container .location-item { background: #ffffff; border: 1px solid var(--aptis-border); border-left: 3px solid var(--aptis-primary); padding: 10px 12px; border-radius: 6px; font-size: 0.88rem; margin-bottom: 8px; color: var(--aptis-text-main); line-height: 1.4; }
.edulife-aptis-container .meta-list { list-style: none; margin-bottom: 14px; padding: 0; }
/* Nhãn và giá trị đứng gần nhau (gap nhỏ) thay vì đẩy ra 2 đầu dòng (space-between cũ) */
.edulife-aptis-container .meta-list li { font-size: 0.9rem; margin-bottom: 6px; display: flex; align-items: baseline; gap: 6px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 6px; }
.edulife-aptis-container .meta-label { color: var(--aptis-text-muted); font-weight: 500; flex-shrink: 0; }
.edulife-aptis-container .meta-value { font-weight: 600; color: var(--aptis-text-main); }
.edulife-aptis-container .highlight-red { color: var(--aptis-accent); font-weight: 700; }
.edulife-aptis-container .btn-register { background-color: var(--aptis-accent); color: #ffffff; border: none; padding: 12px 0; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; width: 100%; text-align: center; transition: all 0.2s; box-shadow: 0 2px 6px rgba(225, 29, 72, 0.2); }
.edulife-aptis-container .btn-register:hover { background-color: var(--aptis-accent-hover); }

/* Calendar APTIS */
.edulife-aptis-container .card-dates-col { width: 60%; padding: 24px; background-color: #ffffff; display: flex; flex-direction: column; }
.edulife-aptis-container .dates-header { font-size: 0.95rem; font-weight: 700; color: var(--aptis-text-main); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--aptis-primary-light); padding-bottom: 12px; }
.edulife-aptis-container .legend-box { display: flex; gap: 16px; font-size: 0.8rem; color: var(--aptis-text-muted); font-weight: 500; }
.edulife-aptis-container .legend-item { display: flex; align-items: center; gap: 4px; }
.edulife-aptis-container .dot-active { width: 10px; height: 10px; background: var(--aptis-success); border-radius: 50%; display: inline-block;}
.edulife-aptis-container .dot-empty { width: 10px; height: 10px; background: #e2e8f0; border-radius: 50%; display: inline-block;}
.edulife-aptis-container .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.edulife-aptis-container .weekday-header { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--aptis-text-muted); padding-bottom: 6px; text-transform: uppercase; }
.edulife-aptis-container .day-cell { min-height: 52px; padding: 6px 4px; border-radius: 6px; border: 1px solid var(--aptis-border); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: #cbd5e1; background-color: #fafbfc; position: relative; transition: all 0.15s; }
.edulife-aptis-container .day-cell.has-exam { background-color: var(--aptis-success-light); border-color: #6ee7b7; color: #065f46; cursor: pointer; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1); }
.edulife-aptis-container .day-cell.has-exam:hover { transform: scale(1.06); background-color: #a7f3d0; z-index: 2; }
.edulife-aptis-container .check-icon { font-size: 0.8rem; margin-top: 2px; color: #059669; }
.edulife-aptis-container .empty-state { background: var(--aptis-bg-card); padding: 60px 20px; text-align: center; color: var(--aptis-text-muted); border-radius: 16px; border: 1px dashed var(--aptis-border); }

@media (max-width: 900px) {
  .edulife-aptis-container .aptis-center-card { flex-direction: column; }
  .edulife-aptis-container .card-info-col { width: 100%; border-right: none; border-bottom: 1px dashed var(--aptis-border); }
  .edulife-aptis-container .card-dates-col { width: 100%; }
  .edulife-aptis-container .day-cell { min-height: 48px; }
}

/* Mobile: ẩn hàng nút nhanh (tháng/tỉnh), chỉ để lại nút "Xem thêm" -- giờ nút này luôn hiện
   đúng giá trị đang chọn và bấm vào là xổ ra ĐẦY ĐỦ lựa chọn, đóng vai trò bộ chọn hoàn chỉnh
   thay vì phải xếp cả hàng nút dễ vỡ layout trên màn hình hẹp. */
@media (max-width: 767px) {
  .edulife-aptis-container #aptisRecentMonths,
  .edulife-aptis-container #aptisRecentProvinces { display: none; }
  .edulife-aptis-container .filter-group { gap: 8px 10px; }
  .edulife-aptis-container .more-btn { width: 100%; justify-content: space-between; }
  .edulife-aptis-container .more-months-wrapper { display: block; width: 100%; }
}

/* =========================================================
   2. GIAO DIỆN LỊCH THI VSTEP (DẠNG BẢNG)
========================================================= */
.edulife-vstep-container * { box-sizing: border-box; }
.edulife-vstep-container {
    background: #f4f9fe; font-family: 'Inter', sans-serif;
    padding: 30px 20px 60px; color: #1a2c3e; line-height: 1.5;
}
.edulife-vstep-container .container { max-width: 1300px; margin: 0 auto; }

/* Header VSTEP */
.edulife-vstep-container .page-header { text-align: center; margin-bottom: 30px; }
.edulife-vstep-container .badge-edu {
    background: #e4edf5; display: inline-block; padding: 6px 20px;
    border-radius: 60px; font-size: 0.75rem; font-weight: 600; color: #0B5E6E; margin-bottom: 12px;
}
.edulife-vstep-container .page-header h1 {
    font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, #0B4F6C, #227A5E);
    background-clip: text; -webkit-background-clip: text; color: transparent;
}
.edulife-vstep-container .page-header p { color: #4f6f8f; margin-top: 6px; font-size: 0.95rem; }

/* Filter VSTEP */
.edulife-vstep-container .filter-bar {
    background: white; border-radius: 24px; padding: 18px 24px; margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); border: 1px solid #e2edf2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; align-items: start;
}
.edulife-vstep-container .filter-col { display: flex; flex-direction: column; gap: 12px; }
.edulife-vstep-container .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.edulife-vstep-container .filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.edulife-vstep-container .filter-group label {
    font-size: 0.8rem; font-weight: 600; color: #2c5a6e; white-space: nowrap;
    /* Khi nút/select bên cạnh phải tự xuống nhiều hàng (không đủ chỗ nằm 1 hàng), align-items:
       center của .filter-group sẽ canh label vào GIỮA cả khối nhiều hàng đó thay vì ở hàng đầu
       tiên -- nhìn giống như label bị "rớt" xuống dưới trong khi thực ra nó vẫn đúng 1 hàng flex.
       Neo label lên đầu để nó luôn ngang hàng với item/nút ĐẦU TIÊN thay vì bị kéo xuống giữa. */
    align-self: flex-start; padding-top: 3px;
}
.edulife-vstep-container .filter-btn {
    background: #f0f4f9; border: none; padding: 5px 13px; border-radius: 40px;
    font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: 0.2s;
    color: #2c5a6e; font-family: inherit; white-space: nowrap;
}
.edulife-vstep-container .filter-btn i { margin-right: 6px; }
.edulife-vstep-container .filter-btn.active { background: #358756; color: white; box-shadow: 0 4px 10px rgba(53, 135, 86, 0.2); }
.edulife-vstep-container .filter-btn:hover:not(.active) { background: #e2f0f5; }
.edulife-vstep-container .filter-select {
    padding: 6px 14px; border-radius: 40px; border: 1px solid #cbdde6;
    background: white; font-family: inherit; font-size: 0.75rem; font-weight: 500; color: #1a2c3e;
    min-width: 0; flex: 1 1 130px; max-width: 220px;
}
.edulife-vstep-container .filter-select:focus { outline: none; border-color: #358756; }
/* "Chọn tháng"/"Chọn trường" (select/ô tìm kiếm) và hàng nút tháng nhanh phải LUÔN nằm ngang hàng
   với label của nó ở MỌI độ rộng màn hình, không chỉ riêng mobile -- các control này chỉ có 1
   dòng nội dung nên không cần flex-wrap:wrap của .filter-group cho phép nó rớt xuống dòng dưới
   khi thiếu chỗ, chỉ cần co lại (flex-shrink) là đủ. Nhóm Khu vực (nhiều nút bấm trực tiếp) vẫn
   giữ flex-wrap để tự xuống dòng khi không đủ chỗ chứa hết 4 nút. */
.edulife-vstep-container .filter-group:has(> .filter-select),
.edulife-vstep-container .filter-group:has(> #quickMonths),
.edulife-vstep-container .filter-group:has(> .school-search) { flex-wrap: nowrap; }
.edulife-vstep-container #quickMonths { flex: 1 1 auto; min-width: 0; }

/* Ô tìm kiếm "Chọn trường" -- thay cho <select> gốc để gõ lọc được tên trường (kể cả gõ tắt
   "ĐH"/đầy đủ "Đại học", xem hàm normalizeSearch() ở phần script bên dưới). */
.edulife-vstep-container .school-search { position: relative; min-width: 0; flex: 1 1 130px; max-width: 220px; }
.edulife-vstep-container .school-search-input {
    width: 100%; box-sizing: border-box; padding: 6px 14px; border-radius: 40px; border: 1px solid #cbdde6;
    background: white; font-family: inherit; font-size: 0.75rem; font-weight: 500; color: #1a2c3e;
}
.edulife-vstep-container .school-search-input:focus { outline: none; border-color: #358756; }
/* position:absolute (bám theo .school-search, KHÔNG dùng fixed) để tự cuộn theo trang bình
   thường như mọi phần tử khác -- fixed từng bị thử nhưng phải tự đóng dropdown mỗi khi có sự
   kiện scroll để tránh nó trôi lệch khỏi input, mà bàn phím ảo trên mobile lại tự kích hoạt
   scroll ngay khi gõ, khiến dropdown bị đóng oan giữa chừng lúc đang gõ. Riêng "left"/"width"
   vẫn tính bằng JS (positionUnitDropdown()) để RỘNG HƠN hẳn bề rộng hẹp (max-width:220px) của ô
   input khi mở ra -- rộng gần hết màn trên mobile, rộng rãi hơn trên desktop/laptop. */
.edulife-vstep-container .school-search-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); background: #fff;
    border: 1px solid #e2edf2; border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    z-index: 500; max-height: 280px; overflow-y: auto; overflow-x: hidden; padding: 8px;
}
.edulife-vstep-container .school-search-dropdown.show { display: block; }
.edulife-vstep-container .school-search-item {
    display: block; width: 100%; text-align: left; background: transparent; border: none;
    padding: 10px 14px; margin-bottom: 2px; border-radius: 10px; font-size: 0.85rem; color: #1a2c3e;
    cursor: pointer; font-family: inherit; white-space: normal; line-height: 1.4;
}
.edulife-vstep-container .school-search-item:hover, .edulife-vstep-container .school-search-item.active {
    background: #e9f5ee; color: #358756; font-weight: 600;
}
.edulife-vstep-container .school-search-empty { padding: 10px 12px; font-size: 0.8rem; color: #9aabb8; text-align: center; }

/* Table VSTEP */
.edulife-vstep-container .table-wrapper { background: white; border-radius: 28px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); overflow: hidden; border: 1px solid #e6edf2; }
.edulife-vstep-container .table-scroll { overflow-x: auto; padding: 0 0 4px 0; }
.edulife-vstep-container .schedule-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.85rem; }
.edulife-vstep-container .schedule-table th {
    text-align: left; padding: 16px 18px; background: #fafdfe; font-weight: 700;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: #1e5a6e; border-bottom: 2px solid #e2edf2;
}
.edulife-vstep-container .schedule-table td { padding: 14px 18px; border-bottom: 1px solid #edf3f7; vertical-align: middle; }
.edulife-vstep-container .schedule-table tr:last-child td { border-bottom: none; }
.edulife-vstep-container .schedule-table tr:hover td { background-color: #fafeff; }
.edulife-vstep-container .stt-col { font-weight: 600; color: #6d7d8d; width: 50px; text-align: center; }
.edulife-vstep-container .ngay-thi { font-weight: 600; color: #1f3b4c; white-space: nowrap; }
.edulife-vstep-container .thu-tuan { color: #2c6280; font-weight: 500; }
/* Đặt trực tiếp lên <td> (display:inline-block) làm hỏng khung kẻ bảng vì <td> không còn tham
   gia layout dạng table-cell bình thường nữa -- badge phải là 1 <span> CON bên trong <td> (giống
   hệt cách .han-dang-ky đang làm), còn bản thân <td> giữ nguyên không set style gì đặc biệt. */
.edulife-vstep-container .don-vi {
    font-weight: 700; color: #fff; background: #358756; padding: 3px 12px;
    border-radius: 30px; display: inline-block; font-size: 0.75rem; white-space: nowrap;
}
.edulife-vstep-container .han-dang-ky {
    font-weight: 500; color: #b85c00; background: #fff7e5; padding: 3px 12px;
    border-radius: 30px; display: inline-block; font-size: 0.75rem; white-space: nowrap;
}
.edulife-vstep-container .han-dang-ky.sap-het { background: #ffe6e0; color: #bc3a1a; }
.edulife-vstep-container .empty-row td { text-align: center; padding: 48px 20px; color: #7f9cbb; font-weight: 500; }
.edulife-vstep-container .stat-bar {
    display: flex; flex-wrap: wrap; gap: 16px 30px; padding: 14px 20px;
    background: #f9fafc; border-bottom: 1px solid #edf3f7; font-size: 0.8rem; color: #2c5a6e;
}
.edulife-vstep-container .stat-bar strong { color: #358756; }
.edulife-vstep-container .footer-note { margin-top: 30px; text-align: center; font-size: 0.7rem; color: #7c98b3; border-top: 1px solid #dce5ec; padding-top: 20px; }

/* Responsive VSTEP */
/* Laptop 13-14 inch (hoặc cột nội dung hẹp hơn viewport do theme/sidebar): chuyển bộ lọc từ 2
   cột về 1 cột SỚM HƠN mốc mobile, để mỗi dòng lọc (label + input) luôn đủ chỗ nằm 1 dòng thay
   vì bị bóp gãy thành 2 dòng khi 2 cột phải chia nhau 1 khung hẹp. */
@media (max-width: 1150px) and (min-width: 768px) {
    .edulife-vstep-container .filter-bar { grid-template-columns: 1fr; gap: 14px; }
    .edulife-vstep-container .filter-select, .edulife-vstep-container .school-search { max-width: 260px; }
}
@media (max-width: 767px) {
    .edulife-vstep-container { padding: 20px 12px 40px; }
    .edulife-vstep-container .page-header h1 { font-size: 1.4rem; }
    .edulife-vstep-container .filter-bar { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; border-radius: 18px; }
    .edulife-vstep-container .filter-col { gap: 8px; }
    .edulife-vstep-container .filter-row { gap: 6px 10px; }
    .edulife-vstep-container .filter-group label { font-size: 0.7rem; }
    .edulife-vstep-container .filter-btn { padding: 0px 6px; font-size: 0.55rem; margin: 0 0 0 0; }
    .edulife-vstep-container .filter-select { font-size: 0.65rem; min-width: 0; padding: 4px 10px; flex: 1 1 auto; max-width: none; }
    .edulife-vstep-container .school-search { flex: 1 1 auto; max-width: none; }
    .edulife-vstep-container .school-search-input { font-size: 0.65rem; padding: 4px 10px; }
    /* "X lịch thi", "Tháng ...", "Khu vực: ..." luôn nằm chung 1 hàng thay vì tự xuống dòng --
       flex-shrink:0 trên từng mục để chữ KHÔNG tự ngắt dòng bên trong khi hết chỗ, mà tràn ra
       và cho cuộn ngang (overflow-x:auto) ở những máy siêu hẹp thay vì vỡ chữ xấu. */
    .edulife-vstep-container .stat-bar { flex-wrap: nowrap; gap: 8px; overflow-x: auto; }
    .edulife-vstep-container .stat-bar span { flex-shrink: 0; white-space: nowrap; }
    .edulife-vstep-container .schedule-table { font-size: 0.7rem; min-width: 520px; }
    .edulife-vstep-container .schedule-table th, .edulife-vstep-container .schedule-table td { padding: 10px 10px; }
    .edulife-vstep-container .schedule-table .stt-col, .edulife-vstep-container .schedule-table .thu-tuan-col { display: none; }
    .edulife-vstep-container .han-dang-ky { font-size: 0.6rem; padding: 2px 8px; }
    .edulife-vstep-container .don-vi, .edulife-vstep-container .ngay-thi { font-size: 0.7rem; }
    .edulife-vstep-container .stat-bar { font-size: 0.65rem; padding: 10px 14px; gap: 8px 16px; }
    .edulife-vstep-container .table-wrapper { border-radius: 18px; }
}
@media (max-width: 480px) {
    .edulife-vstep-container .schedule-table { min-width: 400px; font-size: 0.6rem; }
    .edulife-vstep-container .schedule-table th, .edulife-vstep-container .schedule-table td { padding: 8px 6px; }
    .edulife-vstep-container .filter-select { min-width: 100px; font-size: 0.6rem; }
}