/* ==========================================================================
 * POPUP LICH CHON KHOANG NGAY (owner 17/09/2026) — `js/chon-khoang-ngay.js`.
 * ⭐ Kieu Google Ads: moc nhanh ben trai, 2 thang (>=768px) / 1 thang (hep).
 * ⛔ Khong tran ngang o 360px: popup rong toi da = khung nhin tru le.
 * ========================================================================== */
.lich-vo { position: relative; }

.lich-nut-mo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 6px var(--space-4);
  border: 1px solid var(--border-field); border-radius: var(--radius-field);
  background: var(--field-bg); color: var(--text-primary);
  font: 600 14px/20px var(--font-body); cursor: pointer; text-align: left;
}
.lich-nut-mo::after { content: ''; }
.lich-nut-nhan { line-height: 16px; }
.lich-nut-khoang { font-weight: 700; }

.lich-hop {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  display: flex; gap: var(--space-4);
  width: max-content; max-width: calc(100vw - 2 * var(--gutter, 16px));
  padding: var(--space-4);
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), 0 12px 32px rgba(0, 0, 0, .14);
}
.lich-hop[hidden] { display: none; }

.lich-moc { display: flex; flex-direction: column; gap: 2px; min-width: 132px; padding-right: var(--space-4); border-right: 1px solid var(--border-hairline); }
.lich-moc-nut {
  min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-field);
  background: transparent; color: var(--text-primary); font: 500 14px/20px var(--font-body);
  text-align: left; cursor: pointer; white-space: nowrap;
}
.lich-moc-nut:hover, .lich-moc-nut:focus-visible { background: var(--surface-sunken); }
.lich-moc-nut.dang-chon { font-weight: 700; color: var(--action-ghost-text); background: var(--surface-sunken); }

.lich-phai { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.lich-dieu-huong { display: flex; justify-content: space-between; }
.lich-chuyen {
  width: 36px; min-height: 36px; border: 1px solid var(--border-hairline); border-radius: var(--radius-field);
  background: var(--field-bg); color: var(--text-primary); font: 700 18px/1 var(--font-body); cursor: pointer;
}
.lich-chuyen:disabled { opacity: .35; cursor: not-allowed; }

.lich-cac-thang { display: flex; gap: var(--space-5); }
.lich-thang-ten { margin: 0 0 var(--space-2); font: 700 14px/20px var(--font-body); text-align: center; }
.lich-luoi { display: grid; grid-template-columns: repeat(7, 40px); gap: 2px 0; }
.lich-thu { font: 600 12px/28px var(--font-body); color: var(--text-muted); text-align: center; }
.lich-ngay {
  width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text-primary); font: 500 14px/40px var(--font-numeric, var(--font-body));
  cursor: pointer;
}
.lich-ngay:hover:not(:disabled) { background: var(--surface-sunken); }
.lich-ngay:disabled { color: var(--text-placeholder); cursor: not-allowed; }
.lich-ngay.hom-nay { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lich-ngay.trong-khoang { background: var(--surface-sunken); }
.lich-ngay.dau-khoang, .lich-ngay.cuoi-khoang { background: var(--action-primary-bg); color: var(--action-primary-text); }
.lich-ngay.dau-khoang { border-radius: 20px 0 0 20px; }
.lich-ngay.cuoi-khoang { border-radius: 0 20px 20px 0; }
.lich-ngay.dau-khoang.cuoi-khoang { border-radius: 20px; }

.lich-chan { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.lich-trang-thai { margin: 0; }

@media (max-width: 767px) {
  .lich-hop {
    position: fixed; left: 50%; top: 72px; transform: translateX(-50%);
    flex-direction: column; width: calc(100vw - 24px); max-width: 360px; padding: var(--space-3);
    max-height: calc(100vh - 96px); overflow-y: auto;
  }
  .lich-moc { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0 0 var(--space-3); border-right: 0; border-bottom: 1px solid var(--border-hairline); }
  .lich-moc-nut { min-height: 34px; border: 1px solid var(--border-hairline); border-radius: 17px; font-size: 13px; }
  .lich-cac-thang { display: block; }
  .lich-thang { width: 100%; }
  .lich-luoi { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lich-ngay { width: 100%; }
}