/*
 * Trang danh mục và trang chi tiết sản phẩm, giỏ hàng, thanh toán.
 */

/*
 * ⚠️ Các khối "nội dung chung" (chia sẻ, đuôi bài viết, mô tả danh mục,
 *    thông số, dự án, video, lightbox, 404) đã chuyển sang
 *    `components.css` — xem ghi chú ở đó. Lý do: file này CHỈ được nạp
 *    trên trang WooCommerce (inc/enqueue.php), nên class dùng ngoài phạm
 *    vi đó sẽ hiện ra trần trụi. Đừng thêm class kiểu ấy vào đây.
 */

/* ================================================================== *
 * Thanh sắp xếp trên lưới sản phẩm (bật lại 06-08-2026)
 *
 * Markup do WooCommerce sinh ra ở hook `woocommerce_before_shop_loop`.
 * CSS của Woo đang bị gỡ (xem inc/enqueue.php) nên phải tự tạo dáng.
 * ================================================================== */
.woocommerce-result-count,
.woocommerce-ordering {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--hl-muted);
}

.woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* Hai khối nằm cùng một hàng khi đủ chỗ. */
@media (min-width: 640px) {
  .hl-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .hl-shop-toolbar .woocommerce-result-count,
  .hl-shop-toolbar .woocommerce-ordering { margin-bottom: 0; }
}

.hl-shop-toolbar {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hl-border);
}

.woocommerce-ordering::before {
  content: "Sắp xếp:";
  white-space: nowrap;
}

.woocommerce-ordering select {
  max-width: 100%;
  padding: 5px 8px;
  font: inherit;
  color: var(--hl-text);
  background: var(--hl-bg);
  border: 1px solid var(--hl-border);
  border-radius: 2px;
  cursor: pointer;
}

.woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--hl-blue);
  outline-offset: 1px;
}

/* Không có JS thì vẫn phải bấm được nút gửi. */
.woocommerce-ordering button[type="submit"] {
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}

/* ================================================================== *
 * Trang chi tiết sản phẩm
 * ================================================================== */
.hl-psummary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .hl-psummary { grid-template-columns: 422px minmax(0, 1fr); gap: 16px; }
}

/* --- ảnh --- */
.hl-pgallery { position: relative; }

.hl-pgallery__main { display: block; }

.hl-pgallery__main img,
.hl-pgallery .hl-noimg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hl-border);
  transition: opacity var(--hl-ease);
}

.hl-pgallery__main:hover img { opacity: .9; }

/*
 * Badge % giảm giá.
 *
 * ⚠️ SỬA 06-08-2026 — trước đây dùng `k.png` (64×64) trong ô 55×55 với
 *    `no-repeat left top` và KHÔNG có `background-size` → ngôi sao bị cắt cụt
 *    cạnh phải và cạnh dưới. Nay dùng chung `k1.png` (51×51) với card trang
 *    danh mục, cùng số đo, và `background-size: contain` để lần sau đổi ảnh
 *    khác kích thước cũng không bị cắt nữa.
 */
.hl-pgallery__badge {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 51px;
  height: 51px;
  line-height: 51px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: url("../img/k1.png") no-repeat center / contain;
}

.hl-pgallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  list-style: none;
}

.hl-pgallery__thumbs img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid var(--hl-border-img);
  padding: 2px;
}

/* --- thông tin --- */
.hl-pinfo {
  padding: 12px 15px;
  border: 1px solid var(--hl-border);
}

.hl-pinfo__title {
  font-size: var(--hl-fs-h1);
  color: #555;
  line-height: 1.3;
  margin-bottom: 10px;
}

.hl-pprice { padding: 6px 0; }
.hl-pprice__label { color: var(--hl-muted); }
.hl-pprice b,
.hl-pprice .amount { color: var(--hl-price-lg); font-size: var(--hl-fs-price-lg); font-weight: 700; }

.hl-psave {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 30px;
  list-style: none;
  color: var(--hl-muted);
  padding-bottom: 10px;
}

.hl-psave s { text-decoration: line-through; }
.hl-psave span { color: var(--hl-save); }

.hl-pactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
}

.hl-pmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  padding-bottom: 10px;
}

.hl-pmeta__map { padding-left: 20px; background: url("../img/y.png") no-repeat left center; }

.hl-pmeta__tel {
  margin: 0;
  padding-left: 25px;
  background: url("../img/te.png") no-repeat left center;
  line-height: 19px;
}

.hl-ppromo { background: var(--hl-bg-tab); padding: 10px; }
.hl-ppromo strong { display: block; text-transform: uppercase; color: #555; padding-bottom: 4px; }

/* ================================================================== *
 * Bốn tab
 *
 * Nâng cấp dần: chưa có JS thì `.hl-tabs__nav` ẩn, mọi phần hiện đủ kèm
 * tiêu đề. JS gắn `.is-enhanced` → thành tab ngang (≥768px) hoặc
 * accordion (<768px).
 * ================================================================== */
.hl-tabs { margin: 20px 0; }

.hl-tabs__nav { display: none; }

.hl-tabs__heading {
  padding: 0 20px;
  line-height: 44px;
  background: var(--hl-bg-tab);
  font-size: 16px;
  text-transform: uppercase;
}

.hl-tabs__panel { margin-bottom: 10px; }

.hl-tabs__panel .hl-rte {
  padding: 10px;
  border: 1px solid var(--hl-border-2);
  border-top: 0;
}

/* --- khi đã có JS --- */
.hl-tabs.is-enhanced .hl-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 5px;
  border-bottom: 1px solid var(--hl-amber);
  background: var(--hl-bg-tab);
}

.hl-tabs.is-enhanced .hl-tabs__heading { display: none; }
.hl-tabs.is-enhanced .hl-tabs__panel { margin-bottom: 0; }

.hl-tabs.is-enhanced .hl-tabs__panel .hl-rte {
  border-top: 1px solid var(--hl-border-2);
}

.hl-tabs__tab {
  padding: 0 20px;
  line-height: 44px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--hl-link);
  text-transform: uppercase;
  white-space: nowrap;
}

.hl-tabs__tab[aria-selected="true"] { background: var(--hl-amber); color: #fff; }

.hl-tabs.is-enhanced .hl-tabs__panel[data-hl-tab-hidden] { display: none; }

/* Dưới 768px xếp dọc như accordion — vẫn CÙNG markup. */
@media (max-width: 767px) {
  .hl-tabs.is-enhanced .hl-tabs__nav { flex-direction: column; gap: 0; border-bottom: 0; }
  .hl-tabs__tab { text-align: left; border-bottom: 1px solid var(--hl-border-2); }
}

/*
 * ⚠️ Khối "Chia sẻ" + "Bài viết / trang tĩnh" đã chuyển sang `components.css`
 *    (11-08-2026). Lý do: `shop.css` CHỈ được nạp trên trang WooCommerce
 *    (xem inc/enqueue.php), trong khi `.hl-share` / `.hl-othernews` dùng ở
 *    single.php, page.php, 404.php — những trang không nạp file này, nên
 *    chúng hiện ra trần trụi. Đừng thêm class dùng ngoài Woo vào đây.
 */

/* ================================================================== *
 * Giỏ hàng / thanh toán
 *
 * ⚠️ Hai trang này dựng bằng BLOCK (`wp:woocommerce/cart`,
 *    `wp:woocommerce/checkout`) — xem MEMORY §64. Markup là
 *    `.wc-block-*`, KHÔNG phải `table.shop_table` của bản cổ điển.
 *    Các luật `.woocommerce table.shop_table` bên dưới vì thế không
 *    chạm tới giỏ hàng; giữ lại vì trang "Tài khoản" và "Đã nhận đơn"
 *    vẫn là markup cổ điển.
 *
 *    CSS của Woo blocks (`cart.css`, `packages-style.css`) vẫn được nạp
 *    và nạp TRƯỚC file này, nên chỉ cần cùng độ đặc hiệu là ghi đè được.
 *    Trước khi sửa (11-08-2026): nút "Tiến hành thanh toán" màu
 *    rgb(50,55,60) — màu mặc định của Woo, lạc hẳn với toàn site vốn
 *    dùng vàng `--hl-amber` (#f5b700).
 * ================================================================== */
.woocommerce-cart .hl-main,
.woocommerce-checkout .hl-main { padding-bottom: var(--hl-gutter); }

/* ------------------------------------------------------------------ *
 * Bảng hàng trong giỏ
 * ------------------------------------------------------------------ */
/*
 * ⚠️ Độ đặc hiệu: `cart.css` của Woo khai `table.wc-block-cart-items td`
 *    (0,1,2) và ép `border: 0`. Viết `.wc-block-cart-items td` (0,1,1) là
 *    THUA, luật không vào mà cũng không báo gì. Phải giữ tiền tố
 *    `table.` cho đủ đặc hiệu — file này nạp sau nên hoà là thắng.
 */
table.wc-block-cart-items {
  /*
   * `display: table` + `width: 100%` khai LẠI cho chắc: `.hl-rte table`
   * trong `base.css` từng ép `display: block` và tắt mất thuật toán bố
   * cục bảng (đã loại trừ ở đó, giữ dòng này làm lưới an toàn — khối giỏ
   * hàng đi qua `the_content` nên rất dễ dính luật của nội dung soạn thảo).
   * Không có nó thì cột co theo nội dung, chừa 39px trống bên phải.
   */
  display: table;
  width: 100%;
  border: 1px solid var(--hl-border-2);
  border-radius: var(--hl-radius);
  overflow: hidden;
}

/*
 * Phân bổ cột: ảnh và "Tổng" chỉ rộng bằng nội dung, phần dư dồn hết cho
 * cột sản phẩm → ba cột lấp đầy bảng và cột "Tổng" luôn sát mép phải.
 * `width: 1%` là mẹo quen của bảng auto-layout: nhỏ hơn nội dung nên
 * trình duyệt kẹp về đúng bề rộng tối thiểu, không phải 1% thật.
 *
 * ⚠️ CHỈ áp cho bố cục rộng. Ở `.is-mobile` hàng là CSS grid chứ không
 *    còn là hàng bảng (xem khối dưới) — `width: 1%` lúc đó bóp ô xuống
 *    còn một dúm, và `white-space: nowrap` thì ép ô giá rộng ra làm tràn
 *    lại đúng chỗ vừa vá xong.
 */
.wc-block-cart:not(.is-mobile) table.wc-block-cart-items .wc-block-cart-items__header-image,
.wc-block-cart:not(.is-mobile) table.wc-block-cart-items .wc-block-cart-item__image { width: 1%; }

/* Bề rộng cột "Tổng" do Ô ĐẦU BẢNG quyết định — xem lý do ở khối ngay dưới. */
.wc-block-cart:not(.is-mobile) table.wc-block-cart-items .wc-block-cart-items__header-total {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/*
 * ⚠️ Woo đặt ô "Tổng" của phần thân là `display: flex`. Ô `td` mang display
 *    ngoài nhóm bảng thì KHÔNG tham gia thuật toán cột: nó tự co theo nội
 *    dung, mặc kệ cột rộng bao nhiêu. Hậu quả đo được ở 1400px:
 *      - để nguyên `flex`            → ô rộng 146px nhưng dừng ở 779px,
 *                                      hụt 39px so với mép bảng 818px;
 *      - thêm `width: 1%` vào ô đó   → còn TỆ hơn: `1%` ăn theo khối chứa
 *                                      chứ không phải theo cột, ô tụt còn
 *                                      30px, hụt hẳn 117px.
 *    Phải trả nó về `table-cell` thì mới bám được cột. Đầu bảng vẫn là
 *    `table-cell` sẵn nên trước giờ nó vẫn sát mép — chính chỗ lệch giữa
 *    đầu bảng và thân là dấu hiệu nhận ra lỗi này.
 *
 *    `text-align: right` đặt ở đây thay cho `justify-content` của flex.
 */
.wc-block-cart:not(.is-mobile) table.wc-block-cart-items .wc-block-cart-item__total {
  display: table-cell;
  width: auto;
  vertical-align: top;
  text-align: right;
}

table.wc-block-cart-items .wc-block-cart-items__header {
  background: var(--hl-bg-block);
  color: #555;
  font-size: var(--hl-fs-xs);
  text-transform: uppercase;
  letter-spacing: .02em;
}

table.wc-block-cart-items .wc-block-cart-items__header th {
  padding: 12px 15px;
  border-bottom: 1px solid var(--hl-border-2);
}

/*
 * ⚠️ Đệm 15px CHỈ dùng ở bố cục rộng. Khi Woo chuyển sang `.is-mobile`
 *    nó đổi hẳn cách xếp (ô `td` thành `display:block`) và đã tính sẵn
 *    khoảng cách; nhồi thêm đệm là hàng rộng 417px trong khung 375px —
 *    mà `body{overflow-x:clip}` (§41) NUỐT phần thừa nên ảnh chụp vẫn
 *    trông "bình thường", chỉ mất chữ ở mép phải (§49).
 *    Đo 11-08-2026: 417px → 387px sau khi bỏ đệm.
 *
 *    Bám `:not(.is-mobile)` chứ không media query, cho cùng trục với
 *    chính Woo (xem ghi chú khối dưới).
 */
.wc-block-cart:not(.is-mobile) table.wc-block-cart-items .wc-block-cart-items__row td {
  padding: 15px;
}

table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child) td {
  border-bottom: 1px solid var(--hl-border);
}

/* ------------------------------------------------------------------ *
 * Bố cục hàng khi khối bị hẹp — VÁ MỘT LỖI CÓ SẴN của Woo
 *
 * `cart.css` khai `grid-template-columns: 80px 132px` (2 cột) nhưng hàng
 * có BA ô con (ảnh · mô tả · thành tiền). Ô thứ ba rơi vào một cột NGẦM
 * thứ tư → 80+16+132+16+11+16+116 = 387px trong khung 375px. Phần thừa bị
 * `overflow-x: clip` nuốt (§41) nên KHÔNG có thanh cuộn, chỉ mất chữ ở mép
 * phải — đúng bẫy §49, ảnh chụp nhìn vẫn "bình thường".
 * Đã xác nhận là lỗi có sẵn: tắt toàn bộ 21 luật `wc-block` của file này,
 * hàng vẫn 387px. Sau khi vá: 353px, 0 phần tử tràn.
 *
 * ⚠️ Woo blocks KHÔNG dùng media query cho giỏ hàng. Nó gắn class
 *    `.is-mobile` / `.is-medium` / `.is-large` vào `.wc-block-cart` bằng
 *    JS theo BỀ RỘNG CỦA KHỐI (kiểu container query). Viết
 *    `@media (max-width: 699px)` là bám nhầm trục — đúng tình cờ ở màn
 *    hình hẹp, sai khi khối bị thu hẹp trong khung rộng.
 *
 * ⚠️ Đặc hiệu: luật gốc dài tới (0,4,1) —
 *    `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row
 *     .wc-block-cart-item__product`. Thiếu một mắt xích là THUA IM LẶNG:
 *    lần đầu bỏ `.wc-block-cart` → luật không vào; lần hai bỏ
 *    `.wc-block-cart-items__row` → chỉ `grid-column` vào còn `grid-row`
 *    thì không, làm ô giá ĐÈ LÊN tên sản phẩm (cùng top 271px, left
 *    107px). Nghiệm thu phải so TOẠ ĐỘ hai ô, đừng tin "đã viết là đã vào".
 * ------------------------------------------------------------------ */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 80px minmax(0, 1fr);
}

/* Ảnh: cột trái, cao suốt hai dòng. */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Tên + mô tả ở dòng trên. */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
  grid-column: 2 / -1;
  grid-row: 1;
}

/* Giá xuống dòng dưới, cùng cột phải — hết đè và hết tràn. */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: start;
}

/*
 * ⚠️ Khi các ô nằm trên HAI dòng khác nhau thì đường kẻ phải đặt ở HÀNG,
 *    không đặt ở Ô. Ô mô tả kết thúc ở dòng 1 (đo được đáy y=364) trong
 *    khi mục kéo tới y=407 → viền dưới của nó vẽ thành một VỆT KẺ LẠC
 *    cắt ngang giữa mục. Không lỗi, chỉ nhìn như bảng bị vỡ.
 */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row td,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row td {
  border-bottom: 0;
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child),
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row:not(:last-child) {
  border-bottom: 1px solid var(--hl-border);
}

/* Ảnh sản phẩm: cùng dấu ấn nhận diện với card SP (viền 1px + đệm 4px). */
.wc-block-cart-item__image img {
  padding: 4px;
  border: 1px solid var(--hl-border-img);
  border-radius: var(--hl-radius);
}

.wc-block-components-product-name {
  font-size: 14px;
  line-height: 1.4;
  color: var(--hl-link);
}

.wc-block-components-product-name:hover { color: var(--hl-amber); }

.wc-block-cart-item__remove-link {
  color: var(--hl-muted);
  font-size: var(--hl-fs-xs);
}

.wc-block-cart-item__remove-link:hover { color: #c00; }

/* Ô chọn số lượng — bo và canh cho khớp nút của theme. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--hl-border-4);
  border-radius: var(--hl-radius);
}

.wc-block-components-quantity-selector__button:hover {
  background: var(--hl-bg-block);
  color: var(--hl-amber);
}

/* ------------------------------------------------------------------ *
 * Cột tổng tiền bên phải — đóng khung cho ra "phiếu thanh toán"
 * ------------------------------------------------------------------ */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar {
  background: var(--hl-bg-soft);
  border: 1px solid var(--hl-border-2);
  border-radius: var(--hl-radius);
}

.wc-block-cart__sidebar { padding: 18px; }

.wc-block-cart__totals-title {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hl-border-2);
  color: #555;
  font-size: var(--hl-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.wc-block-components-totals-item { font-size: var(--hl-fs-sm); }

/* Dòng tổng cuối cùng phải nổi hơn các dòng phụ. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--hl-price);
  font-size: var(--hl-fs-price);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Nút chính — vàng như mọi nút khác của site
 * ------------------------------------------------------------------ */
/*
 * ⚠️ Woo đặt chiều cao bằng
 *    `body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button`
 *    — (0,2,1). Selector một class là thua, `min-height` không vào (đo được
 *    42px trong khi khai 46px). Thêm `body` + class thứ hai cho hoà đặc
 *    hiệu; file này nạp sau `cart.css` nên hoà là thắng.
 */
body .wc-block-cart__submit-button.wc-block-components-button:not(.is-link),
body .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
  min-height: 46px;
  border-radius: var(--hl-radius-btn);
  background: var(--hl-amber);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity .15s ease;
}

body .wc-block-cart__submit-button.wc-block-components-button:not(.is-link):hover,
body .wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):hover {
  background: var(--hl-amber);
  opacity: .92;
}

/* Ô nhập của trang thanh toán khớp với ô nhập cổ điển ở trên. */
.wc-block-components-text-input input,
.wc-block-components-textarea {
  border-radius: var(--hl-radius);
}

/* Giỏ rỗng: căn giữa cho đỡ trống trải. */
.wc-block-cart__empty-cart__title { text-align: center; }

.woocommerce table.shop_table { border: 1px solid var(--hl-border-2); }
.woocommerce table.shop_table th { background: var(--hl-bg-block); padding: 10px; text-align: left; }
.woocommerce table.shop_table td { padding: 10px; border-top: 1px solid var(--hl-border); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--hl-radius-btn);
  background: var(--hl-amber);
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

.woocommerce .button:hover { opacity: .92; color: #fff; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dcdddf;
  border-radius: var(--hl-radius);
}

/* ================================================================== *
 * Hướng dẫn đặt cọc / chuyển khoản (giỏ hàng + thanh toán)
 *
 * Nội dung là trường `GioHang` bê nguyên từ hệ ASP.NET cũ, soạn bằng
 * FCKeditor → mang kích thước cứng inline. Phần ruột PHẢI nằm trong
 * `.hl-rte` để ăn bộ gò chống tràn; ở đây chỉ lo cái vỏ.
 *
 * Đặt SAU khối giỏ hàng nên dùng margin-top, không phải margin-bottom.
 * ================================================================== */
.hl-cart-notice {
  margin: 24px 0 20px;
  padding: 12px 15px;
  background: var(--hl-bg-tab);
  border-left: 3px solid var(--hl-amber);
}

.hl-cart-notice__title {
  margin: 0 0 8px;
  font-size: 16px;
  text-transform: uppercase;
  color: #555;
}

/* Bảng số tài khoản của hệ cũ có width cứng — cho phép cuộn thay vì vỡ khung. */
.hl-cart-notice .hl-rte table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}