/* Đếm ngược (#clock) — sửa vỡ chữ ở khổ mobile cho bộ template scrub (33–63).
 *
 * Bệnh: cả ba họ layout đều xếp 4 ô theo `width: 25%` nhưng giữ nguyên padding và
 * cỡ chữ của desktop. Dưới ~576px, phần lòng ô còn ~38–54px trong khi con số 3rem
 * và nhãn ("Minutes"/"Seconds") rộng hơn thế, nên số bị bẻ đôi ("06" thành "0"/"6"),
 * nhãn bị cắt giữa từ ("Secon"/"ds"), riêng họ neela còn tụt xuống 3+1 dòng.
 *
 * Thuốc: ép `nowrap`, thu padding, và cho cỡ chữ co theo bề ngang màn hình bằng
 * `min(<cỡ desktop>, calc(...vw - ...px))`. Công thức vw bám theo bề rộng ô thật
 * (ô = (100vw - 40px) / 4) và tính dư cho con số 3 chữ số ("365 ngày"), nên không
 * còn ngưỡng nào làm vỡ dòng. Đo bằng Playwright ở 320/375/414/540/768/1280/1600px.
 *
 * Phần lớn nằm trong @media ≤575.98px; riêng họ neela phải sửa ở mọi bề ngang vì ô
 * của nó chật ngay từ desktop (xem chú thích tại chỗ).
 *
 * Phạm vi chọn theo lớp bọc, KHÔNG dùng `#clock` trần, vì họ jqpc (template44, 45,
 * 60–63) để con số trong `.box > div > .time` chứ không phải `.box > div` — đặt cỡ chữ
 * lên `.box > div` ở họ đó là thổi luôn cái NHÃN to bằng con số. Template44/60–63 vẫn
 * mang lớp `.weddingdate-section` nên tách bằng lớp đánh dấu `.weddingdate-clock-jqpc`
 * do 5 blade đó truyền vào `components.calendar`; template45 giữ đồng hồ vòng tròn
 * 2×2 (lớp bọc `.clock-grids`) — không đụng.
 *
 * File nạp qua `page/partials/tpl-scrub-styles.blade.php`. Lớp bọc được viết lặp
 * (`.a.a #clock`) để cộng thêm một bậc specificity: template48–55 nạp
 * `css/v2-components.css` SAU partial này, nếu để ngang bậc thì luật cũ thắng.
 */

/* ---- Chung: không bao giờ bẻ giữa số hay giữa từ ---- */
.weddingdate-section.weddingdate-section #clock .box > div,
.weddingdate-section.weddingdate-section #clock .box > span,
.calendar-v2-countdown.calendar-v2-countdown #clock .box > div,
.calendar-v2-countdown.calendar-v2-countdown #clock .box > span,
.count-down-clock.count-down-clock #clock .box > div,
.count-down-clock.count-down-clock #clock .box > span {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* ---- Họ neela (template43, 56–59): nới lòng ô ở MỌI bề ngang ----
 * `.box` chỉ rộng 84px mà `#clock > div{padding:30px 10px 0}` ăn mất 20px, nên
 * "SECONDS" (80px) và cả số 3 chữ số (67px) đều không đủ chỗ ngay trên desktop —
 * đó là lý do chúng vốn bị bẻ dòng. Ô không có nền/viền nên hạ padding ngang là
 * thay đổi vô hình. `min-width:80px` (@media 991px) là thủ phạm làm 4 ô rơi 3+1. */
.count-down-clock.count-down-clock #clock {
  flex-wrap: nowrap;
}

.count-down-clock.count-down-clock #clock > div,
.count-down-clock.count-down-clock #clock .box {
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
}

/* Nhãn viết hoa + giãn chữ của họ này rộng tới 94px (template58/59) trong ô 80px.
 * Bỏ giãn chữ và hạ trần cỡ chữ xuống 0.8rem là vừa khít ở mọi bề ngang. */
.count-down-clock.count-down-clock #clock .box > span,
.count-down-clock.count-down-clock #clock .box span {
  display: block;
  font-size: min(0.8rem, calc(2.9vw - 0.5px));
  letter-spacing: 0;
}

@media (max-width: 575.98px) {
  /* ---- Họ thegoodday: template33–42, 46, 47 (`{template}/css/libs.css`) ---- */
  /* Ô rộng 25% với padding ngang 15px chỉ còn ~54px lòng; hạ xuống 3px. */
  .weddingdate-section.weddingdate-section:not(.weddingdate-clock-jqpc) #clock > div {
    padding-left: 3px;
    padding-right: 3px;
  }

  .weddingdate-section.weddingdate-section:not(.weddingdate-clock-jqpc) #clock .box > div {
    font-size: min(3rem, calc(13.2vw - 9px));
  }

  .weddingdate-section.weddingdate-section:not(.weddingdate-clock-jqpc) #clock .box > span {
    display: block;
    font-size: min(0.875rem, calc(3.4vw + 0.5px));
    letter-spacing: 0;
  }

  /* ---- Họ v2: template48–55 (`{template}/css/v2-components.css`) ---- */
  /* Ô có hai lớp padding lồng nhau (cột + thẻ), cộng lại nuốt hết chỗ của nhãn. */
  .calendar-v2-countdown.calendar-v2-countdown #clock > div {
    padding-left: 3px;
    padding-right: 3px;
  }

  .calendar-v2-countdown.calendar-v2-countdown #clock .box {
    padding: 14px 6px;
  }

  .calendar-v2-countdown.calendar-v2-countdown #clock .box > div {
    font-size: min(2.5rem, calc(11vw - 9px));
  }

  .calendar-v2-countdown.calendar-v2-countdown #clock .box > span {
    display: block;
    font-size: min(0.85rem, calc(3.4vw - 0.5px));
    letter-spacing: 0;
  }

  /* ---- Họ neela: template43, 56–59 — phần chỉ dành cho mobile ---- */
  .count-down-clock.count-down-clock #clock .box > div {
    font-size: min(20pt, calc(9.5vw - 6px));
  }

  /* ---- Họ jqpc trong mục ngày cưới: template44, 60–63 ----
   * Cùng bố cục 4 ô một hàng như họ thegoodday, nhưng con số nằm sâu một tầng
   * (`.box > div > .time`) nên phải nhắm riêng. Trần 44px khớp đúng cỡ mà template
   * đặt cho `.time` ở @media 991px, để không nhảy cỡ khi qua mốc 576px. Không dùng
   * `rem`: 5 skin này có root font-size khác nhau (10px và 16px). */
  .weddingdate-clock-jqpc #clock .box .time {
    font-size: min(44px, calc(13.2vw - 9px));
    line-height: 1.1;
  }

  .weddingdate-clock-jqpc #clock .box span {
    display: block;
    font-size: min(14px, calc(3.4vw + 0.5px));
    letter-spacing: 0;
    white-space: nowrap;
  }
}