/* ============================================================
   Bảng chu kỳ gói trong nội dung nguồn.

   Giữ đúng dạng bảng như trang nguồn dangkyviettel.com.vn. Các
   giá trị dưới đây lấy trực tiếp từ CSS của trang nguồn:

     .page_text .table_sp            { overflow-x:auto }
     .page_text .table_sp table      { border-collapse:collapse; min-width:550px }
     .page_text .table_sp td         { padding:5px; border:#dcdcdc 1px solid; text-align:center }
     .page_text .table_sp tr:nth-child(odd) { background:#ededed }
     .table_sp a { display:inline-block; background:#ed1a36; color:#fff;
                   padding:2px 10px; border-radius:25px;
                   box-shadow:0 0 5px #999; font-size:14px; white-space:nowrap }

   Bảng nằm trong prose wrapper của bài viết, nên các arbitrary
   variant [&_table], [&_td], [&_th], [&_a], [&_p] của wrapper sẽ
   đè lên. Selector ở đây có độ đặc hiệu (0,2,1) nên thắng các
   variant đó (0,1,1); file được enqueue sau output.css.

   KHÔNG tạo utility Tailwind mới ở đây — xem PROJECT_CONTEXT.md.
   ============================================================ */

/* ============================================================
   Cấp bậc tiêu đề cho nội dung crawl.

   Bản HTML tham chiếu chỉ dùng h2/h3 nên các arbitrary variant
   [&_h2] / [&_h3] trong template đã đủ cho nó. Dữ liệu crawl thì
   khác: h4 là cấp được dùng nhiều nhất (7.403 lần trong 429 bài,
   so với h3 4.236 và h2 549), thêm 11 h5. Preflight của Tailwind
   reset h1-h6 về font-size:inherit;font-weight:inherit nên nếu
   không khai báo, toàn bộ h4/h5 hiển thị y hệt chữ thường.

   Chỉ bổ sung đúng phần thiếu, theo cùng thang với h3.
   ============================================================ */

.gp-article-content h4 {
  margin-top: 1.25rem;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--cl-muted);
}

.gp-article-content h5 {
  margin-top: 1rem;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--cl-muted);
}

/* Ảnh trong nội dung: bỏ khoá kích thước nên cần bo góc và giãn cách. */
.gp-article-content img {
  height: auto;
  max-width: 100%;
  margin: 1.25rem auto;
  border-radius: var(--rd-md);
}

/* Bảng trong nội dung: cuộn ngang bằng KHUNG BỌC, không bằng display:block.

   `display:block` trên <table> khiến tr/td sinh anonymous table box bên trong,
   và box đó co theo nội dung nên bảng không nhận `width:100%` — bảng bị hụt,
   chừa khoảng trắng bên phải (lỗi đã gặp ở trang gói SD150).

   Toàn bộ 950 bảng trong dữ liệu crawl đều đã nằm sẵn trong `.table_sp` của
   nguồn, nên dùng luôn container đó làm khung cuộn, giống cách bản HTML gốc
   bọc bảng bằng `<div class="mt-5 overflow-x-auto">`. */
.gp-article-content .table_sp {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.gp-article-content table {
  display: table;
  width: 100%;
}

.gp-package-source-content .gp-package-cycle-table {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.gp-package-source-content .gp-package-cycle-table table {
  width: 100%;
  min-width: 550px;
  margin: 0;
  border-collapse: collapse;
}

.gp-package-source-content .gp-package-cycle-table td,
.gp-package-source-content .gp-package-cycle-table th {
  padding: 5px;
  border: 1px solid var(--cl-line);
  background: transparent;
  color: var(--cl-ink);
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

/* Nguồn tô nền xám cho các dòng lẻ, tính cả dòng tiêu đề. */
.gp-package-source-content .gp-package-cycle-table tr:nth-child(odd) {
  background: #ededed;
}

.gp-package-source-content .gp-package-cycle-table tr:nth-child(1) td,
.gp-package-source-content .gp-package-cycle-table tr:nth-child(1) th {
  padding: 10px 0;
  color: var(--cl-muted);
  font-weight: 700;
}

/* Ô ưu đãi chứa nhiều <p>; nguồn không có khoảng cách đoạn ở đây. */
.gp-package-source-content .gp-package-cycle-table td p {
  margin: 0;
  padding: 2px 0;
}

/* Mọi link trong bảng hiển thị dạng nút viên như nguồn. */
.gp-package-source-content .gp-package-cycle-table a {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--rd-pill);
  background: var(--cl-main);
  box-shadow: 0 0 5px #999;
  color: var(--cl-main-ink);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.gp-package-source-content .gp-package-cycle-table a:hover {
  background: var(--cl-s2);
  color: var(--cl-main-ink);
}

.gp-package-source-content .gp-package-cycle-table .fx-package-register {
  cursor: pointer;
}