/*
 * Thành phần dùng lại: header khối, card sản phẩm, card tin, nút, cột bên,
 * video, form, phân trang, nút nổi.
 */

/* ================================================================== *
 * 1. Header khối — dấu ấn nhận diện #1
 *    Cao 44px · nhãn nền #0288d1 chữ trắng 20px in hoa · khung ngoài
 *    #f2f2f2 viền #eaeaea · nút mũi tên vuông 44px bên phải · ribbon
 *    "HOT" vàng nhô lên góc trái.
 * ================================================================== */
.hl-blockhead {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: var(--hl-block-head-h);
  margin-bottom: 10px;
  background: var(--hl-bg-block);
  border: 1px solid var(--hl-border-3);
  text-transform: uppercase;
  /* Danh mục con có khối tới 24 mục (Quạt trần) — cắt bớt thay vì để
     header cao lên gấp ba, đúng như bản gốc (`.umt{height:44px;overflow:hidden}`). */
  overflow: hidden;
}

.hl-blockhead__label {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 20px 0 25px;
  margin: -1px 0 -1px -1px;
  background: var(--hl-blue) url("../img/ib.gif") no-repeat left center;
  color: #fff;
  font-size: var(--hl-fs-block);
  font-weight: normal;
  line-height: 1.15;
}

.hl-blockhead__label a { color: #fff; }
.hl-blockhead__label a:hover { color: #fff; text-decoration: none; }

/* Ribbon "HOT" — ảnh 50×42 nhô lên khỏi khung.
   Ribbon nằm NGOÀI khung nên khối này KHÔNG được `overflow:hidden`. */
.hl-blockhead:has(.hl-blockhead__hot) { overflow: visible; }

.hl-blockhead__hot {
  position: absolute;
  top: -17px;
  left: 6px;
  z-index: 2;
  width: 50px;
  height: 42px;
  background: url("../img/c.png") no-repeat left top;
}

/* Chừa chỗ cho ribbon — bản gốc dùng `padding-left:62px`. */
.hl-blockhead__hot + .hl-blockhead__label { padding-left: 62px; }

.hl-blockhead__links {
  display: none;
  margin-left: auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  list-style: none;
  align-items: center;
}

.hl-blockhead__links li { border-right: 1px solid var(--hl-border-3); }

.hl-blockhead__links a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
  white-space: nowrap;
}

.hl-blockhead__more {
  flex: 0 0 var(--hl-block-head-h);
  margin-left: auto;
  border-left: 1px solid var(--hl-border-3);
  background: url("../img/ic.gif") no-repeat center center;
}

.hl-blockhead__links + .hl-blockhead__more { margin-left: 0; }

@media (min-width: 992px) {
  .hl-blockhead__links { display: flex; }
}

/* Biến thể tiêu đề trang (bản gốc `.hp`). */
.hl-pagetitle {
  padding: 0 10px;
  margin-bottom: 10px;
  background: var(--hl-bg-title);
  color: #333;
  font-size: var(--hl-fs-h1);
  line-height: 38px;
}

/* ================================================================== *
 * 2. Card sản phẩm — dấu ấn nhận diện #2
 *    Ảnh vuông viền #dddfde 1px + padding 4px · tên đúng 1 dòng ·
 *    giá cũ gạch ngang bên phải · giá KM đỏ 17px bên trái ·
 *    badge ngôi sao đỏ 51×51 góc trên phải.
 * ================================================================== */
.hl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 10px;
}

.hl-card__media { display: block; position: relative; }

.hl-card__media img,
.hl-card__media .hl-noimg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hl-border-img);
  padding: 4px;
  background: #fff;
  transition: opacity var(--hl-ease);
}

/* Dấu ấn nhận diện #3: hover CHỈ làm mờ ảnh còn 80%.
   Không zoom, không đổ bóng. */
.hl-card__media:hover img { opacity: .8; }

.hl-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 51px;
  height: 51px;
  line-height: 51px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  /* `contain` chứ không phải `left top`: đổi ảnh khác kích thước cũng không
     bị cắt cụt (bẫy đã dính ở trang sản phẩm, xem shop.css). */
  background: url("../img/k1.png") no-repeat center / contain;
  overflow: hidden;
}

.hl-card__title {
  display: block;
  margin: 10px 0;
  line-height: 18px;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: var(--hl-fs);
}

.hl-card__title a { color: var(--hl-link); }

.hl-card__prices {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin-top: auto;
}

.hl-card__price { color: var(--hl-muted); }
.hl-card__price b,
.hl-card__price .amount { font-size: var(--hl-fs-price); color: var(--hl-price); font-weight: 700; }

.hl-card__old { color: var(--hl-price-old); }
.hl-card__old s { text-decoration: line-through; }

.hl-card__price--call b { font-size: var(--hl-fs); }

/* Ô giữ chỗ khi thiếu ảnh — giữ đúng tỉ lệ để lưới không nhảy. */
.hl-noimg {
  display: block;
  width: 100%;
  background: var(--hl-bg-block) url("../img/z.gif") no-repeat center center;
}

/* ================================================================== *
 * 3. Card tin
 * ================================================================== */
.hl-newscard { display: flex; flex-direction: column; min-width: 0; }

.hl-newscard__media img,
.hl-newscard__media .hl-noimg {
  display: block;
  width: 100%;
  aspect-ratio: 280 / 187;
  object-fit: cover;
  transition: opacity var(--hl-ease);
}

.hl-newscard__media:hover img { opacity: .8; }

.hl-newscard__title {
  margin: 10px 0;
  line-height: 18px;
  font-size: var(--hl-fs);
  font-weight: 400;
}

.hl-newscard__title a { color: var(--hl-link); }

/*
 * Trong lưới tin: tiêu đề chiếm đúng 2 dòng (2 × line-height 18px) kể cả khi
 * chỉ có 1 dòng chữ. Không cố định thì các card cùng hàng có phần mô tả bắt
 * đầu ở độ cao khác nhau, nhìn như lưới bị lệch.
 */
.hl-grid--news .hl-newscard__title {
  height: 36px;
  margin-bottom: 8px;
}

.hl-newscard__excerpt {
  margin: 0;
  font-size: var(--hl-fs-sm);
  line-height: 16px;
  color: var(--hl-muted);
  text-align: justify;
}

/*
 * Căn đều trong cột hẹp là hỏng: khoảng cách giữa các từ giãn ra thành những
 * "dòng sông" trắng (thấy rõ ở 994px, cột tin chỉ còn ~200px). Dưới 1200px thì
 * căn trái. Giữ căn đều ở khung đầy đủ cho đúng cảm quan bản gốc.
 */
@media (max-width: 1199px) {
  .hl-newscard__excerpt { text-align: left; }
}

.hl-newscard__date { font-size: var(--hl-fs-xs); color: var(--hl-muted); }

/* Biến thể ngang (tin ở chân trang, bản gốc `.nf .n`). */
.hl-newscard--row {
  flex-direction: row;
  gap: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfdfdf;
}

.hl-newscard--row .hl-newscard__media { flex: 0 0 134px; }

.hl-newscard--row .hl-newscard__media img {
  aspect-ratio: 134 / 90;
  padding: 3px;
  border: 1px solid #dfdfdf;
}

.hl-newscard--row .hl-newscard__title { margin-top: 0; }

/* ================================================================== *
 * 4. Nút
 * ================================================================== */
.hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--hl-radius-btn);
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.hl-btn:hover { color: #fff; text-decoration: none; opacity: .92; }

.hl-btn--primary { background: var(--hl-amber); border-bottom: 1px solid var(--hl-red-b); }
.hl-btn--secondary { background: var(--hl-blue-2); border-bottom: 1px solid var(--hl-blue-2-b); }
.hl-btn--wide { width: 220px; max-width: 100%; }

/* ================================================================== *
 * 5. Cột bên
 * ================================================================== */
.hl-side { margin-bottom: 15px; }

.hl-side__head {
  display: block;
  height: 38px;
  line-height: 38px;
  padding-left: 18px;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: normal;
  background: var(--hl-blue) url("../img/la.gif") no-repeat left center;
}

.hl-side__head a { color: #fff; }

.hl-side__head--amber { background: var(--hl-amber) url("../img/lb.gif") no-repeat left center; }

.hl-side__body { border: 1px solid var(--hl-border); background: #fff; }

/* --- cây danh mục --- */
.hl-cattree { list-style: none; }

.hl-cattree > li + li { border-top: 1px dotted var(--hl-border-4); }

.hl-cattree > li > a {
  display: block;
  line-height: 34px;
  padding-left: 25px;
  font-weight: 700;
  background: url("../img/lc.gif") no-repeat 10px center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-cattree > li > a:hover,
.hl-cattree > li.is-current > a { background-color: var(--hl-bg-block); text-decoration: none; }

.hl-cattree__sub { list-style: none; background: var(--hl-bg-block); padding: 4px 0 8px; }

.hl-cattree__sub a {
  display: block;
  padding: 3px 10px 3px 30px;
  font-size: var(--hl-fs-sm);
}

.hl-cattree__sub .is-current > a { color: #df0023; }

/* --- hỗ trợ trực tuyến --- */
.hl-support { list-style: none; background: var(--hl-bg-soft); }

.hl-support li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
}

.hl-support li:nth-child(even) { background: var(--hl-bg-block); }

.hl-support img {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.hl-support__name { display: block; font-weight: 700; color: var(--hl-name); font-size: 15px; }
.hl-support__tel { display: block; font-size: 15px; color: var(--hl-phone); font-weight: 700; }

/* --- tin liên quan trong cột bên --- */
.hl-sidenews { list-style: none; }

.hl-sidenews li { border-bottom: 1px solid var(--hl-border); padding: 6px 0; }

.hl-sidenews li:first-child img {
  display: block;
  width: 100%;
  aspect-ratio: 260 / 173;
  object-fit: cover;
  margin-bottom: 5px;
}

/* Tin từ thứ hai trở đi: bản gốc chỉ hiện chữ. Dùng :not(:first-child)
   để KHÔNG phải render markup khác nhau. */
.hl-sidenews li:not(:first-child) img { display: none; }

.hl-sidenews strong { display: block; font-size: var(--hl-fs-sm); font-weight: 400; line-height: 16px; }
.hl-sidenews span { display: block; font-size: var(--hl-fs-xs); color: var(--hl-muted); line-height: 16px; padding-top: 5px; text-align: justify; }

@media (min-width: 992px) {
  .hl-sidenews li:first-child span { display: block; }
}

/* --- banner cột bên --- */
.hl-side__banner img { display: block; width: 100%; height: auto; }

/* ================================================================== *
 * 6. Video
 * ================================================================== */
.hl-video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.hl-video__img {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 245;
  object-fit: cover;
  transition: opacity var(--hl-ease);
}

.hl-video:hover .hl-video__img { opacity: .8; }

.hl-video__play {
  position: absolute;
  inset: 0;
  background: url("../img/v.png") no-repeat center center;
}

.hl-video__title {
  position: absolute;
  inset: auto 0 0 0;
  min-height: 30px;
  line-height: 30px;
  padding-inline: 8px;
  background: rgb(0 0 0 / .6);
  color: #fff;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Biến thể trong lưới video: ảnh nhỏ hơn, chữ dưới ảnh. */
.hl-video--card .hl-video__play { background-image: url("../img/vp.png"); }

/* ================================================================== *
 * 7. Form
 * ================================================================== */
.hl-form { position: relative; }

.hl-form__hp { position: absolute !important; left: -9999px; }

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

.hl-form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hl-form--inline .hl-form__input { flex: 1 1 200px; width: auto; }

.hl-form__msg { flex: 1 1 100%; margin: 0; font-size: var(--hl-fs-sm); }
.hl-form__msg.is-ok { color: #187a2f; }
.hl-form__msg.is-error { color: #c0121a; }

.hl-form__row { margin-bottom: 10px; }
.hl-form__row label { display: block; margin-bottom: 4px; font-weight: 700; }

/* ================================================================== *
 * 8. Phân trang
 * ================================================================== */
.hl-pager { padding: 20px 0 10px; text-align: center; clear: both; }

.hl-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
}

.hl-pager a,
.hl-pager span {
  display: block;
  min-width: 30px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  font-weight: 700;
  color: #0062bd;
}

.hl-pager a:hover { border-color: red; color: #f60; text-decoration: none; }
.hl-pager .current { color: red; }

/* ================================================================== *
 * 9. Nút nổi — Messenger · Zalo · Gọi
 *    Khách chốt: hiện ở CẢ desktop lẫn mobile, góc dưới TRÁI.
 * ================================================================== */
.hl-float {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 95;
  display: flex;
  gap: 10px;
  align-items: center;
}

.hl-float__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0;
  width: 44px;
  border-radius: 50%;
  color: #fff;
  overflow: visible;
  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
}

.hl-float__btn:hover { color: #fff; text-decoration: none; }

.hl-float__icon {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px 24px;
}

.hl-float__label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hl-float__btn--messenger .hl-float__icon {
  background-color: #0084ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C6.2 2 1.8 6.3 1.8 11.9c0 3 1.3 5.7 3.5 7.5V24l3.4-1.9c.9.3 1.9.4 2.9.4 5.8 0 10.2-4.3 10.2-9.9S17.8 2 12 2zm1.1 13.1-2.7-2.8-5.1 2.8 5.6-6 2.8 2.8 5-2.8-5.6 6z'/%3E%3C/svg%3E");
}

/* Bong bóng chat kèm chữ Z — KHÔNG viết cả chữ "Zalo" vào icon, vì từ
   1200px trở lên nhãn chữ hiện ra sẽ thành "Zalo Zalo". */
.hl-float__btn--zalo .hl-float__icon {
  background-color: #0068ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3C6.9 3 2.8 6.4 2.8 10.6c0 2.3 1.3 4.4 3.3 5.8-.1.9-.5 2-1.4 3 1.6-.3 3-1 3.9-1.7 1 .3 2.2.5 3.4.5 5.1 0 9.2-3.4 9.2-7.6S17.1 3 12 3zm-3.4 4.6h5.1v1.2l-3.3 3.9h3.4v1.3H8.4v-1.2l3.3-3.9H8.6V7.6z'/%3E%3C/svg%3E");
}

.hl-float__btn--call .hl-float__icon {
  background-color: var(--hl-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* Hiệu ứng rung "alo phone" của bản gốc (mstyle.css:230). */
.hl-float__ring {
  position: absolute;
  inset: -8px;
  z-index: 1;
  border: 2px solid var(--hl-green);
  border-radius: 50%;
  opacity: .6;
  animation: hl-alo-ring 1.6s ease-out infinite;
}

@keyframes hl-alo-ring {
  0%   { transform: scale(.7); opacity: .8; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(.7); opacity: 0; }
}

/* ⚠️ Bắt buộc: người dùng tắt hiệu ứng thì không rung. */
@media (prefers-reduced-motion: reduce) {
  .hl-float__ring { animation: none; opacity: .35; }
}

/* Từ 1200px trở lên nở thành nút có nhãn chữ — CÙNG markup, chỉ CSS. */
@media (min-width: 1200px) {
  .hl-float__btn {
    width: auto;
    padding-right: 16px;
    border-radius: 22px;
  }

  .hl-float__label {
    position: static !important;
    width: auto; height: auto;
    clip-path: none;
    font-size: var(--hl-fs-sm);
    font-weight: 700;
  }

  .hl-float__btn--messenger { background: #0084ff; }
  .hl-float__btn--zalo { background: #0068ff; }
  .hl-float__btn--call { background: var(--hl-green); }
}

/* ================================================================== *
 * 10. Cửa sổ nổi (video, đặt hàng nhanh)
 * ================================================================== */
.hl-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.hl-modal[hidden] { display: none; }
.hl-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .7); }

.hl-modal__box {
  position: relative;
  z-index: 1;
  width: min(96vw, 960px);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--hl-radius);
}

.hl-modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / .6);
  color: #fff;
  font-size: 0;
}

.hl-modal__close::before {
  content: "\00d7";
  font-size: 26px;
  line-height: 34px;
}

.hl-modal__body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ================================================================== *
 * Chia sẻ + phần đuôi bài viết / trang tĩnh
 *
 * ⚠️ Các khối này TỪNG nằm trong `shop.css` — nhưng file đó chỉ được nạp
 *    trên trang WooCommerce, trong khi `.hl-share` dùng ở cả single.php
 *    (tin tức) lẫn single-hl_project.php, còn `.hl-othernews` chỉ có ở
 *    tin tức. Hậu quả: chúng hiện ra KHÔNG CÓ STYLE trên mọi trang không
 *    phải Woo. Chuyển sang đây (luôn được nạp) ngày 11-08-2026.
 *    Quy tắc: class dùng ngoài phạm vi Woo thì đặt ở file này.
 * ================================================================== */
.hl-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  padding: 12px 15px;
  background: var(--hl-bg-block);
  border: 1px solid var(--hl-border-4);
  border-radius: var(--hl-radius);
}

.hl-share__label { font-weight: 700; margin-right: 2px; }

.hl-share__btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: var(--hl-radius);
  color: #fff;
  font-size: var(--hl-fs-sm);
  line-height: 1;
  transition: opacity .15s ease;
}

.hl-share__btn:hover { color: #fff; text-decoration: none; opacity: .88; }
.hl-share__btn--fb { background: #1877f2; }
.hl-share__btn--zalo { background: #0068ff; }
.hl-share__btn--mail { background: #666; }

/* ------------------------------------------------------------------ *
 * Bài viết / trang tĩnh
 * ------------------------------------------------------------------ */
.hl-page-narrow { padding-bottom: var(--hl-gutter); }

.hl-single__meta { color: var(--hl-muted); font-size: var(--hl-fs-sm); margin-bottom: 10px; }

/* ------------------------------------------------------------------ *
 * "Các tin tức khác" — cuối trang tin
 *
 * Dùng cùng ngôn ngữ với `.hl-pagetitle` (thanh nền xám, cao 38px) để
 * không phá nhịp trang. Hai cột từ 768px: danh sách 10 mục xếp một cột
 * dài lê thê ở desktop, chia đôi thì cân với bề rộng cột nội dung.
 * ------------------------------------------------------------------ */
.hl-othernews { margin-top: 25px; }

.hl-othernews__title {
  padding: 0 10px;
  margin-bottom: 10px;
  background: var(--hl-bg-title);
  border-left: 3px solid var(--hl-amber);
  color: #333;
  font-size: var(--hl-fs-h1);
  line-height: 38px;
}

.hl-othernews ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .hl-othernews ul { columns: 2; column-gap: 30px; }
  /* Chống mục bị cắt đôi giữa hai cột. */
  .hl-othernews li { break-inside: avoid; }
}

.hl-othernews li {
  padding: 7px 5px 7px 22px;
  border-bottom: 1px dotted var(--hl-border-4);
  background: url("../img/icon4.gif") no-repeat 5px 14px;
}

.hl-othernews a {
  display: block;
  color: var(--hl-link);
  /* Tên tin của hệ cũ rất dài — giữ đúng 1 dòng cho danh sách khỏi rách. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-othernews a:hover { color: var(--hl-amber); }


/* ================================================================== *
 * Nội dung chung dùng NGOÀI phạm vi WooCommerce
 *
 * ⚠️ Các khối dưới đây TỪNG nằm trong `shop.css` — file chỉ được nạp khi
 *    `is_woocommerce() || is_cart() || is_checkout() || is_account_page()`.
 *    Nhưng chúng được dùng ở trang dự án, trang video, 404, tìm kiếm và
 *    lưu trữ, tức những trang KHÔNG nạp file đó → hiện ra không có style.
 *    Không lỗi, không cảnh báo. Chuyển sang đây (luôn được nạp)
 *    11-08-2026, cùng đợt với `.hl-share` / `.hl-othernews`.
 *
 *    `.hl-pspecs` và `.hl-lightbox` dùng ở CẢ trang sản phẩm lẫn trang dự
 *    án — để ở đây thì cả hai đều có, không phải nhân bản luật.
 * ================================================================== */

/* --- cat/empty --- */
.hl-cat-desc,
.hl-cat-seo { margin-bottom: 15px; }

.hl-cat-seo {
  padding-top: 15px;
  border-top: 1px solid var(--hl-border);
}

.hl-empty { padding: 30px 0; color: var(--hl-muted); }

/* --- pspecs --- */
.hl-pspecs {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 5px 0 8px;
}

@media (min-width: 480px) { .hl-pspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hl-pspecs li {
  display: flex;
  gap: 5px;
  align-items: baseline;
  min-height: 28px;
  padding-left: 15px;
  color: var(--hl-spec);
  border-bottom: 1px dotted var(--hl-border-4);
  background: url("../img/z.gif") no-repeat left 12px;
  overflow: hidden;
}

.hl-pspecs--wide { grid-column: 1 / -1; }
.hl-pspecs__v { font-weight: 700; }

/* --- video/project/404/lightbox --- */
.hl-videoframe { margin-bottom: 15px; }

.hl-videoframe iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.hl-project__facts { margin-bottom: 12px; }
.hl-project__gallery { margin-top: 15px; }

.hl-404__cats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 10px 0 30px; }

/* ================================================================== *
 * Xem ảnh phóng to
 * ================================================================== */
.hl-lightbox { position: relative; margin: 0; }
.hl-lightbox img { display: block; width: 100%; height: auto; }

.hl-lightbox figcaption {
  padding: 8px;
  text-align: center;
  color: var(--hl-muted);
  font-size: var(--hl-fs-sm);
}

.hl-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 60px;
  border: 0;
  background: rgb(0 0 0 / .35);
  font-size: 0;
}

.hl-lightbox__nav::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
}

.hl-lightbox__nav--prev { left: 0; }
.hl-lightbox__nav--prev::before { transform: rotate(-45deg); }
.hl-lightbox__nav--next { right: 0; }
.hl-lightbox__nav--next::before { transform: rotate(135deg); }