/*!
 * POTECH — phủ bộ nhận diện lên markup CÓ SẴN của theme, WooCommerce, Ninja Forms.
 *
 * pattern.css định nghĩa thành phần MỚI (.potech-card, .potech-spec…). File này
 * làm việc ngược lại: lấy class theme đã dùng suốt 8 năm (.headline, .main_nav,
 * .plist-item-details, ul.products li.product…) và kéo chúng về token mới. Không
 * sửa một dòng PHP nào — markup giữ nguyên thì còn đường lùi, tắt class
 * `potech-pattern` ở <body> là trang trở lại y như cũ.
 *
 * Điểm xuất phát đo được trên clone:
 *   - Brand blue theme đang dùng: #1f4788. Token: #1F4889. Lệch 1 giá trị hex ở
 *     kênh B — coi như trùng, nên phần xanh gần như không đổi.
 *   - Accent: theme đang dùng vàng #fbbf09 (gạch dưới .headline, dày 3px, rộng
 *     50px). Design system dùng đỏ #ED1C24, 2px, 48px. Đây là thay đổi thị giác
 *     lớn nhất của cả bản dựng.
 *   - Font: theme không khai font-family nào ở tầng gốc → đang chạy font mặc
 *     định của Bootstrap. Chuyển sang Barlow / Barlow Condensed.
 *
 * Thứ tự trong file đi theo thứ tự nhìn thấy trên trang: header → breadcrumb →
 * nội dung → sản phẩm → form → footer.
 */

/* ==========================================================================
   0 · GỠ MÌN
   Base typography trong pattern.css đặt `a { border-bottom: 1px solid transparent }`
   để làm gạch chân khi hover. Trên link văn bản thì đúng; trên nav, nút và thẻ
   sản phẩm thì nó cộng thêm 1px vào chiều cao và làm lệch hàng. Tắt ở đúng
   những chỗ đó — một lần, ngay đầu file, thay vì rải rác về sau.
   ========================================================================== */

html.potech-pattern .navbar a,
html.potech-pattern .dropdown-menu a,
html.potech-pattern .potechTools__box,
html.potech-pattern .products a,
html.potech-pattern .my_custom_breadcrumb a,
html.potech-pattern .button,
html.potech-pattern .btn,
html.potech-pattern .ctaButton,
html.potech-pattern .content-info a,
html.potech-pattern .contact-info a,
html.potech-pattern .single-solution a,
html.potech-pattern .single-project a,
html.potech-pattern .page-numbers,
html.potech-pattern .tai-lieu-item a {
  border-bottom: 0;
}
html.potech-pattern .navbar a:hover,
html.potech-pattern .dropdown-menu a:hover,
html.potech-pattern .potechTools__box:hover,
html.potech-pattern .products a:hover,
html.potech-pattern .my_custom_breadcrumb a:hover,
html.potech-pattern .button:hover,
html.potech-pattern .btn:hover,
html.potech-pattern .ctaButton:hover,
html.potech-pattern .content-info a:hover,
html.potech-pattern .contact-info a:hover,
html.potech-pattern .single-solution a:hover,
html.potech-pattern .single-project a:hover,
html.potech-pattern .page-numbers:hover,
html.potech-pattern .tai-lieu-item a:hover {
  /* `text-decoration-line: none` chu khong phai `border-bottom-color`: quy tac
     `a` o pattern.css da doi tu vien duoi sang text-decoration (xem chu thich
     dai o do). Danh sach nay la nhung cho KHONG duoc gach chan khi hover — card
     san pham, breadcrumb, nut, o lien he, du an, phan trang. */
  text-decoration-line: none;
}

/* `h1..h3 { margin: 0 }` của design system là đúng cho trang dựng theo lưới,
   nhưng nội dung bài viết và mô tả sản phẩm là HTML tự do — bỏ margin ở đó thì
   tiêu đề dính vào đoạn văn phía trên. Trả lại nhịp cho riêng vùng nội dung. */
html.potech-pattern .entry-content h2,
html.potech-pattern .woocommerce-Tabs-panel h2,
html.potech-pattern .woocommerce-product-details__short-description h2 {
  margin: var(--space-8) 0 var(--space-4);
}
html.potech-pattern .entry-content h3,
html.potech-pattern .entry-content h4,
html.potech-pattern .woocommerce-Tabs-panel h3,
html.potech-pattern .woocommerce-Tabs-panel h4 {
  margin: var(--space-7) 0 var(--space-3);
}
/* ==========================================================================
   1 · HEADER
   ========================================================================== */

html.potech-pattern .main_nav {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* Logo giữ nguyên: file SVG, kích thước và vị trí không đổi. Chỉ đường dẫn
   được sửa (inline style trong inc/pattern.php) vì SCSS trỏ cứng vào thư mục
   theme gốc. Không đặt background-size / width ở đây để khỏi đè lên bản cũ. */

html.potech-pattern .main_nav .nav-link,
html.potech-pattern .navbar-nav > li > a {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-700);
}
html.potech-pattern .main_nav .nav-link:hover,
html.potech-pattern .main_nav .nav-item:hover > .nav-link {
  color: var(--potech-blue);
}
/* Mục đang xem: gạch đỏ dưới chân, đúng như .potech-header__link.is-active */
html.potech-pattern .main_nav .current-menu-item > .nav-link,
html.potech-pattern .main_nav .current-menu-parent > .nav-link,
html.potech-pattern .main_nav .current-product_cat-ancestor > .nav-link {
  color: var(--potech-blue);
  box-shadow: inset 0 -2px 0 var(--potech-red);
}

html.potech-pattern .main_nav .dropdown-menu {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--potech-blue);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-3);
  padding: var(--space-2) 0;
}
html.potech-pattern .main_nav .dropdown-item {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink-700);
  padding: 8px var(--space-4);
}
html.potech-pattern .main_nav .dropdown-item:hover,
html.potech-pattern .main_nav .dropdown-item:focus {
  background: var(--potech-blue-050);
  color: var(--potech-blue);
}

/* Ô tìm kiếm trong header (mobile và mục menu desktop): thu về nút ngay từ
   khung hình đầu, không đợi JS.
   swift-search chỉ thu gọn khi custom element đã `:defined` — trước đó nó vẽ
   nguyên ô nhập 240px, ở header 390px là không vừa hàng nên rớt xuống dòng hai:
   `.main_nav` cao 101px, JS chạy xong còn 72px, cả trang giật lên 30px. Đo
   Lighthouse mobile: CLS 0,27, gần trọn là cú này (field data 0,28).

   Desktop cùng một bệnh: mục menu chứa ô `ss--compact` rộng 11rem trước khi
   nâng cấp rồi co về nút 36px, kéo cả hàng `.navbar-nav` — đo CLS 0,089 ở
   1280px (có từ trước 1.2.7, không phải do slider).

   Chép đúng ba quy tắc thu gọn của plugin sang trạng thái `:not(:defined)`, chỉ
   trong `.main_nav` — chỗ khác vẫn giữ đường lui ô nhập của plugin. Đánh đổi:
   JS hỏng hẳn thì nút này không mở được; ở header thì cú nhảy bố cục mỗi lần
   tải trang là cái giá lớn hơn. */
html.potech-pattern .main_nav swift-search:not(:defined)[data-layout='icon'] {
  inline-size: var(--ss-height);
  min-inline-size: var(--ss-height);
}
html.potech-pattern .main_nav swift-search:not(:defined)[data-layout='icon'] > .ss__form {
  display: none;
}
html.potech-pattern .main_nav swift-search:not(:defined)[data-layout='icon'] .ss__trigger {
  display: inline-flex;
}

/* Thanh 3 công cụ dưới header. Đang là viên bo 4px, một cái đắp gradient đỏ —
   design system cấm gradient, và bo > 8px. Kéo về nút vuông của bộ nhận diện. */
html.potech-pattern .potechTools {
  background: var(--ink-050);
  border-bottom: 1px solid var(--rule);
}
html.potech-pattern .potechTools .potechTools__box {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--potech-blue);
  background: var(--paper) none;
  border: 1px solid var(--potech-blue-100);
  border-radius: var(--radius-1);
  box-shadow: none;
  padding: 8px 14px;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .potechTools .potechTools__box:hover {
  background: var(--potech-blue-050);
  border-color: var(--potech-blue);
  color: var(--potech-blue);
}
/* Nút đầu tiên là CTA chính (thiết kế miễn phí) — nó được quyền là màu đỏ đặc,
   nhưng đặc chứ không gradient. Style inline trong header.php vẫn còn gradient
   nên phải !important đúng một thuộc tính background. */
/* red-700 chu khong phai do tuoi: chu 12px trang tren #ED1C24 do duoc 4.38,
   duoi nguong AA 4.5. Tren #C8141B la 5.88. */
html.potech-pattern .potechTools .potechTools__box:first-child {
  background: var(--potech-red-700) !important;
  border-color: var(--potech-red-700);
  color: var(--paper);
}
html.potech-pattern .potechTools .potechTools__box:first-child:hover {
  background: var(--potech-red-800) !important;
  border-color: var(--potech-red-800);
  color: var(--paper);
}

/* Xam than bai. app.css dat `.home .intro{color:#898989}` va cung mau do cho
   `.home .testimonials blockquote`. Tren nen trang no do duoc 3.50 — duoi
   nguong AA 4.5 cho chu 16px, va la 12/12 loi tuong phan con lai cua trang chu
   sau khi da sua phan cua bo nhan dien. --fg-muted #5A6273 dat 6.12. */
html.potech-pattern .home .intro,
html.potech-pattern .home .testimonials blockquote,
html.potech-pattern .intro p,
html.potech-pattern .intro li {
  color: var(--fg-muted);
}

/* ==========================================================================
   1b · HERO TRANG CHỦ (.header-carousel)
   Nền xanh đặc, chữ và nút đang là vàng #fbbf09 — màu duy nhất trên site không
   nằm trong bảng màu 2 màu của POTECH. Kéo về trắng + đỏ.
   Trên nền xanh không dùng được nút xanh, nên nút chính là đỏ đặc và nút phụ là
   viền trắng — đúng cặp primary/ghost của design system, chỉ đảo nền.
   ========================================================================== */

/* Nen hero: theme dang dung linear-gradient(270deg, rgba(0,142,199,0) 26%,
   rgb(0,85,150) 68%) tren rgb(22,104,178) — xanh sang, nhat dan ve phai toi
   trong suot. Chu #B6C4DD tren do chi dat 3.26; cung mau chu do tren
   #1F4889 dat 5.08. Trong .header-carousel khong co the anh nao nen bo
   gradient khong mat anh, va dai mau tro ve dung xanh POTECH. */
html.potech-pattern .header-carousel {
  background-color: var(--potech-blue);
  background-image: none;
}
html.potech-pattern .header-carousel .description {
  color: var(--fg-on-blue-muted);
  font-size: 18px;
  max-width: 52ch;
}
html.potech-pattern .header-carousel .cta {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--radius-1);
  border: 1px solid var(--potech-red-700);
  background: var(--potech-red-700);
  color: var(--paper);
  box-shadow: none;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .header-carousel .cta:hover {
  background: var(--potech-red-800);
  border-color: var(--potech-red-800);
  color: var(--paper);
}
/* Nút thứ hai là hành động phụ — không được cạnh tranh với nút chính. */
html.potech-pattern .header-carousel .cta-bar .cta:last-child {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--paper);
}
html.potech-pattern .header-carousel .cta-bar .cta:last-child:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--paper);
}

/* ==========================================================================
   1c · KHỐI SỐ LIỆU (.section.numbers)
   Cùng vai trò với .potech-capability của design system: con số lớn bằng font
   condensed, nhãn chữ hoa giãn. Số đổi từ vàng sang đỏ.
   ========================================================================== */

html.potech-pattern .numbers h2 { color: var(--paper); }
html.potech-pattern .numbers h2::after { border-bottom-color: var(--potech-red); }
html.potech-pattern .numbers .number-box,
html.potech-pattern .numbers .counter {
  color: var(--potech-red);
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}
/* Nhan nay nam tren anh numbers-blue.avif chu khong phai mot mau phang —
   khong do duoc tuong phan on dinh, va 12px/300 la truong hop xau nhat.
   Dung trang. */
html.potech-pattern .numbers .box p {
  color: var(--paper);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Sao van la mau cam, chi dam hon: #F38020 tren nen trang do duoc 2.65 —
   truot ca nguong 3:1 danh cho do hoa mang thong tin. #D96A00 = 3.49. */
html.potech-pattern .star-rating,
html.potech-pattern .star-rating::before,
html.potech-pattern .star-rating span::before,
html.potech-pattern .comment-form-rating .stars a {
  color: #D96A00;
}

/* Sao đánh giá GIỮ NGUYÊN màu vàng. Đây là quy ước đọc được của cả web, không
   phải màu thương hiệu — đổi sang đỏ thì người xem đọc thành cảnh báo. */

/* ==========================================================================
   2 · BREADCRUMB
   ========================================================================== */

html.potech-pattern .tsf_breadcrumb-wrap {
  background: var(--ink-050);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3) 0;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
/* Breadcrumb do `potech_breadcrumb()` của theme in ra, class là
   `.my_custom_breadcrumb` — KHÔNG phải `.woocommerce-breadcrumb`. Bản đầu tôi
   nhắm nhầm sang class của WooCommerce; kiểm bằng cách đối chiếu class trong
   theme.css với class thật trên 5 trang mới lộ ra. */
html.potech-pattern .tsf_breadcrumb-wrap a,
html.potech-pattern .my_custom_breadcrumb a { color: var(--potech-blue); }
html.potech-pattern .my_custom_breadcrumb { color: var(--fg-muted); margin: 0; }

/* ==========================================================================
   3 · TIÊU ĐỀ MỤC
   Gạch dưới .headline đổi từ vàng #fbbf09 3px/50px sang đỏ 2px/48px.
   ========================================================================== */

html.potech-pattern .headline,
html.potech-pattern .contact-info .headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--potech-blue);
}
html.potech-pattern .home .wrap section .headline::after {
  border-bottom: 2px solid var(--potech-red);
  width: 48px;
}
html.potech-pattern .home .wrap section .headline.light { color: var(--paper); }
html.potech-pattern .home .wrap section .headline.light::after {
  border-bottom-color: var(--potech-red);
}

/* Nhịp mục: 60px hiện tại hơi chật cho khổ chữ mới. Design system dùng 96px,
   nhưng nhảy thẳng lên 96 làm trang chủ dài thêm ~200px — dùng clamp để khổ
   hẹp giữ nguyên, khổ rộng mới giãn. */
html.potech-pattern .section { padding: clamp(60px, 6vw, 96px) 0; }

html.potech-pattern .single-solution .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
}
/* KHÔNG bo góc .single-project-wrap: dải "Dự án tiêu biểu" là mosaic các ô
   đứng sát mép nhau (gap 0), bo góc từng ô làm bốn góc hé nền phía sau thành
   khe hở. Bo góc chỉ dành cho thẻ đứng rời như .single-solution. */
html.potech-pattern .single-solution {
  border-radius: var(--radius-2);
  overflow: hidden;
}

/* Slider dự án trước khi Swiper khởi tạo: bề rộng slide theo đúng breakpoint
   của `khoiTaoSliderDuAn()` (resources/scripts/app.js) — 1 / 2 / 4 / 5 slide.
   Từ 1.2.7 Swiper chỉ khởi tạo khi slider sắp vào màn hình; CSS cũ để cứng
   20% (5 slide) cho mọi bề ngang, nên trên mobile khối này sẽ cao vọt lên lúc
   khởi tạo. Selector cũ (0,5,0) + tiền tố. */
html.potech-pattern .home .featured-project .swiper-container:not(.swiper-initialized) .swiper-slide {
  width: 100%;
}
@media (min-width: 640px) {
  html.potech-pattern .home .featured-project .swiper-container:not(.swiper-initialized) .swiper-slide {
    width: 50%;
  }
}
@media (min-width: 768px) {
  html.potech-pattern .home .featured-project .swiper-container:not(.swiper-initialized) .swiper-slide {
    width: 25%;
  }
}
@media (min-width: 1024px) {
  html.potech-pattern .home .featured-project .swiper-container:not(.swiper-initialized) .swiper-slide {
    width: 20%;
  }
}

/* Dải "Dự án tiêu biểu" trang chủ dùng CHUNG công thức nhãn với thẻ danh
   sách dự án (mục 9 bên dưới): scrim navy đậm + Barlow Condensed 700 caps
   + khóa cao 2 dòng cho các ô đều nhau. Trước đó hai mặt cùng một nội dung
   mà mỗi nơi một kiểu: trang chủ bar xanh sáng #1668b2b0 chữ thường 15px
   (CSS cũ `.home .featured-project .single-project .title` (0,4,0) đè
   pattern (0,3,1)), danh sách scrim navy — nhìn mất liên kết. Selector
   chép nguyên chuỗi cũ + tiền tố; position/bottom/width giữ của CSS cũ. */
html.potech-pattern .home .featured-project .single-project .title {
  background: linear-gradient(to top, rgba(11, 26, 54, 0.94), rgba(11, 26, 54, 0.62));
  color: var(--fg-on-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  padding: 12px;
  box-sizing: border-box;
  height: calc(2 * 1.3em + 24px);
  overflow: hidden;
}

/* ==========================================================================
   4 · NÚT
   `.button` là nút của WooCommerce, `.btn` là của Bootstrap. Cả hai kéo về
   .btn--primary. Không đụng .btn-close (nút X của modal CTA).
   ========================================================================== */

html.potech-pattern .woocommerce .button,
html.potech-pattern .woocommerce a.button,
html.potech-pattern .woocommerce button.button,
html.potech-pattern .woocommerce input.button,
html.potech-pattern .btn-primary,
html.potech-pattern .nf-form-content input[type="button"],
html.potech-pattern .nf-form-content button[type="submit"] {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--radius-1);
  border: 1px solid transparent;
  background: var(--potech-blue);
  color: var(--paper);
  box-shadow: none;
  transition: background var(--dur-base) var(--ease-out);
}
html.potech-pattern .woocommerce .button:hover,
html.potech-pattern .woocommerce a.button:hover,
html.potech-pattern .woocommerce button.button:hover,
html.potech-pattern .woocommerce input.button:hover,
html.potech-pattern .btn-primary:hover,
html.potech-pattern .nf-form-content input[type="button"]:hover,
html.potech-pattern .nf-form-content button[type="submit"]:hover {
  background: var(--potech-blue-700);
  color: var(--paper);
}
/* Nút phụ của WooCommerce (alt = nút chính của Woo, thường là "Đặt hàng") giữ
   vai trò nhấn mạnh nhất → đỏ. */
html.potech-pattern .woocommerce .button.alt,
html.potech-pattern .woocommerce a.button.alt {
  background: var(--potech-red);
  border-color: var(--potech-red);
}
html.potech-pattern .woocommerce .button.alt:hover,
html.potech-pattern .woocommerce a.button.alt:hover {
  background: var(--potech-red-700);
}

/* ==========================================================================
   5 · LƯỚI SẢN PHẨM (danh mục + sản phẩm liên quan)
   ========================================================================== */

html.potech-pattern .woocommerce ul.products li.product {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
html.potech-pattern .woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-3);
}
/* Do dac hieu phai hon quy tac cua theme, khong duoc thap hon:
     theme  .woocommerce.archive ul.products li.product a            = (0,5,3)
     truoc  html.potech-pattern .woocommerce ul.products li.product > a = (0,4,4)  THUA
   Vi thua nen vien 1px mau ececec cua theme van con tren the <a>. Card
   bi keo cao bang hang con <a> chi cao bang noi dung, nen vien duoi cua <a>
   hien ra ngay duoi khoi thong so — vach thua ma nhin ra ngay.
   Bam dung chuoi cua theme roi them tien to (hon dung mot class) de thang. */
html.potech-pattern .woocommerce ul.products li.product > a,
html.potech-pattern .woocommerce.archive ul.products li.product > a,
html.potech-pattern .woocommerce.single div.product .woocommerce-tabs .related.products li.product > a,
html.potech-pattern .woocommerce .related.products li.product > a {
  display: block;
  padding: 14px;
  border: 0;
  box-shadow: none;
  /* Lap day card de khoang trong nam BEN TRONG <a>, khong phai duoi no. */
  height: 100%;
}

html.potech-pattern .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  /* 600 chu khong phai 700: o 16px, ten san pham NGANG CO voi body 16px w400
     ngay ben duoi. Cung co ma khac han luong muc thi mat doc ra "chu than bi boi
     dam", khong phai tieu de — dieu tao phan cap o day la mat chu condensed +
     in hoa, khong phai net day. Xem chu thich weight o .potech-products-heading
     cho phan do 600 vs 700. */
  font-weight: 600;
  /* 16px chu khong phai 18px. O 18px, ten san pham cua POTECH ("Den LED Nha
     Xuong UFO Serie H 60W den 300W chip Lumileds") tran sang dong thu ba tren
     the rong ~180px — do duoc 12/12 the bi cat. */
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  /* Khoang duoi la margin chu khong phai padding: vung padding VAN nam trong
     vung ve cua overflow: hidden, nen 8px padding-bottom de lo ra dung mot
     manh dong thu ba (do duoc clientHeight 65 = 44.8 noi dung + 20 padding,
     scrollHeight 87). Doi sang margin thi cat dung bien dong. */
  padding: 12px 0 0;
  margin-bottom: 8px;
  /* line-height 1.4 chu khong phai 1.15: chu HOA tieng Viet co dau tren (Ê, Ố,
     Ư) va dau duoi (Ạ, Ậ) — o 1.15 dau bi cat mat khi cat dong.
     Chieu cao chot dung 2 dong nen cho nao dai hon thi cat DUNG BIEN DONG,
     khong con nua dong lo ra. Khong dung -webkit-line-clamp: Chrome blockify
     display ve flow-root nen clamp khong bao gio an o day (da do lai 3 lan). */
  line-height: 1.4;
  /* box-sizing: border-box la mac dinh toan cuc (Bootstrap), nen `height` se
     NUOT ca 20px padding o tren: cao 44.8px tru padding con 24.8px, tuc 1.1
     dong — do la ly do dong thu hai bi cat ngang than chu chu khong phai do
     line-height. Doi ve content-box de con so 2 dong la 2 dong that. */
  box-sizing: content-box;
  height: calc(2 * 1.4em);
  overflow: hidden;
}
html.potech-pattern .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--potech-blue);
}

html.potech-pattern .woocommerce ul.products li.product .price,
html.potech-pattern .woocommerce div.product p.price,
html.potech-pattern .woocommerce div.product span.price {
  font-family: var(--font-text);
  font-weight: 700;
  /* red-700: gia in o 13.7px, ma #ED1C24 tren trang chi dat 4.38. */
  color: var(--potech-red-700);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}

/* Bảng thông số rút gọn trên thẻ. Nền cũ là xanh 8% (#1f478814) — đổi sang nền
   xám trung tính của bộ nhận diện, viền trên thay vì viền quanh, để thẻ đỡ
   "hộp trong hộp". Bốn thuộc tính phải !important vì quy tắc gốc dùng
   !important trên padding. */
html.potech-pattern .woocommerce ul.products li.product a .plist-item-details,
html.potech-pattern .woocommerce .related.products li.product a .plist-item-details {
  background: var(--ink-050);
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 0 0 !important;
  margin-top: 4px;
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  background-color: transparent;
}
html.potech-pattern .woocommerce ul.products li.product a .plist-item-details li > :first-child {
  color: var(--fg-subtle);
}
html.potech-pattern .woocommerce ul.products li.product a .plist-item-details li > :last-child {
  color: var(--ink-900);
  font-weight: 600;
}

/* Dải khoảng giá trị thông số trong bộ lọc / thẻ sản phẩm. */
html.potech-pattern .custom-field-range {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}

/* Tieu de "San pham tuong tu" / upsell: quy tac doi gach vang sang do o muc 3
   nam duoi `.home`, nen ngoai trang chu no khong voi toi. Trinh duyet do duoc
   `section.related.products > h2::after` van la #FBBF09. */
html.potech-pattern .related.products > h2::after,
html.potech-pattern .upsells.products > h2::after,
html.potech-pattern .related_products h2::after {
  border-bottom-color: var(--potech-red) !important;
}
/* ==========================================================================
   6 · TRANG SẢN PHẨM
   Không đụng .spg__* — gallery là của swift-product-gallery, nó tự có CSS và
   sửa từ ngoài vào là cách chắc chắn nhất để làm vỡ zoom/lightbox.
   ========================================================================== */

html.potech-pattern .woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: var(--lh-tight);
  color: var(--ink-900);
}

/* Duoi 992px hai cot `col-lg-5` (gallery) va `col-lg-7` (tom tat) xep chong, va
   CHAM NHAU: da do o 375px, day cot gallery va dinh tieu de cung o y=789 — cach
   nhau DUNG 0px. Khong quy tac nao dat margin cho `.product_title`, nen day
   khong phai chuyen ghi de: khoang cach nay chua bao gio ton tai.

   Vi sao khong ai thay o desktop: tu 992px tro len hai cot dung CANH nhau, khe
   ho la `gutter` ngang cua Bootstrap. Xep chong thi gutter ngang khong con vai
   tro gi, ma `row` nay khong khai `row-gap` (do duoc: `normal`).

   Dat margin duoi cho cot GALLERY chu khong margin tren cho tieu de: tieu de con
   dung o dau cot phai o desktop, them margin tren la day no lech khoi hang voi
   anh. Dong margin nay chi song trong nhanh xep chong.

   Chon `--space-7` (32px): tieu de la chu hoa 22,4px, dong sat 23,3px. Cach nho
   hon thi khoi chu hoa dac do doc ra nhu phan chu thich cua anh ngay tren. */
@media (max-width: 991.98px) {
  html.potech-pattern .woocommerce div.product > .row > .col-lg-5 {
    margin-bottom: var(--space-7);
  }
}
html.potech-pattern .woocommerce div.product .sku,
html.potech-pattern .woocommerce div.product .sku_wrapper {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* Tab: bỏ viên bo và nền chuyển sắc mặc định của WooCommerce, thay bằng dải tab
   phẳng có gạch đỏ dưới tab đang mở. Nhiều thuộc tính phải !important vì
   woocommerce.css dùng !important trên chính chúng. */
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--rule);
}
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--rule);
}
/* Thanh tab co nen XANH #1F4889 tu CSS cua theme. Chu tab mau --fg-muted tren
   do do duoc 1.48. Ban dung dinh la tab phang tren nen trang, nen bo nen xanh
   — sua nen chu khong phai sua mau chu.

   NEN PHAI DAC, KHONG DUOC `transparent`. Quy tac goc

     .woocommerce.single div.product .woocommerce-tabs ul.tabs {
       background-color:#1f4788; position:sticky; top:0; z-index:10 }

   gop hai viec vao mot khoi: mau nen VA `position:sticky`. Ban dau o day khai
   `background: transparent` — thang ve mau (0,5,3) so voi (0,5,2) — nhung khong
   dong den `position`, nen thanh tab van dinh o dinh man hinh ma khong con gi
   che phia sau. Da do tren trang that: khoi tab cao 6295px, cuon xuong la chu
   trong tab chong len chu cua noi dung, khong doc duoc ca hai.

   Giu `sticky` chu khong go: voi khoi noi dung cao 6295px, thanh tab dinh la
   thu duy nhat cho biet dang doc muc nao va nhay sang muc khac duoc. Cai sai la
   nen trong suot, khong phai chuyen dinh.

   `padding` hai ben giu 0 de tab dau thang hang voi tieu de ben duoi; padding
   doc cho chu khong cham vach ke khi noi dung truot sat. Vien duoi la vach ke
   1px, dong thoi la ranh gioi thay duoc giua thanh dinh va noi dung dang truot. */
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--bg-rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-1) 0 0;
}

/* Thanh admin cua WordPress la `position:fixed` cao 32px o dinh man hinh, nen
   `top:0` day thanh tab chui xuong DUOI no — da chup lai: chi con lo ra vach do
   cua tab dang mo, chu tab mat sach. Chi nguoi dang dang nhap moi thay, nhung o
   day nguoi dang nhap chinh la nguoi dung trang nay de kiem, va loi cu cung bi
   the (nen xanh cua theme cung chui xuong duoi). 46px la chieu cao thanh admin
   khi cua so hep hon 783px — so cua WordPress core, khong phai tu dat.

   `.admin-bar.woocommerce` VIET LIEN, khong co khoang trang. Ca hai class deu
   nam tren chinh the <body> (da doc: "... logged-in admin-bar ... woocommerce
   woocommerce-page ..."), nen viet roi ra `.admin-bar .woocommerce` la doi
   `.woocommerce` phai la con chau cua `.admin-bar` — tuc con chau cua chinh no.
   Ban dau toi viet roi va quy tac im lang khong khop; do lai `top` van ra 0px.

   Do dac hieu (0,6,3), hon quy tac tren dung mot class. */
html.potech-pattern .admin-bar.woocommerce div.product .woocommerce-tabs ul.tabs {
  top: 32px;
}
@media screen and (max-width: 782px) {
  html.potech-pattern .admin-bar.woocommerce div.product .woocommerce-tabs ul.tabs {
    top: 46px;
  }
}
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs li {
  /* !important: WooCommerce ve li bang linear-gradient trang, va quy tac goc
     thang `background: transparent` thuong o day. */
  background: transparent !important;
  background-image: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 var(--space-6) 0 0;
  padding: 0;
}
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

/* Tab dang mo van co bong. Do dac hieu:
     theme  .woocommerce.single div.product .woocommerce-tabs ul.tabs li.active = (0,6,3)
            { background: gradient doc trang → fcfcfc 40% → d3d3d3;
              box-shadow: 0 4px 12px, mau 00000026 (den 15%) }
     tren   html.potech-pattern .woocommerce div.product ... ul.tabs li        = (0,5,4)  THUA
   `background` cua toi co !important nen nen chuyen sac bi chan, nhung
   `box-shadow: none` thi khong — nen rieng cai bong 12px con lai, treo duoi
   dung mot tab. Bam dung chuoi cua theme (co ca `.single`) roi them tien to. */
html.potech-pattern .woocommerce.single div.product .woocommerce-tabs ul.tabs li,
html.potech-pattern .woocommerce.single div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  margin: 0 var(--space-6) 0 0;
  padding: 0;
}
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 12px 0;
  display: block;
  border-bottom: 2px solid transparent;
}
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--potech-blue);
}
html.potech-pattern .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--potech-blue);
  border-bottom-color: var(--potech-red);
}

/* Bảng trong tab thông số: dùng lại đúng hình thức .potech-spec. */
html.potech-pattern .woocommerce-Tabs-panel table,
html.potech-pattern .woocommerce table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  /* Xem chú thích ở .potech-spec trong pattern.css: overrides.css có
     `table { border: #e8e8e8 !important }`, shorthand thiếu line-style nên nó
     reset border-style về none. Chỉ !important thắng được !important. */
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-2);
  overflow: hidden;
}
html.potech-pattern .woocommerce table.shop_attributes th,
html.potech-pattern .woocommerce-Tabs-panel table th {
  background: var(--ink-050);
  text-align: left;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--rule);
}
html.potech-pattern .woocommerce table.shop_attributes td,
html.potech-pattern .woocommerce-Tabs-panel table td {
  padding: 12px 18px;
  font-size: 14px;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-100);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}

/* Danh sách tài liệu tải về trên trang sản phẩm. */
/* Moi muc mot khung 1px + the <a> ben trong lai co border-top rieng cua theme
   (#EAEAEA) — hai vach nam sat nhau nen giua hai dong tai lieu la mot vach doi
   2px, con dau va cuoi danh sach thi thua mot vach. Do duoc tren trang
   PT-UFOH: .tai-lieu-item co vien du 4 canh, a.d-block co border-top 0.909px.
   Bo khung, chi giu MOT vach ngan giua cac dong; dong cuoi khong vach. */
html.potech-pattern .tai-lieu-item {
  border: 0;
  border-bottom: 1px solid var(--bg-rule);
  border-radius: 0;
  padding: 10px 14px;
  background: var(--paper);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
html.potech-pattern .tai-lieu-item:hover {
  border-bottom-color: var(--potech-blue);
  background: var(--potech-blue-050);
}
html.potech-pattern .row > [class*="col-"]:last-child > .tai-lieu-item,
html.potech-pattern .tai-lieu-item:last-child {
  border-bottom: 0;
}
/* Vach thu hai — cua chinh the <a> ben trong. */
html.potech-pattern .tai-lieu-item a {
  border-top: 0;
}

/* Nut "Them vao bao gia": theme dat nen rgb(255,48,68) — mau do khong nam
   trong bang mau POTECH, va chu trang 13px tren do chi dat 3.65.
   --potech-red-700 = 5.88. */
html.potech-pattern .woocommerce div.product form.cart button.single_add_to_cart_button,
html.potech-pattern .woocommerce .button.single_add_to_cart_button {
  background-color: var(--potech-red-700) !important;
  border-color: var(--potech-red-700) !important;
  color: var(--paper) !important;
}
html.potech-pattern .woocommerce div.product form.cart button.single_add_to_cart_button:hover,
html.potech-pattern .woocommerce .button.single_add_to_cart_button:hover {
  background-color: var(--potech-red-800) !important;
  border-color: var(--potech-red-800) !important;
}

/* Nhan tren the du an. Do duoc: h2.entry-title dat de tuyet doi, nen
   rgba(22, 104, 178, 0.69) — dung mau xanh sang lech bang mau giong het nen
   hero cu. Chieu cao dai bang chu (49px voi tieu de 2 dong, 35px voi 1 dong)
   nen cac the trong cung mot hang che di nhung phan anh khac nhau, nhin lech.
   Doi sang scrim xanh dam cua bo nhan dien va chot cao 2 dong cho deu. */
/* Header trang dự án đơn: nền xanh cũ #1F4788 với chữ trắng KẾ THỪA từ
   `header { color: #fff }` của CSS cũ — nhưng h1 bị rule heading trực tiếp
   của pattern.css (`h1 { color: var(--ink-900) }`, chữ tối cho nền sáng) đè
   mất. Trả màu chữ-trên-xanh cho tiêu đề trên bề mặt tối này (trắng/#1F4788
   = 8.6:1). */
html.potech-pattern .single-portfolio article header .entry-title {
  color: var(--fg-on-blue);
}

/* Hero dự án đơn là hòn đảo vàng #fbbf09 cuối cùng của nhận diện cũ (nút .cta
   nền vàng + link danh mục .ung-dung vàng). Đưa về đúng công thức CTA hero
   trang chủ (mục 1b): nút chính đỏ -700 chữ trắng, nút phụ ghost viền trắng —
   cùng token, cùng nhịp hover, cùng cặp chính/phụ. Nhãn danh mục xuống giọng
   muted-on-blue (#B6C4DD trên #1F4788 ≈ 5.1:1, đủ AA cho chữ nhỏ đậm) để cú
   nhấn đỏ là điểm nhấn duy nhất trên hero. */
html.potech-pattern .single-portfolio article header .cta {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--tracking-label);
  padding: 14px 24px;
  border-radius: var(--radius-1);
  border: 1px solid var(--potech-red-700);
  background-color: var(--potech-red-700);
  color: var(--paper);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .single-portfolio article header .cta:hover {
  background-color: var(--potech-red-800);
  border-color: var(--potech-red-800);
}
html.potech-pattern .single-portfolio article header .cta.toggleCTA {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
}
html.potech-pattern .single-portfolio article header .cta.toggleCTA:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--paper);
}
html.potech-pattern .single-portfolio article header .ung-dung a {
  color: var(--fg-on-blue-muted);
}
html.potech-pattern .single-portfolio article header .ung-dung a:hover {
  color: var(--fg-on-blue);
}

/* Thân bài dự án: overrides cũ sơn h2 xanh preset #0693E3 (3.3:1) và h3 CAM
   preset #FF6900 (2.78:1 — trượt cả chuẩn chữ lớn). Giữ nguyên thiết bị phân
   cấp hai màu của bản cũ nhưng đổi sang từ vựng hệ: h2 xanh thương hiệu
   (9.0:1), h3 đỏ chữ -700 (5.88:1 — Red Ink Rule). Selector chép nguyên của
   overrides + tiền tố để hơn đúng một class. */
html.potech-pattern .single-portfolio .entry-content div[itemprop="text"] h2 {
  color: var(--potech-blue);
}
html.potech-pattern .single-portfolio .entry-content div[itemprop="text"] h3 {
  color: var(--potech-red-700);
}

/* Chỉ trang danh sách/chuyên mục — CSS cũ cũng giới hạn đúng hai body class này.
   `article.portfolio` đơn thuần thì KHÔNG dùng được: post_class in class
   `portfolio` cả ở trang đơn, nhãn scrim sẽ đè lên h1 tiêu đề dự án. */
html.potech-pattern .post-type-archive-portfolio article.portfolio .entry-title,
html.potech-pattern .tax-portfolio_category article.portfolio .entry-title {
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(11, 26, 54, 0.94), rgba(11, 26, 54, 0.62));
  color: var(--fg-on-blue);
  font-family: var(--font-display);
  font-weight: 700;
  /* 16px chứ không phải 15px của bản đầu: 15 lạc thang (ramp không có bậc này),
     mà condensed trên scrim ảnh thì nhích lên chỉ dễ đọc hơn. Khóa cao 2 dòng
     bên dưới tính bằng em nên tự co giãn theo. */
  font-size: var(--fs-body);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  padding: 12px;
  margin: 0;
  /* border-box: voi content-box thi left:0 + right:0 cho vung noi dung bang be
     rong the (383px) roi CONG them 24px padding — dai mau rong 407px, thua ra
     ngoai anh. Chieu cao vi vay phai cong padding vao. */
  box-sizing: border-box;
  height: calc(2 * 1.3em + 24px);
  overflow: hidden;
}
/* Tiêu đề trong danh sách (blog/archive/search): chuỗi dài không khoảng trắng
   (URL hoặc mã sản phẩm dán vào tiêu đề) không được xô cột — bẻ từ trong thẻ.
   Với nhãn dự án (fixed height + overflow hidden) thì bẻ từ thay vì cắt ngang. */
html.potech-pattern .blog .entry-title,
html.potech-pattern .archive .entry-title,
html.potech-pattern .search .entry-title {
  overflow-wrap: break-word;
}

/* Anh du an khong phai cai nao cung rong bang the (do duoc 349px tren the
   383px), nen dai nhan chay dai hon anh. Cho anh lap day. */
html.potech-pattern a.project-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* O so luong va nut "Them vao bao gia" cach nhau dung 4px — dinh vao nhau.
   Nhip cua bo nhan dien la boi so 4, buoc gan nhat doc duoc la 12px. */
html.potech-pattern .woocommerce div.product form.cart .quantity {
  margin-right: 12px;
}

/* Hai nut noi o goc phai le nhau: #ctaMobileV2 (goi dien) cach phai 40px cao
   60px, con button.ptc-fab (ngan keo bao gia) cach phai 37px cao 56px — lech
   3px theo chieu ngang va khe giua chi 24px. Can le chung mot mep phai va cho
   khe deu 16px. (Mau va hinh dang cua ca cum: muc 10.) */
html.potech-pattern #ctaMobileV2 {
  right: 40px;
  bottom: 92px;
}
html.potech-pattern button.ptc-fab {
  right: 40px;
  bottom: 20px;
}

/* ==========================================================================
   7 · PHÂN TRANG + SIDEBAR
   ========================================================================== */

html.potech-pattern .page-numbers {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-1);
  font-variant-numeric: tabular-nums;
}
/* CHỈ a/span — WooCommerce đặt class `page-numbers` lên cả <ul> bao ngoài,
   selector không phân tử thì rê chuột vào dải phân trang là NGUYÊN ul đổ
   xanh thành một vệt đặc. Hai selector đầu chép nguyên chuỗi dài của
   woocommerce.css (ul li a:hover / span.current) vì bản gốc (0,3,4) thắng
   selector ngắn của pattern — thiếu nó thì chip hover hiện xám #ebe9eb cũ. */
html.potech-pattern .woocommerce nav.woocommerce-pagination ul li a:hover,
html.potech-pattern .woocommerce nav.woocommerce-pagination ul li span.current,
html.potech-pattern a.page-numbers:hover,
html.potech-pattern span.page-numbers.current {
  background: var(--potech-blue);
  color: var(--paper);
}

/* Widget duy nhất đang chạy trong sidebar là danh mục sản phẩm của theme
   (`custom_widget_product_categories`). Tiêu đề nó in ra là `<h3>` thật, không
   phải `.h3` như app.css giả định, và mục đang xem đánh dấu bằng
   `.cpcw-current-tax` chứ không phải `.current-cat` của WordPress. */
/* Tiêu đề widget đã có SẴN nền xanh đặc (`.sidebar .widget h3` trong app.css:
   `background-color:#1f4788; color:#f7f7f7`). Bản đầu tôi đặt `color: blue` lên
   đó — xanh trên xanh, chữ "Danh mục sản phẩm" biến mất hoàn toàn. Trình duyệt
   phát hiện; bảng kiểm ở tầng HTML không thể thấy, vì selector khớp đúng và
   thuộc tính áp đúng, chỉ có kết quả là không đọc được.
   Giữ nền xanh, chữ trắng, thêm gạch đỏ chân theo bộ nhận diện. */
html.potech-pattern .sidebar .widget h3,
html.potech-pattern section.widget > h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--fg-on-blue);
  background-color: var(--potech-blue);
  border-bottom: 2px solid var(--potech-red);
  padding: 12px;
  margin: 0;
  display: block;
}
html.potech-pattern .sidebar .widget ul li a,
html.potech-pattern section.widget ul li a {
  font-size: 14px;
  color: var(--ink-700);
}
html.potech-pattern .sidebar .widget ul li a:hover,
html.potech-pattern section.widget ul li a:hover { color: var(--potech-blue); }
/* Bo cham dau dong: danh sach danh muc la dieu huong, khong phai van xuoi. */
html.potech-pattern section.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bg-rule);
  border-top: 0;
}
html.potech-pattern section.widget ul li { margin: 0; }
html.potech-pattern section.widget ul li + li { border-top: 1px solid var(--bg-rule); }
html.potech-pattern section.widget ul li a { display: block; padding: 9px 12px; }
html.potech-pattern .sidebar .cpcw-current-tax > a,
html.potech-pattern .sidebar .current-cat > a {
  color: var(--potech-red-700);
  font-weight: 600;
}
html.potech-pattern .sidebar .cpcw-back-shop > a {
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ==========================================================================
   8 · NINJA FORMS
   Form báo giá là đường doanh thu chính của site — chỉ đổi hình thức ô nhập,
   không đụng cấu trúc, không đụng .nf-error (thông báo lỗi phải còn nổi bật).
   ========================================================================== */

html.potech-pattern .nf-field-label label {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
html.potech-pattern .ninja-forms-req-symbol { color: var(--potech-red-700); }
html.potech-pattern .nf-field-element input[type="text"],
html.potech-pattern .nf-field-element input[type="email"],
html.potech-pattern .nf-field-element input[type="tel"],
html.potech-pattern .nf-field-element select,
html.potech-pattern .nf-field-element textarea {
  font-family: var(--font-text) !important;
  /* 16px như form RFQ: dưới 16px thì iOS Safari tự phóng trang khi focus. */
  font-size: var(--fs-body) !important;
  color: var(--ink-900) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-1) !important;
  background: var(--paper) !important;
  box-shadow: none !important;
}
html.potech-pattern .nf-field-element input:focus,
html.potech-pattern .nf-field-element select:focus,
html.potech-pattern .nf-field-element textarea:focus {
  border-color: var(--potech-blue) !important;
  box-shadow: var(--shadow-glow-blue) !important;
  outline: none !important;
}
html.potech-pattern .nf-error-msg,
html.potech-pattern .nf-error-required-error { color: var(--potech-red-700); font-size: 12px; }

/* ==========================================================================
   9 · KHỐI LIÊN HỆ + FOOTER
   ========================================================================== */

html.potech-pattern .contact-info {
  background: var(--bg-deep);
  color: var(--paper);
}
html.potech-pattern .contact-info h2 {
  color: var(--paper);
  margin-bottom: var(--space-8);
}
html.potech-pattern .contact-info .headline {
  /* Nền khối này là bg-deep (blue-900): đỏ tươi chỉ 3.33, bậc sáng -300 đạt 6.31. */
  color: var(--potech-red-300);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
html.potech-pattern .contact-info .lets-talk p,
html.potech-pattern .contact-info .lets-talk li {
  color: var(--fg-on-blue-muted);
  font-size: 14px;
}

/* Nhịp dòng của ba cột.

   Đo trước khi sửa (trang chủ, 1531px): nội dung cột 1 = 214px, cột 2 = 237px,
   cột 3 = 361px, còn ô chứa cả ba đều bị kéo lên 377px. Cột 1 thừa 163px và cột 2
   thừa 140px, mà `.contact-info .lets-talk + .lets-talk` lại vẽ `border-left` kéo
   đủ 377px — tức là hai vạch dọc đóng khung đúng chỗ trống. Mắt đọc ra "hai cột
   này thiếu nội dung" chứ không đọc ra "cột ba dài".

   Nguyên nhân là `.contact-info ul li { padding-bottom: 15px }` (0,1,2) của theme:
   mỗi dòng cao 37px cho 21.7px chữ, nhân 9 dòng thành 333px. Danh sách văn bản
   pháp lý vì thế chiếm nhiều diện tích nhất chân trang — trọng số ngược, vì đó là
   mục bắt buộc phải có chứ không phải mục cần nổi.

   Cách sửa: bỏ padding của `li`, dời khoảng cách vào `a`. Vừa thu dòng còn 29.7px,
   vừa biến cả dòng thành vùng bấm — trước đó `a` là inline nên chỉ cao 16px, dưới
   ngưỡng 24px của WCAG 2.5.8. Một thay đổi trả hai việc.

   Sau khi sửa (đã đo): 214 / 237 / 268. Vạch dọc còn 268px thay vì 377px. */
html.potech-pattern .contact-info .lets-talk li {
  padding-bottom: 0;
}
html.potech-pattern .contact-info .lets-talk li a {
  display: block;
  padding: 4px 0;
}

html.potech-pattern .contact-info a { color: var(--paper); }
html.potech-pattern .contact-info a:hover { color: var(--potech-red-300); }
/* Số điện thoại và mã số thuế đọc theo cột — bật tabular figure. */
html.potech-pattern .contact-info a[href^="tel:"],
html.potech-pattern .contact-info a[href^="mailto:"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}

/* Dấu "Đã thông báo" của Bộ Công Thương, cuối cột 1.

   Nền trắng là BẮT BUỘC, không phải trang trí: file PNG họ phát ra có nền trong
   suốt và nét chữ màu xanh (đã đo alpha bốn góc = 127, tức trong suốt hoàn toàn),
   đặt thẳng lên `--potech-blue-900` là xanh trên xanh. Dấu chứng nhận thì không
   được đổi màu nét, nên phải làm sáng chỗ đặt nó.

   `inline-flex` để mảng trắng ôm sát ảnh — `block` sẽ kéo nó rộng cả cột thành
   một băng trắng 320px, to hơn cả tên công ty ngay trên.

   Không đổi màu khi hover (quy tắc `.contact-info a:hover` không có gì để đổi ở
   đây, nhưng ghi rõ để lần sau đừng thêm): đây là con dấu, không phải nút.

   Nhịp ba cột đổi, và đổi theo chiều tốt. Đã đo lại: nội dung ba cột từ
   214 / 237 / 268 thành 284 / 238 / 268. Cột 1 từ ngắn nhất thành dài nhất, tức
   khoảng trống mà hai vạch dọc `border-left` đóng khung giảm từ 85px xuống 62px —
   đúng thứ đoạn chú thích trên đang chữa. Thêm gì nữa vào cột 1 thì phải đo lại. */
html.potech-pattern .contact-info .lets-talk .footer-moct {
  display: inline-flex;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-2);
  background: var(--paper);
  border-radius: var(--radius-1);
}
html.potech-pattern .contact-info .lets-talk .footer-moct img {
  display: block;
  width: auto;
  height: 30px;
}

html.potech-pattern footer.content-info {
  background: var(--potech-blue-900);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.potech-pattern footer.content-info .copyright p {
  color: var(--ink-300);
  font-size: 12px;
  letter-spacing: 0.04em;
}
html.potech-pattern footer.content-info a { color: var(--paper); }
html.potech-pattern footer.content-info a:hover { color: var(--potech-red-300); }

/* ==========================================================================
   10 · CỤM NÚT NỔI (gọi điện + giỏ báo giá) và modal gọi điện
   Hành vi đóng/mở do JS của theme và plugin lo — ở đây chỉ hình và màu.

   Trước: hai nút do hai nguồn khác nhau sinh ra (theme và plugin
   potech-checkout) nên lệch nhau MỌI thuộc tính — 60px vs 56px, đỏ tươi vs
   trắng, viền trắng 2.7px vs không viền, bóng 1px vs 12px, icon FontAwesome
   36px vs ảnh SVG màu 30px. Nhìn ra hai vật thể lạc nhau, và ô giỏ hàng nền
   trắng thì lép hẳn so với đĩa đỏ bên trên.

   Sau: MỘT cặp — cùng 56px, cùng bóng, cùng nền xanh thương hiệu, icon trắng.
   Chức năng phân biệt bằng ICON chứ không bằng màu, đúng việc của icon.

   Vì sao bỏ đỏ ở nút gọi: đỏ tươi là dấu nhấn, mà dấu nhấn chỉ có nghĩa khi
   mỗi màn hình có MỘT. Đang có ba chỗ đỏ cùng lúc — nút CTA "Thiết kế chiếu
   sáng miễn phí" trên header (đích chuyển đổi thật), đĩa gọi điện, và badge
   đếm. Đĩa đỏ 60px ghim cứng mọi khung nhìn của mọi trang là thứ to tiếng
   nhất site, át cả CTA header. Chuyển cụm nổi sang xanh thương hiệu thì đỏ
   trong lớp này còn đúng một việc: badge đếm — cảnh báo thật sự duy nhất.
   ========================================================================== */

html.potech-pattern #ctaMobileV2,
html.potech-pattern .ctaMobileV2Wrap,
html.potech-pattern button.ptc-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
html.potech-pattern .ctaMobileV2Wrap,
html.potech-pattern button.ptc-fab {
  display: grid;
  place-items: center;
  /* Bóng nổi phải có ĐỘ DỜI + nhòe mềm mới ra chiều sâu; bóng 0 1px 3px cũ
     mảnh tới mức nút như dán bẹt vào trang. */
  box-shadow: var(--shadow-4);
  background: var(--potech-blue);
  /* viền trắng 2.7px cũ là để tách đỏ khỏi ảnh nền — nền xanh đặc đã đủ tách */
  border: 0;
  transition: background-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .ctaMobileV2Wrap:hover,
html.potech-pattern button.ptc-fab:hover {
  background: var(--potech-blue-700);
}

/* Icon: vẽ lại CẢ HAI thành một bộ — nét 2px, bo tròn đầu nét, khổ 26px.
   Trước đó là hai thứ chẳng liên quan: glyph đặc của FontAwesome, và
   `box.svg` — một hình MINH HOẠ 10 màu (cặp tài liệu cam, kẹp xanh than,
   dấu tick xanh lá) chứ không phải icon.

   Đã thử `filter: brightness(0) invert(1)` cho nhanh: hỏng. File có sẵn
   #FFFFFF và #F8F8FF làm mặt giấy và chi tiết trong, dập phẳng thì cả 10 màu
   gộp thành một khối trắng — mất hết hình, còn lại vệt trắng.

   Markup do plugin sinh nên không sửa được, nhưng `content: url()` thay được
   nội dung của phần tử thay thế (img) và của ::before — nên bộ icon nằm gọn
   trong lớp thiết kế, không đụng plugin. Nét vẽ theo Lucide. */
html.potech-pattern .ctaMobileV2Wrap .fa-phone::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  display: block;
  width: 26px;
  height: 26px;
}
/* Giỏ báo giá: bảng kẹp có dòng — nói đúng việc nó làm (danh sách hàng chờ
   báo giá), thay hình minh hoạ thùng carton. */
html.potech-pattern button.ptc-fab .ptc-fab__icon {
  width: 26px;
  height: 26px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
}

/* Badge đếm: đỏ TOKEN thay #E01E26 lạc bảng màu. Đây là chỗ duy nhất trong
   cụm còn đỏ — và đúng vai: con số cần báo động.
   -700 chứ KHÔNG phải đỏ tươi: badge có CHỮ (con số) nên theo Red Ink Rule
   phải dùng bậc đỏ dành cho chữ. Đo lại: trắng trên #ED1C24 = 4.38 (trượt AA
   4.5 cho chữ nhỏ), trên #C8141B = 5.88. Cũng trùng đỏ của CTA header. */
html.potech-pattern button.ptc-fab .ptc-fab__count {
  background: var(--potech-red-700);
  color: var(--paper);
  font-family: var(--font-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--paper);
}
html.potech-pattern .ctaMobileModal .contactHeadline {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--potech-red-700);
}
html.potech-pattern .ctaMobileModal .ctaButton {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  border-radius: var(--radius-1);
}
html.potech-pattern .ctaMobileHeadline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

/* ==========================================================================
   11 · KHẢ NĂNG TIẾP CẬN — vòng focus trên nền tối + giảm chuyển động
   pattern.css đã khôi phục vòng focus xanh cho cả site (bundle cũ có
   `a:focus { outline: none }`). Trên các bề mặt tối của theme cũ thì vòng
   xanh chìm — đổi sang trắng, đúng như .potech-footer bên pattern.css.
   ========================================================================== */

html.potech-pattern .header-carousel a:focus-visible,
html.potech-pattern .contact-info a:focus-visible,
html.potech-pattern footer.content-info a:focus-visible,
html.potech-pattern .numbers a:focus-visible,
html.potech-pattern .featured-project a:focus-visible,
html.potech-pattern .potechTools .potechTools__box:focus-visible,
html.potech-pattern .single-solution a:focus-visible,
html.potech-pattern .single-portfolio article header a:focus-visible,
html.potech-pattern .ctaMobileV2Wrap:focus-visible,
html.potech-pattern button.ptc-fab:focus-visible {
  outline-color: var(--paper);
}

/* Giảm chuyển động cho markup CŨ của theme (bundle không build lại được nên
   chặn từ đây). Nguyên tắc như pattern.css: giữ phản hồi trạng thái, tắt
   chuyển động hình học.
     - .animated (+ bounceInLeft/bounceInUp của header và CTA mobile): phần tử
       vẫn hiện, chỉ mất màn nhào lộn vào.
     - dropdown menu: giữ hiện/ẩn bằng opacity, bỏ cú xoay rotateX(-75deg).
     - .single-solution: bỏ vệt sáng quét chéo và zoom ảnh khi hover.
     - .our-team overlay: hiện ngay thay vì scale 0.5s. */
@media (prefers-reduced-motion: reduce) {
  html.potech-pattern .animated,
  html.potech-pattern .ctaMobileV2.active,
  html.potech-pattern .ctaMobileModal.active {
    animation: none;
  }
  html.potech-pattern .navbar .dropdown-menu.fade-down {
    transform: none;
  }
  html.potech-pattern .navbar .nav-item .dropdown-menu {
    transition-property: opacity, visibility;
    transition-duration: var(--dur-fast);
  }
  html.potech-pattern .single-solution a::before {
    display: none;
  }
  html.potech-pattern .single-solution img {
    transform: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  html.potech-pattern .our-team .members .member figure .overlay {
    transition: none;
  }
}

/* ==========================================================================
   12 · GIỮ TỶ LỆ LOGO BÁO CHÍ (front-page)
   front-page.php khai width/height cho ảnh để chặn CLS. CSS cũ của .partner
   chỉ có `max-height: 70px`, không đặt width — nên thuộc tính width của thẻ
   img thắng và kéo méo logo theo chiều ngang (đo CSSOM: render 3.42:1 trong
   khi tỷ lệ gốc 1.78:1). Trả cả hai chiều về auto để trình duyệt tự tính từ
   tỷ lệ nội tại; max-height giữ nguyên hành vi cũ.
   ========================================================================== */

html.potech-pattern .home .partner img {
  width: auto;
  height: auto;
  max-height: 70px;
}

/* ==========================================================================
   13 · VÙNG CHẠM CHO MARKUP CŨ (pointer: coarse)
   Đo trên trang thật: nav-link 36px, potechTools__box 36px, bullet slider 8px,
   link footer 15px, link contact-info 16px. Control chính lên 44px; link phụ
   dạng danh sách lên ≥31px (WCAG 2.5.8 AA cần 24px) để không phá bố cục chữ.
   ========================================================================== */

@media (pointer: coarse) {
  /* Menu chính: 36 → 44 (12 + 20 nội dung + 12) */
  html.potech-pattern .navbar-nav .nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* 3 nút công cụ dưới header: 36 → 44 (12 + 18 nội dung + 12 + viền 2 —
     áp thử inline trên trang thật: 11px chỉ ra 42) */
  html.potech-pattern .potechTools .potechTools__box {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* Bullet slider dự án: chấm 8px cũng là vùng chạm 8px. Giữ chấm nhỏ (10px
     nhìn thấy), nới hộp chạm lên 24px bằng padding + background-clip —
     box-sizing: border-box toàn cục nên width đã gồm padding. Không lên 44
     vì bullet đè lên slide sẽ nuốt cử chỉ swipe (swipe là đường điều hướng
     chính, bullet chỉ là phụ). */
  html.potech-pattern .swiper-pagination-clickable .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    padding: 7px;
    background-clip: content-box;
  }
  /* Link footer + thanh liên hệ: 15-16 → ~38.
     `display: block` chứ không `inline-block`: mục 9 đã cho link trong .lets-talk
     thành block để cả dòng là vùng bấm, inline-block ở đây sẽ thu vùng bấm lại
     đúng bề ngang chữ — ngược hướng với chính việc mà quy tắc này đang làm. */
  html.potech-pattern footer.content-info li a,
  html.potech-pattern .contact-info a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ==========================================================================
   14 · QUÉT VÀNG CÒN SÓT (#fbbf09 — accent của nhận diện cũ)
   Ba chỗ cuối cùng CSS cũ còn sơn vàng mà chưa lớp nào đè:
     - .cta nền vàng: hero trang chủ và hero dự án đã có công thức riêng;
       rule này phủ nốt template-why-us, quy-trinh-lam-viec và mọi chỗ dùng
       .cta sau này. Cùng công thức nút chính: đỏ -700, chữ trắng (5.88:1).
     - Gạch dưới tiêu đề trang Videos (aiovg): đổi màu như đã làm với
       "Sản phẩm tương tự" (mục 5), giữ nguyên kích thước.
     - Menu dọc trang dịch vụ: mục đang xem nền xanh viền vàng → viền đỏ.
   ========================================================================== */

html.potech-pattern .cta {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  border-radius: var(--radius-1);
  border: 1px solid var(--potech-red-700);
  background-color: var(--potech-red-700);
  color: var(--paper);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .cta:hover {
  background-color: var(--potech-red-800);
  border-color: var(--potech-red-800);
}

html.potech-pattern .aiovg_videos header.px-sm-3.pb-4 h1.entry-title::after,
html.potech-pattern .aiovg_videos header.px-sm-3.pb-4 .entry-title.h1::after {
  border-bottom-color: var(--potech-red);
}

html.potech-pattern .page-template-template-dich-vu .widget_nav_menu ul li.current_page_item a {
  border-color: var(--potech-red);
}

/* ==========================================================================
   15 · BÀI VIẾT ĐƠN (Read) — redesign cột đọc
   Bố cục cũ là thẻ trắng 810px đổ bóng, nổi trên nền F7F9FC của Customizer;
   khi nền body về trắng (fix va chạm --bg) thẻ thành vô hình, còn bên trong
   mỗi phần một bề ngang: bar danh mục 812 / ảnh 810 / h1 754 / chữ 651 căn
   trái → trang lệch hẳn một bên. Giờ: MỘT cột đọc 72ch căn giữa cho tất cả
   (tiêu đề, byline, ảnh, thân bài, chia sẻ) — template content-single.php
   đã đổi trật tự và markup cùng lượt.
   ========================================================================== */

/* Thẻ cũ: .single-post .wrap .container{max-width:810px;background:#fff;
   box-shadow:0 1px 3px;margin:4em auto}. CẨN THẬN: .wrap chứa cả container
   breadcrumb — rule cũ (và bản vá đầu) bóp luôn nó. Gỡ thẻ cho MỌI container
   trong wrap, nhưng bề ngang cột đọc chỉ ghim trên .potech-article (72ch tính
   theo font 16px của nó; container Bootstrap đệm 12px mỗi bên). */
html.potech-pattern .single-post .wrap .container {
  max-width: 1220px;
  background-color: transparent;
  box-shadow: none;
  margin: 0 auto;
}
/* Trang Read dùng cỡ chữ đọc 18px (to hơn 16px nền của site) — 72ch tính
   theo 18px ≈ 732px, cột rộng thoải mái mà số ký tự mỗi dòng vẫn trong
   chuẩn 65–75ch. ch của max-width tính theo font-size khai ngay tại đây. */
html.potech-pattern .single-post .wrap .container.potech-article {
  font-size: 18px;
  max-width: calc(72ch + 24px);
  margin: 16px auto 0;
}

/* header cũ: .single-post article.post>header{padding:30px 0 20px} */
html.potech-pattern .single-post article.post > header {
  padding: 32px 0 0;
}
html.potech-pattern .single-post article.post h1 {
  text-wrap: balance;
  margin-bottom: 12px;
}

/* Byline thay .metadata (13px nghiêng xám nhạt) + thanh .post-cats (bar xanh
   #1769B2 chữ trắng 11px chạy hết bề ngang, đứng lạc giữa ảnh và thân bài).
   Ngày giờ số dạng bảng để không nhảy bề ngang; danh mục là link xanh 600. */
html.potech-pattern .single-post .entry-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  margin-bottom: 28px;
}
html.potech-pattern .single-post .entry-byline time {
  font-variant-numeric: tabular-nums;
}
html.potech-pattern .single-post .entry-byline__cats a {
  color: var(--potech-blue);
  font-weight: 600;
}

/* Ảnh đại diện: bỏ margin âm -13/-15px (khớp mép thẻ cũ) + viền #ebebeb của
   overrides; về viền mảnh token và bo góc hệ. */
html.potech-pattern .single-post article.post .featured-image {
  margin: 0 0 32px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-1);
  overflow: hidden;
}
html.potech-pattern .single-post article.post .featured-image img {
  display: block;
}

/* Heading thân bài — overrides cũ sơn preset WP: h2 cyan #0693E3 (3.3:1),
   h3 CAM #FF6900 (2.78:1, trượt cả chuẩn chữ lớn). Về màu hệ như trang dự án.
   Nhịp dọc: trên heading thoáng hơn dưới (1.8em / .6em). */
html.potech-pattern .single-post article.post .entry-content h2 {
  color: var(--potech-blue);
}
html.potech-pattern .single-post article.post .entry-content h3 {
  color: var(--potech-red-700);
}
html.potech-pattern .single-post article.post .entry-content h2,
html.potech-pattern .single-post article.post .entry-content h3 {
  margin: 1.8em 0 0.6em;
}

/* Thân bài: overrides khoá 15px → 18px cỡ đọc, dãn dòng 1.7 cho khối chữ
   dài. Bề rộng đã do container ghim, không max-width ở đây nữa (bản trước
   cap 72ch căn trái trong thẻ 786px → lệch phải 135px). */
html.potech-pattern .single-post article.post .entry-content {
  font-size: 18px;
  line-height: 1.7;
}

/* Mục lục (nav.potech-toc — markup plugin sinh, kèm style="background:#e9ecef"
   inline nên background phải !important). */
html.potech-pattern .single-post .potech-toc {
  background: var(--ink-050) !important;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-1);
  padding: 20px 24px;
  margin: 32px 0 40px;
  /* khối phụ trợ, không phồng theo cỡ chữ đọc 18px của cột */
  font-size: var(--fs-body);
}
html.potech-pattern .single-post .potech-toc__title {
  font-weight: 600;
  color: var(--ink-900);
}
html.potech-pattern .single-post .potech-toc__toggle {
  color: var(--potech-blue);
}
html.potech-pattern .single-post .potech-toc li {
  margin-bottom: 6px;
}

/* Bảng dữ liệu (tra cấp IP…): mặc định wp-block-table trần. Chữ 14px số dạng
   bảng, kẻ mảnh ink-200, đầu bảng nền xanh nhạt. Figure cuộn ngang khi hẹp. */
html.potech-pattern .single-post .entry-content .wp-block-table {
  overflow-x: auto;
  margin: 24px 0;
}
html.potech-pattern .single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
html.potech-pattern .single-post .entry-content table th,
html.potech-pattern .single-post .entry-content table td {
  border: 1px solid var(--ink-200);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
html.potech-pattern .single-post .entry-content table th {
  background: var(--potech-blue-050);
  color: var(--ink-900);
  font-weight: 600;
}

/* Chú thích ảnh trong bài */
html.potech-pattern .single-post .entry-content figcaption {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  text-align: center;
  margin-top: 8px;
}

/* Chia sẻ — thay .share-buttons cũ (icon FA tô màu từng mạng bằng inline
   style, khối 70×32 dồn phải, nằm trong entry-content sau một <hr>). Giờ là
   footer riêng: nhãn trái, 4 nút vuông 40px viền mảnh, một màu xanh hệ. */
html.potech-pattern .single-post .entry-share {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 48px 0 72px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-200);
}
html.potech-pattern .single-post .entry-share__label {
  margin: 0 auto 0 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-900);
}
html.potech-pattern .single-post .entry-share a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-1);
  color: var(--potech-blue);
  font-size: 18px;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
html.potech-pattern .single-post .entry-share a:hover {
  background-color: var(--potech-blue);
  border-color: var(--potech-blue);
  color: var(--paper);
}

/* Media phá khổ: ảnh đại diện + bảng dữ liệu vươn rộng hơn cột chữ (kỹ thuật
   editorial hai bề ngang) — trang thoáng mà measure cột đọc không đổi.
   PHẢI đứng CUỐI mục này: rule margin/overflow của bảng ở trên cùng độ đặc
   hiệu, đứng sau sẽ đè margin âm. max-width:none vì figure bị max-width
   100% kẹp lại (max-width luôn thắng width). */
@media (min-width: 960px) {
  html.potech-pattern .single-post article.post .featured-image,
  html.potech-pattern .single-post .entry-content .wp-block-table {
    width: 880px;
    max-width: none;
    margin-left: calc((100% - 880px) / 2);
    margin-right: calc((100% - 880px) / 2);
  }
  /* giữ khoảng thở dọc của bảng (margin-left/right ở trên đã ăn shorthand) */
  html.potech-pattern .single-post .entry-content .wp-block-table {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  html.potech-pattern .single-post article.post .featured-image {
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   16 · FORM NINJA TRÊN PANEL XANH SÁNG (trang thiết kế miễn phí, .formDKTK)
   Panel cũ nền #5293FD sáng lưng chừng: nhãn ink-600 của pattern chỉ 2.0:1,
   trắng cũng chỉ 3.0:1 — mực đậm nhất là lựa chọn duy nhất đạt AA (5.6:1).
   Nút gửi cũ xanh bootstrap #428BCA chữ trắng 3.6:1, cao 33px — về công thức
   nút chính của hệ (đỏ -700, 5.88:1) và đủ 44px cho ngón tay.
   ========================================================================== */

html.potech-pattern .potech-form .nf-field-label label {
  color: var(--ink-900);
}
html.potech-pattern .potech-form input[type="submit"],
html.potech-pattern .potech-form .nf-field-element input[type="button"] {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  border-radius: var(--radius-1);
  border: 1px solid var(--potech-red-700);
  /* !important: rule gốc `.field-wrap input[type=submit]` trong app.css cũng
     đặt background-color !important. */
  background-color: var(--potech-red-700) !important;
  color: var(--paper);
  min-height: 44px;
  padding: 10px 24px;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .potech-form input[type="submit"]:hover,
html.potech-pattern .potech-form .nf-field-element input[type="button"]:hover {
  background-color: var(--potech-red-800) !important;
  border-color: var(--potech-red-800);
}

/* ==========================================================================
   17 · NGĂN KÉO BÁO GIÁ (plugin potech-checkout, .ptc-*)

   LỖI DO LỚP NÀY GÂY RA. Nút "Gửi yêu cầu báo giá" là thẻ <a>, plugin khai
   `.ptc-btn--primary { background: var(--ptc-accent); color: #fff }` ở độ đặc
   hiệu (0,1,0) — thua `html.potech-pattern a { color: var(--link) }` của
   pattern.css (0,1,2). Chữ trắng bị thay bằng xanh #1F4889 nằm trên nền navy
   #1B254F: tương phản 1.65:1, tức là không đọc được. Rule `:hover` của plugin
   lại là (0,2,0) nên rê chuột vào chữ MỚI hiện — dấu hiệu kinh điển.
   Cùng loại lỗi mà `a.btn:hover` ở pattern.css đã phải vá.

   Nhân tiện đưa nút về đúng hệ: #1B254F không thuộc bảng màu (navy của hệ là
   --potech-blue / blue-900), mà đây là hành động chính của một bề mặt tác vụ
   — dùng công thức CTA chính như header và hero dự án. Nút nổi ngoài trang là
   affordance mở ngăn kéo (xanh), nút này là hành động chốt (đỏ): khác việc,
   khác trọng lượng. Trắng trên red-700 = 5.88:1.
   ========================================================================== */

html.potech-pattern a.ptc-btn--primary {
  background: var(--potech-red-700);
  color: var(--paper);
  letter-spacing: var(--tracking-label);
  min-height: 44px;
  transition: background-color var(--dur-base) var(--ease-out);
}
html.potech-pattern a.ptc-btn--primary:hover {
  background: var(--potech-red-800);
  color: var(--paper);
}
/* Nút là <a> nên gạch chân của `a:hover` (pattern.css) phải tắt — y như
   `a.btn:hover` đã làm cho nút Bootstrap. */
html.potech-pattern a.ptc-btn:hover {
  text-decoration-line: none;
}

/* Nút phụ cùng ngăn kéo: xám #f9fafb/#374151 ngoài bảng màu → về token. */
html.potech-pattern a.ptc-btn--ghost {
  background: var(--ink-050);
  border-color: var(--ink-200);
  color: var(--ink-700);
}
html.potech-pattern a.ptc-btn--ghost:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

/* Nút "×" xoá từng dòng: #9CA3AF trên trắng = 2.54:1, quá nhạt cho một điều
   khiển (chuẩn 4.5). --ink-500 = 6.12. Hover sang đỏ chữ để báo đây là hành
   động phá huỷ. Ô bấm 24px cũng quá nhỏ — nới 32px, và 44px cho màn cảm ứng
   như các điều khiển khác của hệ. */
html.potech-pattern .ptc-cart__remove {
  color: var(--ink-500);
  width: 32px;
  height: 32px;
  transition: color var(--dur-fast) var(--ease-out);
}
html.potech-pattern .ptc-cart__remove:hover {
  color: var(--potech-red-700);
}
@media (pointer: coarse) {
  html.potech-pattern .ptc-cart__remove {
    width: 44px;
    height: 44px;
  }
}


/* ==========================================================================
   18 · DẢI SERIE Ở ĐẦU TRANG DANH MỤC SẢN PHẨM (.potech-serie-*)

   Thay khối 9 ảnh tròn do `custom_ux_product_categories_shortcode` đổ ra. Ba lý
   do bỏ hẳn hình cũ chứ không chỉnh sửa:

   1. `border-radius: 50%` (overrides.css) cắt tròn ảnh vuông. Đèn dạng thanh dài
      (PT-TPL, PT-LBG) mất luôn hình dáng — người mua không nhận ra đấy là đèn gì.
   2. Nhãn là tên đầy đủ nên anchor nào cũng mở đầu bằng head term của chính trang
      cha ("Đèn LED nhà xưởng ..."). Chín liên kết gửi đi cùng một tín hiệu, không
      cái nào mang thuộc tính phân biệt.
   3. Sáu cột ở desktop → 9 mục thành hàng 6 + hàng 3 mồ côi, nhãn xuống 2–3 dòng
      cao thấp lệch nhau.

   Bố cục mới là bảng tra: mỗi dòng một serie, cột trái hình thật (contain, không
   cắt), giữa là mã serie + kiểu đèn + dải công suất/quang thông, phải là số sản
   phẩm. Đây là bề mặt tác vụ (chọn serie) nên đọc quét theo cột dọc thắng biểu
   cảm — số liệu phải thẳng hàng để so được.

   Đường kẻ giữa các ô làm bằng `gap` trên nền --ink-200 chứ không phải border
   từng ô: border kề nhau cộng đôi thành 2px và hở góc, đúng lỗi đã gặp ở dải
   "Dự án tiêu biểu" ngoài trang chủ (mục 3).
   ========================================================================== */

html.potech-pattern .potech-serie-bridge {
  margin: 0 0 var(--space-8);
}

/* h2 của khối và h2 "Danh sách sản phẩm" dùng chung một công thức: cùng cấp
   trong outline thì phải cùng một hình. */
html.potech-pattern .potech-serie-bridge__h,
html.potech-pattern .potech-products-heading {
  font-family: var(--font-display);
  /* 600 chu khong phai 700. Barlow Condensed tai ve chi co 500/600/700/800
     (inc/pattern.php:86, khong co 400), va dem duoc tren trang danh muc: 40/47
     phan tu display o w700, 6 o w600, 1 o w800 — tang display thuc dung chi co
     MOT trong luong. Phan cap khi do chay bang CO chu khong co tuong phan net,
     nen moi tieu de "het" bang nhau.
     Do bang chuoi thu 100px: Condensed 600 = 719px, 700 = 728px — hep hon dung
     1,2%, tuc ha xuong 600 gan nhu khong doi cho ma net nhe han. */
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ink-200);
}
html.potech-pattern .potech-products-heading {
  margin-top: var(--space-8);
}

/* `auto-fill` chứ KHÔNG phải media query đếm cột: media query đo viewport, mà
   khối này nằm trong cột nội dung bị sidebar 270px ăn mất — ở màn 1568px cột
   thật chỉ ~810px. Bản đầu khai 3 cột từ 1400px nên mỗi thẻ còn 260px, mã serie
   và cả nhãn "Công suất" đều gãy dòng. `minmax(320px, 1fr)` để lưới tự đo theo
   chiều rộng thật của chính nó, đúng dù có sidebar hay không. */
html.potech-pattern .potech-serie-bridge__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  /* Đường kẻ vẽ bằng `outline` của TỪNG ô, không phải nền lộ qua khe: số serie
     hiếm khi chia hết cho số cột (9 mục / 2 cột) nên ô cuối hàng bỏ trống, và
     nền-qua-khe biến ô trống đó thành một mảng xám đặc. `outline` nằm ngoài hộp
     nên không cộng vào layout, hai ô kề nhau vẽ đè lên đúng 1px khe → vẫn là một
     nét mảnh chứ không dày đôi như dùng `border`. padding 1px chừa chỗ cho nét
     ngoài cùng. */
  background: var(--paper);
  list-style: none;
  margin: 0;
  padding: 1px;
}

html.potech-pattern .potech-serie-bridge__item {
  margin: 0;
  padding: 0;
  display: flex;
  outline: 1px solid var(--ink-200);
}
/* Bundle cũ gắn `::before` chấm tròn cho li trong nội dung — chặn tại đây. */
html.potech-pattern .potech-serie-bridge__item::before {
  content: none;
}

/* Thẻ là <a>: phải gỡ màu link và gạch chân của `html.potech-pattern a`
   (pattern.css, (0,1,2)) — selector này (0,2,2) thắng. Cùng loại vá đã làm cho
   a.btn và a.ptc-btn. */
html.potech-pattern a.potech-serie {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  background: var(--paper);
  color: var(--fg);
  border-bottom: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.potech-pattern a.potech-serie:hover {
  background: var(--potech-blue-050);
  color: var(--fg);
  text-decoration-line: none;
}

html.potech-pattern .potech-serie__media {
  width: 64px;
  height: 64px;
  display: block;
  background: var(--paper);
}
/* `contain` chứ không `cover`: đèn thanh dài phải giữ đúng tỉ lệ, đây là thông
   tin nhận dạng chứ không phải ảnh trang trí. */
html.potech-pattern .potech-serie__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

html.potech-pattern .potech-serie__body {
  display: block;
  min-width: 0;
}

html.potech-pattern .potech-serie__code {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--potech-blue);
}
html.potech-pattern a.potech-serie:hover .potech-serie__code {
  color: var(--potech-blue-700);
}

html.potech-pattern .potech-serie__type {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Lưới 2 cột nhãn/giá trị thay vì xếp ngang: mục đích của khối là SO SÁNH, nên
   các con số phải nằm thẳng cột dưới nhau trong cùng một thẻ và giữa các thẻ.
   `display: contents` để cặp k/v của mỗi dòng rơi thẳng vào lưới cha. */
html.potech-pattern .potech-serie__specs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.3;
}
html.potech-pattern .potech-serie__spec {
  display: contents;
}
html.potech-pattern .potech-serie__k {
  color: var(--fg-muted);
  white-space: nowrap;
}
/* tabular-nums để cột số thẳng hàng khi đọc quét xuống. */
html.potech-pattern .potech-serie__v {
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

html.potech-pattern .potech-serie__count {
  align-self: center;
  white-space: nowrap;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  background: var(--ink-050);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  html.potech-pattern a.potech-serie {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--space-3);
  }
  html.potech-pattern .potech-serie__media {
    width: 52px;
    height: 52px;
  }
  /* Số sản phẩm xuống dưới phần chữ thay vì ép cột thứ ba trên màn hẹp. */
  html.potech-pattern .potech-serie__count {
    grid-column: 2;
    justify-self: start;
    margin-top: var(--space-2);
  }
}



/* ==========================================================================
   19 · MEGA MENU "SẢN PHẨM" + TRANG SẢN PHẨM KHÔNG SIDEBAR

   Trang danh mục đã bỏ `<aside class="sidebar">` (xem archive-product.php), nên
   menu chính là đường duy nhất tới 22 danh mục cha. Dropdown cũ là MỘT CỘT DỌC
   22 dòng — cao hơn viewport, mục cuối không với tới.

   Hình mới là menu hai tầng kiểu CellphoneS / Thế Giới Di Động: cột trái liệt kê
   danh mục, rê (hoặc tab) vào một mục thì panel bên phải hiện danh mục con của
   đúng mục đó. Bản trước dàn phẳng 22 mục thành 4 cột, nhãn dài tràn sang cột
   bên cạnh và đè lên chữ ở đó.

   Không viết lại Potech_Nav_Walker. Markup `<li class="dropdown"><ul class="dropdown-menu">`
   là của walker; class `potech-mega` và `<div class="potech-mega__panel">` do
   inc/nav-mega.php gắn thêm qua filter.

   BẪY ĐÃ MẮC, ghi lại để khỏi lặp: Bootstrap khai `.dropdown-item { white-space:
   nowrap }`. Nhãn dài không xuống dòng vì cái đó, KHÔNG phải vì `min-width` của
   flex item — đã mất một lượt sửa nhầm chỗ. Phải khai lại `white-space: normal`.

   Độ đặc hiệu phải thắng chuỗi của theme (app.css):
     .main_nav .nav-primary .dropdown-menu                     = (0,3,0)
     html.potech-pattern .main_nav .nav-primary .dropdown-menu = (0,4,0)  ← thắng
     .main{flex:0 0 calc(100% - 300px)}                        = (0,1,0)
     html.potech-pattern .all-product--khong-sidebar .main     = (0,3,0)  ← thắng
   ========================================================================== */

/* --- A. Cột nội dung tràn hết bề ngang khi không còn sidebar --------------- */

html.potech-pattern .all-product--khong-sidebar .main {
  flex: 0 0 100%;
  max-width: 100%;
}

/* --- B. Khung menu hai tầng ------------------------------------------------ */

@media (min-width: 992px) {
  /* Điểm neo cho panel. Bỏ `position: static` trên <li> thì `left/right: 0` của
     dropdown bám vào chính <li> đó (rộng ~90px). Nhưng gỡ neo khỏi <li> mà không
     đặt neo mới thì nó nhảy lên khối chứa ban đầu = cả viewport. Neo vào <nav>
     để hai mép dropdown thẳng với logo. */
  html.potech-pattern .main_nav .nav-primary {
    position: relative;
  }
  html.potech-pattern .main_nav .nav-primary .navbar-nav > li.potech-mega {
    position: static;
  }

  /* Menu "nhảy" và tắt giữa chừng — hai triệu chứng, một gốc.

     Đo được: panel neo vào <nav> (rule `position: relative` ngay trên), mà <nav>
     cao 97px vì logo và ô tìm kiếm cao hơn hàng menu; hàng menu chỉ cao 42px và
     được `align-items: center` của Bootstrap căn giữa. Nên đáy <nav> thấp hơn
     đáy hàng menu 27px. Theme khai:
       .navbar .nav-item .dropdown-menu        { top: 63.6px; transition: .3s }
       .navbar .nav-item:hover .dropdown-menu  { top: 100% }   ← = đáy <nav>
     `transition: .3s` là `all`, nên rê vào là panel TRƯỢT XUỐNG 33px trong lúc
     hiện ra ("menu bị nhảy"), rồi đứng lại cách chữ 27px. Đưa chuột từ chữ
     xuống panel phải băng qua 27px trống đó; ở giữa khe thì `li:hover` sai và
     menu đóng ("trỏ chuột lưng lửng thì tắt").

     Hai cách sửa, đã dựng thử cả hai trên trang:
     (a) kéo panel lên sát chữ bằng `top: calc(50% + 20px)`. Hết nhảy, hết khe —
         nhưng mép trên panel cắt ngang khối logo, mất đường kẻ "kệ" dưới header.
     (b) giữ `top: 100%` cho CẢ lúc nghỉ lẫn lúc mở — không còn gì để trượt nên
         hết nhảy — rồi bịt khe bằng một cầu nối trong suốt.
     Chọn (b): giữ được bố cục cũ, và cầu nối xử đúng gốc vấn đề là vùng hover
     bị đứt đoạn. */
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu,
  html.potech-pattern .main_nav .nav-primary li.potech-mega:hover > .dropdown-menu,
  html.potech-pattern .main_nav .nav-primary li.potech-mega:focus-within > .dropdown-menu {
    top: 100%;
    /* Theme khai `rotateX(0deg)` lúc hover. Cùng kết quả hình học nhưng vẫn là
       một transform: nó tạo khối chứa mới cho mọi `position: fixed` bên trong và
       bắt trình duyệt dựng thêm một lớp compose. Không cần thì đừng để. */
    transform: none;
  }

  /* Cầu nối: dải trong suốt lấp đúng 28px trống giữa đáy hàng menu và mép trên
     panel (đo được 27,5px — 28 để dư nửa pixel).

     Nó là con của chính panel, mà panel là con của <li> — nên chuột đứng trên
     cầu thì `li:hover` vẫn đúng và menu không đóng. Đặt trên panel chứ không
     phải trên <li>: `::before` của <li> sẽ neo vào <nav> (<li> đang là
     `position: static`) nên không có cách nào biết <li> nằm ở cột nào.

     Không sợ nó cướp hover của mục menu bên cạnh: dải nằm ở 101→129px, trong
     khi mọi thẻ <a> của thanh menu kết thúc ở 95,6px — bên dưới toàn bộ vùng
     bấm. Và lúc menu đóng, panel `visibility: hidden` kéo theo `::before` cũng
     không nhận chuột. */
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
  }

  /* Bàn phím cũng phải mở được. Theme chỉ khai `.nav-item:hover .dropdown-menu`
     nên panel không có đường nào để hiện khi tab tới — mà các rule
     `:focus-within` ở mục C bên dưới lại giả định là nó hiện. Từ lúc ba dòng
     MẢNG không còn là liên kết (xem `potech_mega_muc_mang()` trong nav-mega.php,
     chúng chỉ còn `tabindex="0"`), đây là điều kiện bắt buộc chứ không phải thêm
     cho đẹp: focus vào dòng mảng mà panel không mở thì dòng đó thành vô nghĩa. */
  html.potech-pattern .main_nav .nav-primary li.potech-mega:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }

  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    /* Cả hai tầng cùng nền giấy. Bản trước tô vùng phải bằng `--ink-050` qua một
       gradient chặn ở 320px để phân biệt hai tầng; đo lại thì mảng xám đó chiếm
       hơn 1000px bề ngang ngay dưới header nền xanh đậm, đọc ra là "tối" chứ
       không phải "tầng hai". Việc phân tầng trả về cho đúng một đường kẻ dọc
       (`border-left` ở mục C) — ít mực hơn, ranh giới lại sắc hơn. */
    background: var(--paper);
    box-shadow: var(--shadow-4);
    border-bottom: 3px solid var(--potech-blue);
    /* Cột trái 22 dòng đã cao sẵn; min-height giữ panel phải không bị hụt khi
       danh mục chỉ có 2–3 con. */
    /* Con số này phải bằng chiều cao THẬT của panel cao nhất (Đèn LED, 17 danh
       mục), không phải một số tròn chọn cho đẹp: hụt một pixel là `overflow-y:
       auto` sinh ra thanh cuộn. Đã đo lại hai lần:
         420 → 422 khi Đèn NLMT nhập mảng Đèn LED (17 danh mục, 6 hàng × 3 cột)
         422 → 525 khi mỗi danh mục thành một ô có viền: hàng cao 54→60px và
               khoảng cách hàng 2px→12px (cần chỗ cho viền thở)
         525 → 461 sau khi hạ ô ảnh 44→36px để lấy lại chỗ (xem chú thích ở
               `.potech-mega__sub-anh`)
       470 = 461 + chút dư, vì con số này còn phải đủ cho panel CAO NHẤT chứ
       không riêng panel hiện tại. */
    min-height: 470px;
  }

  /* Cột trái */
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu > li {
    position: static;
    width: 320px;
  }
}

/* Mỗi dòng cột trái: nhãn trái, số phải. Theme khai `.dropdown-menu a
   { padding: .25rem 1.25rem }` ở (0,4,0) nên padding phải khai lại cùng mức. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  /* Xem BẪY ở đầu mục: Bootstrap để nowrap trên .dropdown-item. */
  white-space: normal;
  padding: 8px var(--space-5);
  border-bottom: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li > a:hover,
html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu:not(:has(> li:hover > .potech-mega__panel)) > li:focus-within > a {
  /* Xanh nhạt chứ không xám: trên nền giấy, `--ink-050` (#F6F7FA) chỉ hơn nền
     đúng 3% độ sáng — gần như không thấy dòng nào đang được chọn. Xanh nhạt vừa
     rõ hơn vừa nói được đó là màu thương hiệu. */
  background: var(--potech-blue-050);
}

/* Lúc vừa mở chưa rê vào dòng nào, panel bên phải là của mục ĐẦU (xem mục C).
   Không tô sáng mục đầu thì panel trông như không thuộc dòng nào — hai tầng mất
   liên hệ. Điều kiện phủ định phải khớp đúng điều kiện bật panel mặc định. */
@media (min-width: 992px) {
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu:not(:has(> li:hover > .potech-mega__panel)):not(:has(> li:focus-within > .potech-mega__panel)) > li:first-child > a {
    background: var(--potech-blue-050);
  }
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu:not(:has(> li:hover > .potech-mega__panel)):not(:has(> li:focus-within > .potech-mega__panel)) > li:first-child > a > span:first-child {
    color: var(--potech-blue);
  }
}

/* Theme vẽ gạch chân chạy ngang bằng `a span::before` khi hover, và chèn một icon
   FontAwesome rỗng bằng `a::before`. Trong bảng nhiều dòng cả hai chỉ thêm nhiễu
   — nền đổi màu đã đủ báo trạng thái. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu a span::before,
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu a:hover span::before,
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu a::before {
  content: none;
}

html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li > a > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.35;
  padding: 0;
  color: var(--ink-700);
}
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li > a:hover > span:first-child {
  color: var(--potech-blue);
}

/* --- B2. Mũi tên "đi tiếp", thay chỗ số sản phẩm --------------------------- */

/* Số sản phẩm đã gỡ khỏi menu (xem `potech_mega_muc_mang()` trong nav-mega.php).
   Chỗ nó đứng — mép phải mỗi hàng — là chỗ mắt tìm đến để biết hàng này bấm vào
   có đi tiếp được không, nên thay bằng mũi tên chứ không để trống.

   Vẽ bằng hai đường viền xoay 45° thay vì ký tự "›" hay icon font: ký tự thì mỗi
   font một hình dáng và một đường chân chữ khác nhau, icon font của theme thì nạp
   không đồng bộ nên mũi tên trống trong mấy trăm ms đầu. Hai đường viền thì có
   ngay từ lúc CSS về, và căn giữa được chính xác.

   `--fg-subtle` chứ không `--fg`: mũi tên là dấu chỉ dẫn, không phải nội dung. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a::after,
html.potech-pattern .potech-mega__subs a::after,
html.potech-pattern a.potech-mega__nhom-dau::after,
html.potech-pattern .potech-mega__nhom-list a::after {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--fg-subtle);
  border-right: 1.5px solid var(--fg-subtle);
  transform: rotate(45deg);
  transition: border-color var(--dur-fast) var(--ease-out);
}
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a:hover::after,
html.potech-pattern .potech-mega__subs a:hover::after,
html.potech-pattern a.potech-mega__nhom-dau:hover::after,
html.potech-pattern .potech-mega__nhom-list a:hover::after {
  border-color: var(--potech-blue);
}

/* Ba dòng MẢNG. Cột trái từ 20 dòng xuống 3, nên mỗi dòng gánh được nhiều hơn:
   tên cỡ lớn, một dòng mô tả, và mũi tên đi tiếp. Mô tả nằm ở đây chứ không trong
   panel vì đây mới là chỗ người ta đang chọn — xem chú thích trong nav-mega.php.

   Ba item không dàn được bằng `space-between` của dòng thường, nên chuyển sang
   grid: tên và mũi tên ở hàng 1, mô tả chiếm trọn hàng 2. Không cần thêm thẻ bọc
   nào trong PHP. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px var(--space-3);
  padding: var(--space-4) var(--space-5);
  /* Dòng mảng không còn href (xem `potech_mega_bo_href()`): trên desktop nó chỉ
     là mục để rê, bàn tay trỏ sẽ hứa một cú bấm không có gì xảy ra. Trong ngăn
     kéo thì ngược lại — bấm để lật tầng — nên mục D trả lại `pointer`. */
  cursor: default;
}
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a > span:first-child {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
/* Rule hover chung ở trên là (0,7,4), rule tên ngay trên là (0,7,5) nên đã đè
   mất màu hover. Phải dài hơn đúng một bậc, không phải với `!important`. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a:hover > span:first-child,
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang:focus-within > a > span:first-child {
  color: var(--potech-blue);
}
/* Mũi tên vào ô hàng 1 / cột 2 — đúng ô con số vừa nhường lại. `align-self` vì
   hàng grid này căn theo `baseline`, mà mũi tên là hình vẽ, không có đường chân
   chữ để căn: để mặc thì nó tụt xuống dưới chữ. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a::after {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-top: 4px;
}
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a > span.potech-mega__mang-mota {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Mục cuối "Xem tất cả sản phẩm" là điểm đến khác loại — tách khỏi danh sách. */
html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li:last-child > a > span:first-child {
  font-weight: 700;
  color: var(--potech-blue);
}

/* --- C. Panel bên phải ----------------------------------------------------- */

@media (min-width: 992px) {
  html.potech-pattern .potech-mega__panel {
    display: none;
    position: absolute;
    left: 320px;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: var(--space-6) var(--space-7);
    border-left: 1px solid var(--ink-200);
  }

  /* Mặc định hiện panel của mục đầu để vùng phải không trống lúc vừa mở. */
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu > li:first-child > .potech-mega__panel {
    display: block;
  }

  /* Khi đã có mục đang được trỏ tới, tắt mọi panel KHÁC. `:not(:hover)` để rule
     này không bao giờ khớp chính mục đang rê — nhờ vậy khỏi phải đấu độ đặc hiệu
     với rule bật bên dưới.

     `:has(> li:hover > .potech-mega__panel)` chứ không phải `:has(> li:hover)`:
     dòng cuối "Xem tất cả sản phẩm" KHÔNG có panel, rê vào nó mà vẫn tắt hết thì
     cả vùng phải trắng trơn — đúng cái lỗi panel trống vừa chữa xong. Đòi thêm
     điều kiện "mục đang rê phải có panel" thì dòng đó để nguyên panel mặc định. */
  /* CHUỘT THẮNG FOCUS. Mọi nhánh `:focus-within` dưới đây đều phải mang khiên
     `:not(:has(> li:hover > .potech-mega__panel))`, nếu không hai cơ chế chọn
     panel sẽ tự bắn nhau.

     Đã đo đúng lỗi này: bấm vào dòng "Đèn LED" (dòng mảng có `tabindex="0"` nên
     click là dính focus) rồi rê sang "Năng lượng" —
       nhánh hover  tắt panel của mọi mục KHÔNG được rê   → tắt Đèn LED
       nhánh focus  tắt panel của mọi mục KHÔNG có focus  → tắt Năng lượng
     Hai rule tắt đều đặc hiệu hơn rule bật, nên cả hai panel cùng tắt: vùng phải
     trắng trơn, mà cột trái lại sáng HAI dòng. Có khiên thì lúc chuột đang ở
     trong menu, focus im lặng hoàn toàn — nó chỉ còn việc phục vụ bàn phím. */
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu:has(> li:hover > .potech-mega__panel) > li:not(:hover) > .potech-mega__panel,
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu:not(:has(> li:hover > .potech-mega__panel)):has(> li:focus-within > .potech-mega__panel) > li:not(:focus-within) > .potech-mega__panel {
    display: none;
  }

  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu > li:hover > .potech-mega__panel,
  html.potech-pattern .main_nav .nav-primary li.potech-mega > .dropdown-menu:not(:has(> li:hover > .potech-mega__panel)) > li:focus-within > .potech-mega__panel {
    display: block;
  }
}

html.potech-pattern .potech-mega__panel-dau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  /* Gạch ĐỎ, không phải hairline xám. Đã đo cả panel: trước đổi này trong mega
     không có lấy một điểm đỏ nào — toàn bộ là xanh và xám, nên không có gì neo
     mắt. Đây là chỗ duy nhất trong mega đáng đặt đỏ: một đường ngay dưới tên
     panel, đúng vị trí mà bản tham chiếu đặt (đo được `#c8141b`, chính là
     `--potech-red-700`).
     Dùng red-700 chứ không `--potech-red` (#ED1C24): đỏ tươi cạnh xanh #1F4889
     rung mắt, red-700 trầm hơn nên đứng cạnh xanh mà không tranh. */
  border-bottom: 2px solid var(--potech-red-700);
}
html.potech-pattern .potech-mega__panel-ten {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
html.potech-pattern .potech-mega__panel-so {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Mảng chỉ có một danh mục thì panel hạ xuống hiện danh mục CON (xem
   `potech_mega_panel_mang()`), và danh mục cha mất chỗ đứng. Trả nó lại ở góc
   phải đầu panel, đúng chỗ số danh mục vẫn đứng ở các mảng khác — cùng một vị
   trí, cùng một vai: "đây là toàn cảnh của tầng này".

   Chuỗi selector đủ dài (0,5,2) vì `.main_nav .nav-primary .dropdown-menu a`
   (0,4,0) của theme khai `padding: .25rem 1.25rem` và một `::before` icon rỗng. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a.potech-mega__tatca {
  padding: 0;
  border-bottom: 0;
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--potech-blue);
  white-space: nowrap;
}
html.potech-pattern .main_nav .nav-primary .dropdown-menu a.potech-mega__tatca::before {
  content: none;
}
html.potech-pattern .main_nav .nav-primary .dropdown-menu a.potech-mega__tatca:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Khe thật giữa các ô, cả dọc lẫn ngang. Trước là `2px var(--space-5)`: các hàng
   gần như dính nhau nên 17 danh mục đọc ra thành một khối chữ liền, không phân
   biệt được đâu là hết mục này sang mục kia — đúng chỗ cần khung riêng. */
html.potech-pattern .potech-mega__subs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
html.potech-pattern .potech-mega__subs > li {
  margin: 0;
  padding: 0;
}
html.potech-pattern .potech-mega__subs > li::before {
  content: none;
}

/* Mỗi danh mục là một ô có viền riêng.

   Vì sao viền hairline trên nền giấy chứ không phải ô nền xám: ô ảnh 44px bên
   trong ĐÃ là nền xám (`--ink-050`, để tách đèn vỏ bạc/trắng khỏi nền — xem chú
   thích ở dưới). Tô nền ô ngoài cùng màu nữa là ô ảnh biến mất, mà nó lại là thứ
   nói nhanh nhất "đây là đèn hình gì". Viền tách được ô mà không tiêu tốn màu.

   Chuỗi selector phải mang đủ `.main_nav .nav-primary .dropdown-menu` chứ không
   rút gọn thành `.potech-mega__subs a`. Đã đo: theme khai
     .main_nav .nav-primary .dropdown-menu a { padding: .25rem 1.25rem;
                                               border-bottom: 1px solid … }  = (0,3,1)
   Bản rút gọn của tôi là (0,2,2) — THUA, nên `padding: 7px 10px` không có tác
   dụng (đo được padding thật là 4px/20px của theme) và `border-bottom` vẫn là
   của theme trong khi ba cạnh kia là của tôi: ô viền hở đúng một cạnh dưới.
   Chuỗi dưới đây = (0,5,2), và `border` viết đủ bốn cạnh nên ghi đè luôn cả
   `border-bottom` của theme trong một khai báo. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu .potech-mega__subs a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: normal;
  padding: 6px 10px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-2);
  background: var(--paper);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
html.potech-pattern .main_nav .nav-primary .dropdown-menu .potech-mega__subs a:hover {
  border-color: var(--potech-blue);
  background: var(--potech-blue-050);
}

/* CẢ BỐN rule dưới đây phải mang đủ chuỗi `.main_nav .nav-primary .dropdown-menu a`,
   không được rút gọn thành `.potech-mega__sub-*`. Theme khai:
     .main_nav .nav-primary .dropdown-menu a span
       { line-height:18px; font-size:14px; padding:10px 0 }  = (0,4,1)
   Nó bắt MỌI span trong panel. Bản đầu tôi viết `.potech-mega__sub-ten` (0,1,0),
   thua sạch: chữ bị nhồi 10px trên dưới nên hai dòng cách nhau 39px, và cỡ chữ
   phụ 11px bị kéo về 14px. Chuỗi dưới đây = (0,5,3). */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-anh,
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-chu,
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-ten,
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-kieu {
  padding: 0;
}

/* Ô hình in ra cho MỌI danh mục, kể cả danh mục chưa có icon riêng (icons.php trả
   icon chung) — ô rỗng thì dòng đó thụt vào 36px so với các dòng khác.

   Kích thước 36px giữ nguyên từ thời còn dùng ảnh, vì nó là thứ quyết định chiều
   cao hàng (60 → 50px) và qua đó là `min-height: 470px` của panel. Đổi số này
   phải đo lại panel cao nhất.

   KHÔNG còn nền + viền cho ô. Nền và viền trước đây là để cứu ảnh chụp: đèn vỏ
   bạc/trắng trên nền trắng biến mất ở cỡ 44px (PT-HBL, PT-HBL2, PT-RSH), nên cái
   ô ít nhất cho biết "chỗ này có ảnh". Icon nét thì tự nó đã là ranh giới, thêm ô
   nữa là hai khung lồng nhau — mỗi mục vốn đã có một khung viền của riêng nó. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-anh {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Icon ăn `currentColor`, nên màu đặt ở đây chứ không ở thẻ svg — đổi màu theo
     trạng thái chỉ cần đổi `color`. --ink-400 nhạt hơn chữ một bậc: icon là dấu
     nhận biết, không được tranh tiêu điểm với tên danh mục. */
  color: var(--ink-400);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Chuỗi phải dài hơn rule trên (0,5,3) mới thắng — đây là (0,6,3). */
html.potech-pattern .main_nav .nav-primary .dropdown-menu .potech-mega__subs a:hover span.potech-mega__sub-anh,
html.potech-pattern .main_nav .nav-primary .dropdown-menu .potech-mega__subs a:focus-visible span.potech-mega__sub-anh,
html.potech-pattern .main_nav .nav-primary .dropdown-menu a.potech-mega__nhom-dau:hover span.potech-mega__sub-anh,
html.potech-pattern .main_nav .nav-primary .dropdown-menu a.potech-mega__nhom-dau:focus-visible span.potech-mega__sub-anh {
  color: var(--potech-blue);
}
html.potech-pattern .potech-mega__sub-anh .potech-icon {
  display: block;
  flex: none;
}

/* Tên và kiểu xếp DỌC. Xếp ngang thì trên cột rộng ~250px một nhãn dài như
   "chống thấm công nghiệp" xuống dòng lởm chởm giữa hai span.
   `min-height` bằng đúng chiều cao ô ảnh: nhờ vậy dòng một chữ và dòng hai chữ
   cao bằng nhau, ảnh của mọi mục nằm trên cùng một đường ngang. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-chu {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

/* Tên danh mục ĐỨNG DƯỚI tiêu đề panel một bậc, không ngang hàng.

   Trước: `--ink-900` (#0E1320) weight 600 — trùng đúng màu và gần đúng độ đậm của
   `.potech-mega__panel-ten`. 17 tên danh mục cùng sắc độ với tiêu đề thì không có
   gì nổi lên, cả panel đọc thành một khối đều.

   Đợt hai đẩy xuống `--fg-muted` weight 500 theo bản tham chiếu. Đo lại thì đó là
   lỗi: mục trong dropdown THƯỜNG (Dịch vụ / Kiến thức / Giới thiệu) là
   14px/400/`--ink-700`, mà tên danh mục ở đây CÙNG MỘT TẦNG — đều là "một điểm
   đến trong danh sách". Hai chỗ cùng nghĩa lại lệch một bậc đậm và hai bậc màu,
   còn lệch NGƯỢC CHIỀU nhau: đậm hơn nhưng nhạt hơn. Sức nặng thị giác của mục
   mega đã do icon và khung viền gánh rồi, chữ không cần gánh thêm.

   Nay: 14px/400/`--ink-700`, khớp đúng dropdown thường. Kéo theo một cái lợi mà
   bản cũ tự thú là chưa có — chú thích cũ viết "tên và số đếm cùng màu nhưng lệch
   cỡ và độ đậm nên vẫn tách được". Giờ chúng tách bằng CẢ MÀU.

   Bậc thang trong panel: tiêu đề 19px/700 `--ink-900` › tên 14px/400 `--ink-700`
   › dòng phụ 11px `--fg-muted` › số đếm 11px/600 `--fg-muted`.

   KHÔNG hạ xuống `--ink-300` như số đếm trong ảnh tham chiếu (#babec5, chỉ ~2.3)
   — chỗ đó bản tham chiếu sai chuẩn, không chép.

   Hover đổi sang `--potech-blue` (rule ngay dưới) — đây mới là chỗ đáng để màu. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-ten {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-700);
}
/* Cũng phải mang đủ chuỗi, nếu không thua chính rule màu chữ ngay trên. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a:hover span.potech-mega__sub-ten {
  color: var(--potech-blue);
}
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__sub-kieu {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  line-height: 1.3;
  color: var(--fg-muted);
}

/* --- D. Mobile: ngăn kéo trượt ngang --------------------------------------- */

/* Dưới 992px, hai tầng cạnh nhau của desktop không còn chỗ. Bản trước xổ dọc
   trong luồng và ẩn hẳn panel: nhánh "Sản phẩm" thành 4 dòng dẫn tới đúng một
   trang, còn 23 danh mục biến mất khỏi điều hướng mobile.

   Bản này chuyển sang ngăn kéo kiểu Amazon: trượt ngang từ mép trái, mỗi tầng
   THAY CHỖ tầng cha thay vì nối thêm vào bên dưới. Mỗi màn hình đúng một danh
   sách, nên 23 danh mục có chỗ mà "Dự án"/"Liên hệ" vẫn cách một cú bấm.

   MỌI thứ dưới đây bám vào class `.potech-drawer` do `drawer.js` gắn lúc chạy.
   Không có JS thì không có class, và menu lùi về collapse của Bootstrap nguyên
   vẹn — không có trạng thái nửa vời. */

@media (max-width: 991.98px) {

  /* Khoá cuộn trang nền. Đặt trên <html>: theme đã khai `overflow-x: hidden`
     trên body, thêm `overflow` vào đó là hai khai báo chồng nhau. */
  html.potech-drawer-khoa,
  html.potech-drawer-khoa body {
    overflow: hidden;
  }

  /* Bootstrap khai `.collapse:not(.show) { display: none }` = (0,2,0). Chuỗi
     dưới đây (0,4,1) thắng, nên `.show` không còn vai trò gì — trạng thái mở do
     `.potech-drawer--mo` quyết định. */
  html.potech-pattern .navbar .navbar-collapse.potech-drawer {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    /* Trượt bằng `left`, KHÔNG bằng `transform`: transform trên phần tử này sẽ
       biến nó thành khối chứa của mọi hậu duệ `position: fixed` — kể cả những
       thứ thêm vào sau này. Xem ghi chú 3 ở đầu drawer.js. */
    left: -100%;
    width: min(88vw, 380px);
    max-width: none;
    margin: 0;
    padding: 0;
    /* `!important` DUY NHẤT ở mục này, và đúng chỗ phải dùng: đã đo, sau khi bấm
       hamburger thì Bootstrap vẫn nhét `style="height: 515px"` vào phần tử này —
       listener collapse của nó đăng ký TRƯỚC drawer.js nên
       `stopImmediatePropagation` không chặn kịp. Chiều cao inline đè mọi quy tắc
       thường, ngăn kéo `top: 0; bottom: 0` xẹp còn 515px rồi giật theo hoạt ảnh
       của Bootstrap. Đối thủ là inline style — không có lựa chọn nào yếu hơn. */
    height: auto !important;
    z-index: 1050;
    background: var(--paper);
    box-shadow: var(--shadow-4);
    overflow-y: auto;
    /* Cuộn hết ngăn kéo thì dừng, không đẩy tiếp sang trang nền. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Lúc đóng, ngăn kéo vẫn `display: block` ngoài mép màn hình — trình duyệt
       vẫn dựng bố cục cả cây menu (kể cả mega panel) ở MỖI lần tải trang
       mobile. `content-visibility: hidden` bỏ qua phần đó cho tới khi mở, và
       luôn tiện chặn Tab lọt vào các link không ai nhìn thấy.

       Lúc ĐÓNG giữ `visible` thêm đúng một nhịp trượt (delay, `allow-discrete`),
       không thì ngăn kéo trượt ra là một tấm trắng. Lúc MỞ thì đổi ngay, không
       transition: `mo()` gọi `focus()` liền sau khi gắn class, mà phần tử trong
       cây `content-visibility: hidden` không nhận focus — đã thấy focus rơi về
       <body> khi để transition cả hai chiều.

       Khai `transition` hai lần: trình duyệt chưa hiểu `allow-discrete` bỏ cả
       dòng thứ hai và vẫn giữ nhịp trượt của dòng đầu. */
    content-visibility: hidden;
    transition: left var(--dur-slow) var(--ease-out);
    transition: left var(--dur-slow) var(--ease-out),
                content-visibility 0s linear var(--dur-slow) allow-discrete;
  }
  html.potech-pattern .navbar .navbar-collapse.potech-drawer.potech-drawer--mo {
    left: 0;
    content-visibility: visible;
    transition: left var(--dur-slow) var(--ease-out);
  }

  html.potech-pattern .potech-drawer__phu {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(14, 19, 32, 0.5);
    animation: potech-keo-hien var(--dur-slow) var(--ease-out) both;
  }

  /* ── Thanh đầu ngăn kéo ─────────────────────────────────────────────────── */

  /* `sticky` chứ không `fixed`: nó là con của phần tử đang trượt bằng `left`,
     fixed sẽ neo vào viewport và đứng yên trong khi ngăn kéo chạy. */
  /* `:not([hidden])` là BẮT BUỘC ở đây và ở nút quay lại: `display` khai trong
     rule (0,3,0) đè mất `display: none` của thuộc tính `hidden` (độ đặc hiệu 0
     trong UA stylesheet), nên nút "quay lại" sẽ hiện cả ở tầng gốc. */
  html.potech-pattern .potech-drawer .potech-drawer__dau:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: 0 var(--space-3) 0 var(--space-4);
    background: var(--potech-blue);
  }

  html.potech-pattern .potech-drawer .potech-drawer__nhan {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    color: var(--paper);
    /* Tên danh mục dài ("Đèn LED canopy cây xăng kho lạnh") cắt gọn hơn là xuống
       dòng làm thanh đầu cao gấp đôi rồi đẩy cả danh sách xuống. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.potech-pattern .potech-drawer .potech-drawer__lui:not([hidden]),
  html.potech-pattern .potech-drawer .potech-drawer__dong {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px là ngưỡng vùng chạm nhỏ nhất còn bấm trúng bằng ngón cái. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-2);
    background: none;
    color: var(--paper);
    line-height: 1;
  }
  html.potech-pattern .potech-drawer .potech-drawer__lui {
    margin-left: calc(var(--space-3) * -1);
  }
  /* Chỉ nút đóng cần cỡ chữ — nút quay lại vẽ mũi tên bằng viền, `font-size` ở
     đó không có tác dụng gì. */
  html.potech-pattern .potech-drawer .potech-drawer__dong {
    font-size: var(--fs-h3);
  }
  html.potech-pattern .potech-drawer .potech-drawer__lui:active,
  html.potech-pattern .potech-drawer .potech-drawer__dong:active {
    background: rgba(255, 255, 255, 0.16);
  }

  /* Mũi tên vẽ bằng viền chứ không bằng icon font: FontAwesome của theme nạp
     không đồng bộ, nút quay lại mà trống trong 200ms đầu là nút không bấm được.
     Ở đây không có gì để tải. */
  html.potech-pattern .potech-drawer .potech-drawer__lui-icon {
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 3px;
  }
  html.potech-pattern .potech-drawer .potech-drawer__lui-chu {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── Hàng trong ngăn kéo ────────────────────────────────────────────────── */

  html.potech-pattern .potech-drawer .navbar-nav {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Chuỗi mang đủ `.main_nav .nav-primary` như quy tắc gốc của theme, cộng
     `.potech-drawer` — hơn đúng một class. */
  html.potech-pattern .main_nav .nav-primary .potech-drawer .navbar-nav > li > a,
  html.potech-pattern .main_nav .nav-primary .potech-drawer .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Xem BẪY ở đầu mục 19: Bootstrap để nowrap trên .dropdown-item. */
    white-space: normal;
    min-height: 48px;
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--ink-100);
    border-radius: 0;
  }
  html.potech-pattern .main_nav .nav-primary .potech-drawer .navbar-nav > li > a:active,
  html.potech-pattern .main_nav .nav-primary .potech-drawer .dropdown-menu > li > a:active {
    background: var(--potech-blue-050);
  }

  /* Dấu › cho hàng có tầng con. Bám vào `:has` chứ không vào một class do JS
     gắn: cấu trúc DOM tự nó đã nói hàng nào đi tiếp được, không cần đồng bộ
     thêm một nguồn sự thật thứ hai. */
  html.potech-pattern .main_nav .nav-primary .potech-drawer li:has(> .dropdown-menu) > a::after,
  html.potech-pattern .main_nav .nav-primary .potech-drawer li:has(> .potech-mega__panel) > a::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--fg-subtle);
    border-right: 2px solid var(--fg-subtle);
    transform: rotate(45deg);
  }

  /* ── Chuyển tầng ────────────────────────────────────────────────────────── */

  /* Vào tầng con: mọi mục anh em biến mất, chỉ còn nhánh đang mở. */
  html.potech-pattern .potech-drawer:not([data-potech-cap="0"]) > .navbar-nav > li:not(.potech-drawer__mo),
  html.potech-pattern .potech-drawer[data-potech-cap="2"] .potech-drawer__mo > .dropdown-menu > li:not(.potech-drawer__mo) {
    display: none;
  }

  /* Hàng <a> của chính mục đang mở cũng ẩn — tên nó đã nằm ở thanh đầu, để lại
     là đọc hai lần cùng một chữ cách nhau 8px.

     HAI selector chứ không một, và mỗi cái phải dài hơn ĐÚNG đối thủ của nó.
     Bản đầu viết gọn `.potech-drawer .potech-drawer__mo > a` = (0,5,2) và thua
     chính quy tắc kẻ hàng ở trên, `.potech-drawer .navbar-nav > li > a` =
     (0,5,3): hàng cha không bao giờ bị ẩn, nên "SẢN PHẨM" vẫn nằm ngay trên ba
     mảng con — trông y như submenu bung tại chỗ. Đây mới là lỗi thật, không
     phải JS.
       hàng gốc  (0,6,3) > (0,5,3) quy tắc kẻ hàng
       hàng mảng (0,8,4) > (0,7,4) quy tắc flex ngay dưới */
  html.potech-pattern .main_nav .nav-primary .potech-drawer .navbar-nav > li.potech-drawer__mo > a,
  html.potech-pattern .main_nav .nav-primary .potech-drawer li.potech-mega .dropdown-menu > li.potech-mega__mang.potech-drawer__mo > a {
    display: none;
  }

  /* Trong ngăn kéo, tầng nào hiện là do `.potech-drawer__mo` quyết định — KHÔNG
     phải `.show` của Bootstrap.

     Đây là chỗ chữa lỗi "submenu bung tại chỗ": đã đo, nút hamburger còn một
     listener đăng ký trước drawer.js (xem `height: auto !important` ở trên), và
     nó cũng bắt luôn `.dropdown-toggle`. Nó gắn `.show` lên `<ul>`, mà
     `.dropdown-menu.show { display: block }` của Bootstrap là (0,2,0) — quy tắc
     ẩn của tôi lúc đầu không có, nên danh sách con bung ra NGAY DƯỚI hàng cha
     trong khi tầng thật cũng đang mở. Người dùng thấy hai tầng chồng nhau và
     phải bấm quay lại nhiều lần.

     Ẩn ở (0,3,0) là thắng `.show`, bất kể script kia làm gì. */
  html.potech-pattern .potech-drawer .navbar-nav .dropdown-menu,
  html.potech-pattern .potech-drawer .navbar-nav .potech-mega__panel {
    display: none;
  }
  html.potech-pattern .potech-drawer .navbar-nav .potech-drawer__mo > .dropdown-menu,
  html.potech-pattern .potech-drawer .navbar-nav .potech-drawer__mo > .potech-mega__panel {
    display: block;
  }

  html.potech-pattern .potech-drawer .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  /* Panel: bỏ mọi định vị và khung của desktop, trả về một khối thường. Các quy
     tắc desktop nằm trong `@media (min-width: 992px)` nên không cần gỡ, trừ
     phần padding/viền khai ngoài media query. */
  html.potech-pattern .potech-mega__panel {
    display: none;
  }
  html.potech-pattern .potech-drawer .potech-mega__panel {
    padding: 0;
    border-left: 0;
  }

  /* Tên mảng trong panel trùng với thanh đầu — bỏ, chỉ giữ liên kết "Xem tất cả"
     và số danh mục. */
  html.potech-pattern .potech-drawer .potech-mega__panel-ten {
    display: none;
  }
  html.potech-pattern .potech-drawer .potech-mega__panel-dau {
    padding: var(--space-3) var(--space-4);
    margin: 0;
    border-bottom: 1px solid var(--ink-100);
  }

  html.potech-pattern .potech-drawer .potech-mega__subs {
    display: block;
  }
  /* Desktop khai `border` đủ bốn cạnh để mỗi danh mục thành một ô riêng. Trong
     ngăn kéo thì mỗi mục đã chiếm trọn bề ngang, ô viền chồng lên nhau thành
     lưới hai đường — nên trả về đúng một đường kẻ chia hàng. Phải `border: 0`
     TRƯỚC: chỉ khai `border-bottom` thì ba cạnh kia của desktop vẫn còn.

     Chuỗi dài (0,6,2) vì rule desktop đã phải lên (0,5,2) để thắng theme —
     media query KHÔNG cộng độ đặc hiệu, nên bản ngắn (0,3,2) sẽ thua chính rule
     desktop của tôi. `.potech-drawer` đứng TRƯỚC `.dropdown-menu`: nó là
     #bs4navbar, tức là thẻ BỌC menu chứ không nằm trong dropdown. */
  html.potech-pattern .main_nav .nav-primary .potech-drawer .dropdown-menu .potech-mega__subs a {
    min-height: 48px;
    padding: 8px var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--ink-100);
    border-radius: 0;
  }

  html.potech-pattern .potech-drawer .potech-mega__nhoms {
    display: block;
  }
  html.potech-pattern .potech-drawer .potech-mega__nhom {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  /* Dòng mô tả của mảng chỉ có nghĩa ở cột trái desktop, nơi ba mảng đứng cạnh
     nhau để so. Trong ngăn kéo nó làm hàng cao gấp đôi mà không giúp chọn. */
  html.potech-pattern .main_nav .nav-primary li.potech-mega .dropdown-menu > li.potech-mega__mang > a > span.potech-mega__mang-mota {
    display: none;
  }

  /* Hàng mảng khai `display: grid` (bố cục hai hàng của cột trái desktop: tên +
     số ở trên, mô tả ở dưới). Quy tắc đó nằm NGOÀI media query nên còn hiệu lực
     trong ngăn kéo — và mũi tên `::after` thành một ô lưới nữa, bị tự động xếp
     xuống hàng hai, nằm lệch dưới con số. Ở đây mô tả đã ẩn, chỉ còn tên + số +
     mũi tên: một hàng flex là đủ và mũi tên về đúng giữa.

     Chuỗi mang cả `li.potech-mega` để hơn quy tắc grid (0,6,2) đúng một class,
     không phải hoà rồi thắng nhờ thứ tự. */
  html.potech-pattern .main_nav .nav-primary .potech-drawer li.potech-mega .dropdown-menu > li.potech-mega__mang > a {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-4);
  }
  html.potech-pattern .main_nav .nav-primary .potech-drawer li.potech-mega .dropdown-menu > li.potech-mega__mang > a > span:first-child {
    flex: 1 1 auto;
  }
}

/* Trượt ngang giữa các tầng. `animation` chứ không `transition`: phần tử vừa
   chuyển từ `display: none` sang `block`, không có giá trị đầu để transition. */
@keyframes potech-keo-toi {
  from { opacity: 0; transform: translateX(18%); }
  to   { opacity: 1; transform: none; }
}
@keyframes potech-keo-lui {
  from { opacity: 0; transform: translateX(-18%); }
  to   { opacity: 1; transform: none; }
}
@keyframes potech-keo-hien {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 991.98px) {
  html.potech-pattern .potech-drawer[data-potech-huong="toi"][data-potech-cap="1"] .potech-drawer__mo > .dropdown-menu,
  html.potech-pattern .potech-drawer[data-potech-huong="toi"][data-potech-cap="2"] .potech-drawer__mo > .potech-mega__panel {
    animation: potech-keo-toi var(--dur-slow) var(--ease-out) both;
  }
  /* Lùi về: phần tử hiện lại là danh sách CHA, nên hoạt ảnh gắn vào nó. Ở tầng 1
     phần tử đó vẫn đang hiện sẵn — đổi tên keyframes là trình duyệt chạy lại. */
  html.potech-pattern .potech-drawer[data-potech-huong="lui"][data-potech-cap="0"] > .navbar-nav,
  html.potech-pattern .potech-drawer[data-potech-huong="lui"][data-potech-cap="1"] .potech-drawer__mo > .dropdown-menu {
    animation: potech-keo-lui var(--dur-slow) var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.potech-pattern .navbar .navbar-collapse.potech-drawer,
  html.potech-pattern .potech-drawer__phu,
  html.potech-pattern .potech-drawer [data-potech-huong] > .navbar-nav,
  html.potech-pattern .potech-drawer .potech-drawer__mo > .dropdown-menu,
  html.potech-pattern .potech-drawer .potech-drawer__mo > .potech-mega__panel {
    transition: none;
    animation: none;
  }
}
/* --- E. Dải serie anh em, in sau danh sách sản phẩm ------------------------ */

/* Khối này là liên kết phụ chứ không phải nội dung chính của trang — tách khỏi
   lưới sản phẩm phía trên bằng một đường kẻ và khoảng thở rộng, để không đọc
   nhầm thành "còn sản phẩm nữa ở dưới". */
html.potech-pattern .potech-serie-bridge--anh-em {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--ink-200);
  clear: both;
}

html.potech-pattern .potech-serie-bridge__len {
  margin: var(--space-4) 0 0;
}
html.potech-pattern .potech-serie-bridge__len a {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--potech-blue);
}
html.potech-pattern .potech-serie-bridge__len a::after {
  content: " →";
}

/* --- D2. Panel dạng cột, cho mảng ít danh mục ------------------------------ */

/* Panel cao 420px vì panel Đèn LED (16 danh mục) cần 406px. Hai mảng còn lại chỉ
   cần 136px nên trống ba phần tư. Thay vì thu panel lại — làm panel Đèn LED phải
   cuộn, tệ hơn — hai mảng nhỏ mở thêm một cấp: mỗi danh mục một cột, danh mục con
   liệt kê bên dưới. Chỗ trống được lấp bằng liên kết có ích, không phải bằng
   khoảng đệm. */
html.potech-pattern .potech-mega__nhoms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

/* `auto-fit` chứ không `auto-fill` ở đây: mảng có 2 danh mục thì auto-fill để lại
   một cột ma rỗng bên phải, auto-fit thì hai cột dàn đều hết bề ngang. */

html.potech-pattern a.potech-mega__nhom-dau {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 0 var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-200);
  border-radius: 0;
}

html.potech-pattern .potech-mega__nhom-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
html.potech-pattern .potech-mega__nhom-list li {
  margin: 0;
}

/* Cùng chuỗi selector dài như `.potech-mega__sub-*` ở trên và vì đúng lý do đó:
   `.main_nav .nav-primary .dropdown-menu a span` (0,4,1) bắt MỌI span trong
   panel và sẽ nhồi `padding: 10px 0` vào từng dòng. */
html.potech-pattern .main_nav .nav-primary .dropdown-menu a span.potech-mega__nhom-ten {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-700);
}
html.potech-pattern .main_nav .nav-primary .dropdown-menu a:hover span.potech-mega__nhom-ten {
  color: var(--potech-blue);
}

html.potech-pattern .potech-mega__nhom-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 5px var(--space-2) 5px 0;
  border-bottom: 0;
  border-radius: var(--radius-1);
  transition: background-color var(--dur-fast) var(--ease-out);
}
html.potech-pattern .potech-mega__nhom-list a:hover {
  background: var(--potech-blue-050);
}

/* ==========================================================================
   20 · TRANG "GIỚI THIỆU"

   Đo trên trang cũ (3.904px cao): ĐÚNG MỘT heading trên toàn trang — cái <h1>
   của page-header. 5.844 ký tự nội dung không có lấy một <h2>. Bốn khối giá trị
   cốt lõi đánh dấu bằng <fieldset> (phần tử gom ô nhập liệu của form). Năm chỗ
   ghim cứng màu chữ d71818, không phải đỏ brand. Một ảnh giải thưởng trỏ tới
   biến thể chưa từng được sinh ra, naturalWidth = 0.

   `inc/page-about.php` dựng lại cấu trúc lúc render; mục này lo phần nhìn.

   Ràng buộc bố cục: nội dung nằm trong `.potech-prose`, khổ đọc bị khoá ở
   `calc(72ch + 24px)` ≈ 732px. Những khối muốn rộng hơn phải PHÁ KHỔ, và dùng
   đúng cách phá khổ đã có sẵn trong `pattern.css` (`width` + margin âm tính
   bằng `calc((100% - Npx) / 2)`) chứ không phải `transform` hay `vw` — nhất
   quán thì sau này đổi một chỗ là đổi cả trang.
   ========================================================================== */

/* --- A. Câu mở đầu -------------------------------------------------------- */

/* Câu định vị công ty. Trước đây nó nổi lên nhờ chữ đỏ ghim cứng — cỡ chữ và
   độ dày làm được đúng việc đó mà không phải mượn màu cảnh báo, và không rơi
   xuống dưới sàn tương phản. */
html.potech-pattern .potech-prose .potech-about__lead {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 500;
  color: var(--ink-900);
  margin-bottom: var(--space-7);
}
html.potech-pattern .potech-prose .potech-about__lead strong {
  font-weight: 600;
}

/* --- A2. Tiêu đề mục trong nội dung -------------------------------------- */

/* Trước đợt viết lại nội dung, trang này KHÔNG có lấy một <h2> nào trong phần
   nội dung (chỉ <h1> của page-header), nên mục 20 chưa từng cần luật cho h2.
   Nội dung mới có ba mục thật — và đã đo: h2 nhận `margin: 0` từ reset, chữ dính
   luôn vào đoạn văn ngay dưới.

   `> h2` chứ không `h2`: bốn tiêu đề SỨ MỆNH / TẦM NHÌN / CHIẾN LƯỢC / NỘI LỰC
   cũng là h2 nhưng nằm trong `.potech-tenet`, chúng có luật riêng ở mục D.

   Trên nhiều hơn dưới (space-9 / space-4): tiêu đề phải dính vào phần nó dẫn
   vào, không dính vào phần vừa kết thúc. */
html.potech-pattern .potech-prose > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--potech-blue);
  margin: var(--space-9) 0 var(--space-4);
}
/* Gạch đỏ ngắn: cùng dấu hiệu mục mà `.headline` dùng trên trang chủ, để hai
   trang đọc ra là cùng một hệ. */
html.potech-pattern .potech-prose > h2::after {
  content: "";
  display: block;
  width: 48px;
  margin-top: var(--space-3);
  border-bottom: 2px solid var(--potech-red);
}

/* --- B. Hai dòng sản phẩm, dạng phiếu kỹ thuật ---------------------------- */

/* "Đèn LED công nghiệp:" và "Đèn LED dân dụng:" vốn đã là cặp khoá/giá trị mà
   trước đó trông y hệt mọi đoạn văn quanh nó — người đọc lướt qua không thấy
   đây là DANH SÁCH hai dòng sản phẩm. Cột nhãn cố định làm hai giá trị thẳng
   hàng nên so sánh được bằng mắt. */
html.potech-pattern .potech-prose .potech-about__specs {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 1px 0;
  margin: var(--space-7) 0;
  /* Theme đặt `padding-left: 25px` cho mọi <dl>. Nền xám ở đây là thứ vẽ ra
     đường kẻ ngang (lộ qua khe `gap`), nên 25px thừa biến thành một vệt xám dọc
     chạy suốt cạnh trái khối. */
  padding: 0;
  background: var(--ink-200);
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
html.potech-pattern .potech-prose .potech-about__k,
html.potech-pattern .potech-prose .potech-about__v {
  margin: 0;
  padding: var(--space-4) 0;
  background: var(--bg-page);
}
html.potech-pattern .potech-prose .potech-about__k {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--potech-blue);
  padding-right: var(--space-5);
}
html.potech-pattern .potech-prose .potech-about__v {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

/* Dưới 640px, cột nhãn 168px chỉ còn đủ cho một từ mỗi dòng. Xếp chồng, và
   khoảng cách giữa nhãn với giá trị đóng lại để chúng còn dính thành một cặp. */
@media (max-width: 639px) {
  /* Đường kẻ 1px vốn do `gap` để lộ nền vẽ ra. Xếp chồng thì nó rơi vào GIỮA
     nhãn và giá trị của cùng một dòng — đúng chỗ không được phép có đường. Tắt
     gap, vẽ lại đường ngăn bằng viền trên của nhãn thứ hai trở đi. */
  html.potech-pattern .potech-prose .potech-about__specs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--bg-page);
  }
  html.potech-pattern .potech-prose .potech-about__k {
    padding: var(--space-4) 0 0;
  }
  html.potech-pattern .potech-prose .potech-about__v {
    padding: var(--space-2) 0 var(--space-4);
  }
  html.potech-pattern .potech-prose .potech-about__v + .potech-about__k {
    border-top: 1px solid var(--ink-200);
  }
}

/* --- C. Bốn khối giá trị cốt lõi ------------------------------------------ */

/* SỨ MỆNH (1 gạch đầu dòng) / TẦM NHÌN (3) / CHIẾN LƯỢC (4) / NỘI LỰC (4).

   Cố tình KHÔNG làm bốn thẻ card cạnh nhau: số gạch đầu dòng lệch nhau 1–4 nên
   card sẽ so le chiều cao, và bốn ô bằng nhau thì ngầm bảo bốn thứ này ngang
   hàng nhau — trong khi đây là bốn TẦNG, đọc từ trên xuống. Bốn hàng của một
   phiếu kỹ thuật vừa giữ được thứ tự đọc, vừa không sinh khoảng trắng ma. */
html.potech-pattern .potech-prose .potech-tenets {
  margin: var(--space-9) 0;
  border-top: 2px solid var(--potech-blue);
  border-bottom: 1px solid var(--ink-200);
}

@media (min-width: 960px) {
  /* Phá khổ ra 880px — cùng bậc với bảng và thư viện ảnh trong `.potech-prose`,
     nên ba loại khối rộng của trang này thẳng mép nhau. */
  html.potech-pattern .potech-prose .potech-tenets {
    width: 880px;
    max-width: none;
    margin-left: calc((100% - 880px) / 2);
    margin-right: calc((100% - 880px) / 2);
  }
}

html.potech-pattern .potech-prose .potech-tenet {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 var(--space-6);
  padding: var(--space-6) 0;
}
html.potech-pattern .potech-prose .potech-tenet + .potech-tenet {
  border-top: 1px solid var(--ink-200);
}

/* Đây là <h2> thật, không phải nhãn trang trí: nó là bốn mục duy nhất trong
   outline của trang. Chữ hoa nén giữ được sức nặng ở cỡ nhỏ mà không phải kéo
   to hơn phần nội dung nó dẫn vào. */
html.potech-pattern .potech-prose .potech-tenet__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--potech-blue);
}

html.potech-pattern .potech-prose .potech-tenet ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
html.potech-pattern .potech-prose .potech-tenet li {
  position: relative;
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
html.potech-pattern .potech-prose .potech-tenet li + li {
  margin-top: var(--space-3);
}
/* Dấu vuông nhỏ thay chấm tròn — cùng ngôn ngữ với khối kỹ thuật trong theme.
   `top` tính theo em để dấu nằm giữa DÒNG ĐẦU, không phải giữa cả mục: mục dài
   ba dòng thì dấu chấm tròn mặc định vẫn ở dòng đầu, làm khác đi là lệch. */
html.potech-pattern .potech-prose .potech-tenet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--potech-red);
}

/* Cột nhãn 200px không sống nổi khi khối co lại — dưới ngưỡng này xếp chồng,
   nhãn nằm trên nội dung của chính nó. */
@media (max-width: 719px) {
  html.potech-pattern .potech-prose .potech-tenet {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4) 0;
    padding: var(--space-5) 0;
  }
}

/* --- D. Ảnh giải thưởng --------------------------------------------------- */

/* Ba ảnh chứng nhận: bằng khen 2014 nằm riêng, còn chứng nhận + cúp đứng cạnh
   nhau trong một khối cột. Hai ảnh sau tỷ lệ khác nhau (619×809 và 436×607) nên
   trước đây rơi lệch nhau 30px và cái cúp trông như đang lơ lửng.

   Ép chiều cao bằng nhau rồi `object-fit: contain` là cách duy nhất không xén
   vào nội dung ảnh — đây là bằng chứng, cắt mất một góc con dấu là mất giá trị
   chứng minh. */
html.potech-pattern .potech-prose .wp-block-columns {
  align-items: stretch;
}
html.potech-pattern .potech-prose .wp-block-columns .wp-block-image {
  height: 100%;
  margin: 0;
}
html.potech-pattern .potech-prose .wp-block-columns .wp-block-image img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: contain;
  object-position: center bottom;
}

/* Chú thích tự có: ảnh bằng chứng đứng trong nền trắng của trang thì mép giấy
   trắng lẫn vào nền. Một viền mảnh trả lại ranh giới tờ giấy. */
html.potech-pattern .potech-prose .wp-block-image img {
  border: 1px solid var(--ink-100);
  background: var(--paper);
}

/* ==========================================================================
   21 · TRANG CHỦ — BA MẢNG KINH DOANH + CHUỖI BỐN BÀI TOÁN
   Hai khối mới thay cho lưới "Danh mục đèn LED" ghim cứng. Xem
   `template-parts/ba-mang.php` để biết vì sao là HÀNG chồng chứ không phải ba
   cột bằng nhau.

   Không có rule nào của theme bám vào các class `.potech-mang*` / `.potech-chuoi*`
   nên phần này không phải tranh độ đặc hiệu, trừ hai chỗ đã đo:
     .home .wrap section .headline { margin-bottom: 50px }   = (0,3,0)
     ul { padding-left: 2rem } và ba biến thể khác của `ul`  = (0,0,1)
   Các selector dưới đây đều ≥ (0,2,1) nên thắng cả hai.
   ========================================================================== */

html.potech-pattern .potech-mang__ds {
  display: grid;
  gap: 0;
}

/* Vạch ngăn nằm ở `border-top` của từng hàng chứ không phải `border-bottom`:
   hàng cuối không được có vạch treo lơ lửng phía dưới, mà hàng đầu thì CẦN một
   vạch để tách khỏi tiêu đề mục. */
html.potech-pattern .potech-mang__hang {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--rule);
}

/* Ô ảnh vuông có nền và viền, cùng cách xử lý đã dùng ở panel mega menu: ảnh sản
   phẩm đều chụp trên nền trắng, đặt trần lên nền trắng của trang thì mất ranh
   giới; `multiply` xoá nền trắng của ảnh để nó ăn vào nền xám của ô. */
html.potech-pattern .potech-mang__anh {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: var(--space-4);
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-2);
}
html.potech-pattern .potech-mang__anh img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

html.potech-pattern .potech-mang__ten {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--potech-blue);
  margin: 0 0 var(--space-2);
}
html.potech-pattern .potech-mang__tom-tat {
  color: var(--fg-muted);
  /* --fs-body chứ không phải 17px: 17 không có trên thang chữ trong tokens.css,
     mà dòng này chỉ là câu phụ dưới tên mảng — không cần một bậc riêng. Câu dẫn
     của mục "Bốn bài toán" mới dùng 18px, và chênh lệch đó là chủ ý. */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 68ch;
  margin: 0 0 var(--space-5);
}

/* Danh mục in thành chip chứ không thành dòng gạch đầu: số lượng lệch nhau rất
   xa giữa ba mảng (17 / 4 / 9). Dạng chip cuộn dòng thì hàng nào nhiều chỉ dày
   thêm vài dòng, còn dạng danh sách dọc sẽ làm hàng Đèn LED cao gấp bốn lần hai
   hàng kia. */
html.potech-pattern .potech-mang__dm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
html.potech-pattern .potech-mang__dm > li { margin: 0; }
html.potech-pattern .potech-mang__dm a {
  display: inline-block;
  padding: 7px 12px;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--ink-700);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-2);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
html.potech-pattern .potech-mang__dm a:hover,
html.potech-pattern .potech-mang__dm a:focus-visible {
  color: var(--potech-blue);
  background: var(--potech-blue-050);
  border-color: var(--potech-blue);
}

@media (max-width: 767px) {
  html.potech-pattern .potech-mang__hang {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Chuỗi bốn bài toán. Bốn mắt xích KHÔNG phải bốn thẻ ngang hàng — chúng nối
   tiếp nhau, nên hình phải có một đường chạy suốt. Đường đó là `border-top`
   dùng chung, `gap: 0` giữ nó liền mạch (có gap thì đường đứt thành bốn đoạn);
   khoảng cách giữa các cột lấy bằng `padding-right` của từng mắt xích.
   Mỗi mắt xích có một nút vuông đỏ đè lên đường — đủ để mắt đọc ra thứ tự mà
   không phải đánh số 01/02/03.
   -------------------------------------------------------------------------- */

html.potech-pattern .section.potech-chuoi { background: var(--ink-050); }
html.potech-pattern .potech-chuoi .headline { margin-bottom: var(--space-4); }
html.potech-pattern .potech-chuoi__dan {
  color: var(--fg-muted);
  font-size: 18px;
  line-height: var(--lh-body);
  max-width: 72ch;
  margin: 0 0 var(--space-8);
}

html.potech-pattern .potech-chuoi__ds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
html.potech-pattern .potech-chuoi__mat {
  position: relative;
  margin: 0;
  padding: var(--space-6) var(--space-7) 0 0;
  border-top: 1px solid var(--ink-300);
}
html.potech-pattern .potech-chuoi__mat::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--potech-red);
}
html.potech-pattern .potech-chuoi__mat h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--potech-blue);
  margin: 0 0 var(--space-2);
}
html.potech-pattern .potech-chuoi__mat p {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin: 0;
}

@media (max-width: 991px) {
  html.potech-pattern .potech-chuoi__ds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Hàng thứ hai cần khoảng thở phía trên, nếu không hai hàng dính vào nhau và
     đường kẻ của hàng dưới trông như gạch chân của đoạn văn hàng trên. */
  html.potech-pattern .potech-chuoi__mat:nth-child(n+3) { margin-top: var(--space-7); }
}
@media (max-width: 575px) {
  html.potech-pattern .potech-chuoi__ds { grid-template-columns: minmax(0, 1fr); }
  html.potech-pattern .potech-chuoi__mat { padding-right: 0; }
  html.potech-pattern .potech-chuoi__mat + .potech-chuoi__mat { margin-top: var(--space-6); }
}

/* Nền mục "Khách hàng nói gì" trước ghim cứng trong `style` inline của
   front-page.php (#f4f4f4). Gỡ inline ra thì rơi về `.testimonials{background:#f2f2f2}`
   = (0,1,0) của theme — vẫn ngoài hệ token. Chuỗi dưới = (0,3,1). */
html.potech-pattern .section.testimonials { background: var(--ink-050); }

/* ==========================================================================
   22 · Ô LIÊN HỆ — dùng chung cho ô bên hông trang sản phẩm VÀ modal gọi nhanh

   Hai tầng, xem chú thích ở `template-parts/kenh-chung.php`:
     tầng 1 `.hl-nhom`  — dãy số bán hàng của nhóm (5 phụ kiện / 2 pin)
     tầng 2 `.pt-kenh`  — kênh chung: CSKH, kỹ thuật, máy bàn, email, live chat, QR
   Khuôn `footer` vẫn là một `<li>` như cũ, dùng lại quy tắc chân trang ở mục 9 và 13.

   PHẠM VI LÀ `.pt-lienhe`, KHÔNG PHẢI `.product-cta`. Trước T-G5 mục này khoá vào
   `.product-cta` nên chỉ chạy ở trang sản phẩm, và modal gọi nhanh phải tự nuôi một
   khuôn thứ hai (lưới nút `.ctaButton` xanh đặc 54px). Kết quả là cùng một dãy số
   hiện hai hình dạng trên một màn hình. Nay `.pt-lienhe` đứng ở cả hai chỗ.

   `.pt-lienhe` phải giữ đúng ba class như `.woocommerce.single .product-cta a`
   = (0,3,1) của theme: `html.potech-pattern .pt-lienhe .pt-kenh__dong` cũng (0,3,1),
   thắng nhờ thứ tự nguồn. Bỏ bớt một class là thua và viền từng dòng quay lại.

   HAI BỀ MẶT, MỘT BỘ QUY TẮC. Ô bên hông nằm trên giấy trắng; modal dưới 768px nằm
   trên `#000000e6` (theme đặt `.ctaMobileModalWrap { background: transparent }` ở
   breakpoint đó). Mọi màu của mục này vì thế đi qua biến `--kn-*` khai ngay dưới,
   và chỉ khối override cuối mục đổi chúng. Đừng viết màu thẳng vào quy tắc nào —
   viết thẳng là quy tắc đó biến mất trên nền tối.

   Tiền tố `--kn-` chứ không `--lh-`: `tokens.css` đã có `--lh-tight`, `--lh-body`…
   cho line-height. Cùng một cái bẫy đã làm mất viền ở khối BORDERS.

   Thứ tự các dòng do JS xáo mỗi lượt tải (trang được FlyingPress cache 13 tiếng
   nên xáo ở PHP là vô nghĩa — xem docstring của partial). Bản đầu gán `style.order`
   nên container phải là grid; nay script DỜI NODE thật vì `order` làm tab order
   lệch khỏi thứ tự nhìn thấy. Grid ở đây giờ chỉ còn là chuyện bố cục, và
   `:first-child`/`:last-child` lại tin được vì DOM khớp mắt.
   ========================================================================== */

html.potech-pattern .pt-lienhe {
  --kn-rule:      var(--rule);
  --kn-hover:     var(--ink-050);
  --kn-nhan-1:    var(--potech-blue);
  --kn-phu:       var(--fg-subtle);
  --kn-ten:       var(--fg-muted);
  --kn-glyph-1:   var(--potech-red);
  --kn-glyph:     var(--potech-blue);
  --kn-so:        var(--potech-red-700);
  --kn-so-hover:  var(--potech-red-800);
  --kn-gt:        var(--fg);
  --kn-gt-hover:  var(--potech-red-700);
}

/* `.view-spec` ("Xem thông số") đã bỏ khỏi template. Nó là control nặng nhất cột —
   213×44px nền xanh đặc — mà `href="#thongso"` chỉ tới `.woocommerce-tabs` ở y=996
   trong khi bảng thông số thật ở y=2746, tức hạ cánh thiếu 1750px giữa văn bản; và
   trên trang phụ kiện lẫn trang pin thì không có bảng thông số nào để tới. Cùng với
   nó bỏ luôn quy tắc đổi màu icon ở mục 5.

   `style="font-size: 90%"` inline của cột cũng đã bỏ: 90% nhân chồng với
   `.product-cta .text{92%}` và `.help{72%}` của theme cho ra 13px và 10,4px, không
   nằm trong thang nào. Hai tầng dưới đây khai cỡ tuyệt đối bằng token. */

/* --- Khuôn `box`: ô bên hông trang sản phẩm ------------------------------ */

/* Nhóm đứng đầu ô, trên cả Hotline CSKH — số bán hàng là việc khách đang muốn
   làm trên trang sản phẩm, còn CSKH là kênh chung. */
html.potech-pattern .pt-lienhe .hl-nhom {
  margin-bottom: var(--space-4);
  /* `.hl-nhom` là `col-12` nên giữ 12px padding của Bootstrap, còn các dòng dưới
     nó là `<a class="col-6 col-lg-12">` mà `.product-cta a { padding: 10px 12px }`
     = (0,1,1) đã ăn mất padding cột. Đo được: viền nhóm lệch phải đúng 12px so
     với viền các dòng dưới. Bỏ padding cột để hai khối thẳng mép. */
  padding-left: 0;
  padding-right: 0;
}

html.potech-pattern .pt-lienhe .hl-nhom__dau {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--kn-nhan-1);
}

html.potech-pattern .pt-lienhe .hl-nhom__dem {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0;
  /* Không thừa hưởng `text-transform: uppercase` của dòng nhãn: "5 SỐ" đọc ra như
     một nhãn thứ hai, còn "5 số" đọc ra đúng cái nó là — một con số đếm. */
  text-transform: none;
  color: var(--kn-phu);
}

/* Viền viết thẳng `1px solid var(--rule)`, không qua token dựng sẵn — xem khối
   BORDERS của `tokens.css` để biết vì sao lớp này không có token viền nào. */
/* KHÔNG `overflow: hidden` ở đây. Nó từng dùng để bo góc hai dòng đầu/cuối, nhưng
   nó CẮT LUÔN vòng focus: `:focus-visible` của mục pattern là `outline: 2px` +
   `outline-offset: 2px`, mà mỗi dòng sát mép hộp cả bốn phía → đã xem tận mắt, vòng
   focus hiện ra thành hai vạch xanh ngang rời nhau, mất hẳn hai cạnh dọc. Bo góc
   bằng `:first-child`/`:last-child` thay thế — tin được vì script dời node thật nên
   DOM khớp thứ tự nhìn thấy. */
html.potech-pattern .pt-lienhe .hl-nhom__ds {
  display: grid;
  border: 1px solid var(--kn-rule);
  border-radius: var(--radius-2);
}

/* Thắng `.product-cta a { border: 1px solid #ededed; padding: 10px 12px }`
   = (0,1,1). Chuỗi này = (0,3,1). Bỏ viền từng dòng: cả nhóm đã có một viền
   ngoài, viền lồng viền cho ra đường 2px giữa các dòng. */
/* 52px, không phải 36px như bản đầu. Hai lý do, đo được cả hai:
   - Năm vùng bấm liền nhau này thực hiện một cuộc gọi không hoàn tác được, mà thứ
     tự lại đổi mỗi lượt tải — bấm nhầm là gọi sai người. 36px qua WCAG 2.5.8 (24px)
     nhưng trượt 2.5.5 (44px), và đây đúng là chỗ phải lấy ngưỡng cao hơn.
   - Thứ bậc phải nói ra bằng kích thước, không chỉ bằng thứ tự. Dòng tầng 2 khi nén
     hết cỡ vẫn là 44px (hai dòng nhãn/giá trị), nên 44px ở đây là NGANG BẰNG, chưa
     phải hơn — đã đo lần đầu ra 44 vs 48,8, tức vẫn đảo. 52 vs 44 mới đúng chiều.
   Kèm một cái được: "Ms. Lylii Thảo" wrap làm dòng đó cao 51,9px, giờ cả năm dòng
   đều 52px thay vì bốn dòng 44 và một dòng lệch. */
html.potech-pattern .pt-lienhe .hl-nhom__so {
  display: grid;
  /* Cùng lưới với `.pt-kenh__dong` của tầng 2: cột icon + cột nội dung hai dòng.
     Bản trước là `1fr auto` — số trái, tên phải, dạt hai đầu 213px. Xếp chồng thì
     tên nằm ngay trên số nó thuộc về, và hai tầng đọc ra là một hệ. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* `.product-cta .fa` = (0,1,1) cho vòng tròn đỏ 44px; chuỗi này = (0,4,1).
   Đỏ ở đây chứ không xanh như tầng 2: đỏ bão hoà là điểm nhấn mạnh nhất của trang
   và nó thuộc về tầng bán hàng. */
html.potech-pattern .pt-lienhe .hl-nhom__so .fa {
  grid-row: 1 / span 2;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  font-size: var(--fs-small);
  color: var(--kn-glyph-1);
}

html.potech-pattern .pt-lienhe .hl-nhom__so + .hl-nhom__so {
  border-top: 1px solid var(--kn-rule);
}

/* Bo trong = bo ngoài trừ độ dày viền, để nền hover không vuông góc ở hai dòng đầu
   và cuối. Thay cho `overflow: hidden` đã bỏ ở trên. */
html.potech-pattern .pt-lienhe .hl-nhom__so:first-child {
  border-top-left-radius: calc(var(--radius-2) - 1px);
  border-top-right-radius: calc(var(--radius-2) - 1px);
}

html.potech-pattern .pt-lienhe .hl-nhom__so:last-child {
  border-bottom-left-radius: calc(var(--radius-2) - 1px);
  border-bottom-right-radius: calc(var(--radius-2) - 1px);
}

html.potech-pattern .pt-lienhe .hl-nhom__so:hover,
html.potech-pattern .pt-lienhe .hl-nhom__so:focus-visible {
  background-color: var(--kn-hover);
}

/* Ô này bọc trong `style="font-size: 90%"` inline của content-single-product.php,
   và `.product-cta .text` còn 92% nữa — số điện thoại rơi xuống ~13px. Token là
   giá trị tuyệt đối nên cắt được cả hai tầng. */
html.potech-pattern .pt-lienhe .hl-nhom__sdt {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
  /* KHÔNG dùng `--potech-red` ở đây: #ED1C24 trên trắng chỉ đạt 4,38:1, dưới
     ngưỡng AA 4,5 cho chữ thường (xem ghi chú trong tokens.css). Đỏ tươi để làm
     đồ hoạ, chữ đỏ dùng bậc -700. */
  color: var(--kn-so);
}

html.potech-pattern .pt-lienhe .hl-nhom__so:hover .hl-nhom__sdt {
  color: var(--kn-so-hover);
}

/* Cùng hình học với `.pt-kenh__nhan` của tầng 2 (12px/600) để hai tầng đọc ra là
   một hệ, nhưng `--fg-muted` (6,12:1) chứ không `--fg-subtle` (4,83:1): tên người
   là TIÊU CHÍ QUYẾT ĐỊNH DUY NHẤT khi thứ tự đã random — mọi số đều gọi được, khách
   chỉ chọn được theo người. Một bậc đậm hơn nói ra điều đó mà không phá đồng bộ.
   Không `white-space: nowrap`: dòng đo được `slack: 0` ở bề rộng 213px. */
html.potech-pattern .pt-lienhe .hl-nhom__ten {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  color: var(--kn-ten);
}

/* --- Tầng 2 `.pt-kenh`: kênh chung --------------------------------------- */

/* Cùng cấu tạo với tầng 1 (một hộp viền 1px, vách hairline giữa các dòng) để hai
   khối đọc ra là cùng một hệ, nhưng NHỎ HƠN và NGUỘI HƠN ở mọi trục:
     - dòng 44px một-nhãn-một-giá-trị thay vì 66px
     - icon là glyph xanh 14px, không phải vòng tròn đỏ đặc 44px
     - đỏ để nguyên cho tầng 1, ở đây chỉ xuất hiện lúc hover
   Bản trước cả bốn dòng là `<a class="col-6 col-lg-12">` với `gap: 0`, thành một
   mảng liền 436px không phân tầng, và dưới 992px chúng thành lưới 2 cột `col-6`
   nên KÊNH CHUNG lại có vùng bấm to hơn số bán hàng. Markup mới bỏ hẳn class cột,
   bố cục do grid dưới đây lo. */
html.potech-pattern .pt-lienhe .pt-kenh {
  /* cùng lý do bỏ padding cột như `.hl-nhom`: thẳng mép với tầng 1 */
  padding-left: 0;
  padding-right: 0;
}

html.potech-pattern .pt-lienhe .pt-kenh__dau {
  padding-bottom: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* `--fg-subtle` chứ không `--potech-blue` như nhãn tầng 1: nhãn này chỉ để phân
     tầng, không phải để gọi mắt. */
  color: var(--kn-phu);
}

html.potech-pattern .pt-lienhe .pt-kenh__ds {
  display: grid;
  border: 1px solid var(--kn-rule);
  border-radius: var(--radius-2);
}

/* Thắng `.product-cta a { border: 1px solid #ededed; padding: 10px 12px }` = (0,1,1);
   chuỗi này = (0,3,1). Một dòng là `<button>` (Live Chat) nên phải gỡ cả nền, viền
   và font mặc định của tác nhân người dùng. */
html.potech-pattern .pt-lienhe .pt-kenh__dong {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--space-3);
  width: 100%;
  /* Nội dung hai dòng (12px nhãn + 14px giá trị) cao 31,9px, nên `--space-1` là mức
     nén hết cỡ mà vẫn để `min-height` quyết định — 44px chẵn, đủ ngưỡng WCAG 2.5.5,
     và thấp hơn 52px của tầng 1 đúng một bậc. `--space-2` cho ra 48,8px, cao hơn
     tầng 1, tức vẫn giữ nguyên cái thứ bậc đảo mà mục này sinh ra để sửa. */
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

html.potech-pattern .pt-lienhe .pt-kenh__dong + .pt-kenh__dong {
  border-top: 1px solid var(--kn-rule);
}

html.potech-pattern .pt-lienhe .pt-kenh__dong:first-child {
  border-top-left-radius: calc(var(--radius-2) - 1px);
  border-top-right-radius: calc(var(--radius-2) - 1px);
}

html.potech-pattern .pt-lienhe .pt-kenh__dong:last-child {
  border-bottom-left-radius: calc(var(--radius-2) - 1px);
  border-bottom-right-radius: calc(var(--radius-2) - 1px);
}

html.potech-pattern .pt-lienhe .pt-kenh__dong:hover,
html.potech-pattern .pt-lienhe .pt-kenh__dong:focus-visible {
  background-color: var(--kn-hover);
}

/* `.product-cta .fa` = (0,1,1) cho vòng tròn `#ed1c24` 44px (34px trong hai media
   query, cùng độ đặc hiệu). Chuỗi này = (0,4,1) nên thắng cả ba. Đỏ bão hoà là đồ
   hoạ duy nhất mạnh nhất của trang; nó thuộc về tầng 1. */
html.potech-pattern .pt-lienhe .pt-kenh__dong .fa {
  grid-row: 1 / span 2;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  font-size: var(--fs-small);
  color: var(--kn-glyph);
}

/* Hai dòng chứ không một dòng: đo được cột này rộng 213px, mà một dòng
   `glyph + "Hotline CSKH" + "0912.122.016"` ở 14px cần ~242px kể cả padding. */
html.potech-pattern .pt-lienhe .pt-kenh__nhan {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  color: var(--kn-phu);
}

html.potech-pattern .pt-lienhe .pt-kenh__gt {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--kn-gt);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Theme gốc có `.product-cta a:hover .text { color: #ed1c24 }` — giữ lại hành vi đó,
   chỉ đổi sang bậc -700 vì #ED1C24 trên trắng là 4,38:1, dưới ngưỡng AA. */
html.potech-pattern .pt-lienhe .pt-kenh__dong:hover .pt-kenh__gt,
html.potech-pattern .pt-lienhe .pt-kenh__dong:focus-visible .pt-kenh__gt {
  color: var(--kn-gt-hover);
}

/* QR Zalo. Trước là ảnh 520×520 nhồi vào ô `max-width: 150px`, không nhãn nào ngoài
   `alt="Zalo"` — trên điện thoại thì vô nghĩa (không tự quét màn hình của mình được)
   mà vẫn chiếm 150px, và tín hiệu "quét tôi" trái với hành vi thật là "bấm để mở
   Zalo". Nay có chú thích nói cả hai cách dùng.

   Xếp NGANG chứ không dọc: đo bản dọc ra 174px cao, tức một mình cái QR nặng gần
   bằng cả bốn dòng kênh chung (196px) và hơn hẳn thứ bậc nó đáng có. Ngang thì
   100 + 24 padding = 124px, và khối đọc ra như một dòng nữa thay vì một tấm áp phích. */
html.potech-pattern .pt-lienhe .pt-kenh__zalo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--kn-rule);
  border-radius: var(--radius-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}

html.potech-pattern .pt-lienhe .pt-kenh__zalo:hover,
html.potech-pattern .pt-lienhe .pt-kenh__zalo:focus-visible {
  background-color: var(--kn-hover);
}

/* 100px là ngưỡng còn quét được từ camera điện thoại chĩa vào màn hình; nhỏ hơn thì
   ô mã bắt đầu rơi dưới 2px mỗi module và máy bắt không ăn. */
html.potech-pattern .pt-lienhe .pt-kenh__zalo img {
  width: 100px;
  height: 100px;
}

html.potech-pattern .pt-lienhe .pt-kenh__zalo-chu {
  font-size: var(--fs-eyebrow);
  line-height: 1.35;
  color: var(--kn-phu);
}

/* Từ 992px xuống, `.col-lg-4` thành full width — dòng rộng gấp ba thì hai dòng
   nhãn/giá trị là thừa, về một dòng. Tầng 1 GIỮ một cột: nếu nó cũng dàn ngang thì
   thứ bậc vừa dựng lại đổ, và đây là hai khối duy nhất trong ô này có breakpoint
   riêng — trước đợt này `.hl-nhom*` không có media query nào ở mọi bề rộng. */
@media (max-width: 991.98px) {
  html.potech-pattern .pt-lienhe .hl-nhom__so,
  html.potech-pattern .pt-lienhe .pt-kenh__dong {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
  }

  html.potech-pattern .pt-lienhe .hl-nhom__so .fa,
  html.potech-pattern .pt-lienhe .pt-kenh__dong .fa {
    grid-row: auto;
  }

  html.potech-pattern .pt-lienhe .hl-nhom__sdt,
  html.potech-pattern .pt-lienhe .pt-kenh__gt {
    text-align: right;
  }
}

/* --- Modal gọi nhanh: cùng khối trên bề mặt tối -------------------------- */

/* `.hl-float` / `.hl-float__nut` đã bỏ hẳn. Đó là lưới 2 cột các nút `.ctaButton`
   xanh đặc — chín ô cùng một màu, cùng một cỡ, cho chín thứ khác hẳn nhau: năm
   người bán, tổng đài CSKH, kỹ thuật, máy bàn, và một ĐỊA CHỈ EMAIL nhét vừa cái
   khuôn của số điện thoại. Không có nước đi đầu tiên nào trong đó. Cộng thêm quy
   tắc `:last-child:nth-child(odd) { grid-column: 1 / -1 }` của chính tôi: nó biến
   "hết ô lưới" thành "người này quan trọng nhất", mà thứ tự lại xáo mỗi lượt tải.

   Nay modal in đúng khối của ô bên hông (`.hl-nhom` + `.pt-kenh`) và chỉ đổi màu. */

/* Modal là `position: fixed; top: 0; bottom: 0` mà KHÔNG có overflow — nội dung
   cao hơn màn hình thì phần dưới không cuộn tới được. Trước đây 4 nút vừa khít
   trên máy 667px; thêm nhóm số bán hàng là vượt. Đây là điều kiện để khối dùng
   được, không phải trang trí. */
html.potech-pattern .ctaMobileModal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* `.hl-nhom` và `.pt-kenh` bỏ padding cột (để thẳng mép nhau), nhưng `.row` của
   Bootstrap vẫn còn margin âm −12px hai bên → khối lòi ra khỏi lề 30px của
   `.ctaMobileModalWrap`. Ô bên hông không dính vì `.row` ở đó mang `margin-lr-0`
   của theme; ở đây phải tự gỡ. */
html.potech-pattern .ctaMobileModalBody .row {
  margin-left: 0;
  margin-right: 0;
}

/* Tiêu đề modal KHÔNG còn bị giấu ở điện thoại. Theme đặt
   `.ctaMobileModalHeader { display: none }` dưới 768px, tức đúng cái màn hình mà
   popup này sinh ra để phục vụ thì nó mở lên không có một dòng nào nói đây là gì —
   chỉ một dãy số trôi trên nền đen. Câu "bấm vào số để nhắn Zalo" lại càng phải có
   ở đó, vì hành vi không đoán được từ hình. */
@media (max-width: 767.98px) {
  html.potech-pattern .ctaMobileModal .ctaMobileModalHeader {
    display: block;
    margin-bottom: var(--space-5);
  }

  html.potech-pattern .ctaMobileModal .ctaMobileHeadline {
    color: var(--paper);
  }

  html.potech-pattern .ctaMobileModal .ctaMobileModalHeader p {
    margin-bottom: 0;
    font-size: var(--fs-small);
    color: var(--fg-on-blue-muted);
  }

  /* Bề mặt tối. Chỉ mười một biến đổi, không quy tắc nào phải viết lại.
     Đã tính tương phản trên nền `#000000e6`:
       --potech-red-300  #F68C90 → 8,9:1   (số bán hàng, nhãn tầng 1)
       --fg-on-blue-muted #B6C4DD → 11,9:1 (nhãn phụ, tên người)
       --potech-blue-300 #6B8AC4 → 6,0:1   (glyph tầng 2, ngưỡng đồ hoạ là 3:1)
       --paper                    → 21:1   (giá trị tầng 2)
     Đỏ tươi `--potech-red` và đỏ -700 đều KHÔNG dùng lại được ở đây: -700 #C8141B
     trên đen chỉ 2,4:1. Bậc sáng là bắt buộc, không phải lựa chọn thẩm mỹ. */
  html.potech-pattern .ctaMobileModal .pt-lienhe {
    --kn-rule:     rgba(255, 255, 255, 0.22);
    --kn-hover:    rgba(255, 255, 255, 0.1);
    --kn-nhan-1:   var(--potech-red-300);
    --kn-phu:      var(--fg-on-blue-muted);
    --kn-ten:      var(--fg-on-blue-muted);
    --kn-glyph-1:  var(--potech-red-300);
    --kn-glyph:    var(--potech-blue-300);
    --kn-so:       var(--potech-red-300);
    --kn-so-hover: var(--paper);
    --kn-gt:       var(--paper);
    --kn-gt-hover: var(--potech-red-300);
  }

  /* Vòng focus mặc định là xanh — chìm trên nền đen như mọi bề mặt tối khác của
     theme (xem mục 11). */
  html.potech-pattern .ctaMobileModal .pt-lienhe a:focus-visible,
  html.potech-pattern .ctaMobileModal .pt-lienhe button:focus-visible {
    outline-color: var(--paper);
  }
}

/* --- Nút đóng ------------------------------------------------------------

   DẤU X LÀ ẢNH NỀN, KHÔNG PHẢI CHỮ. `.btn-close` của Bootstrap 5 vẽ nó bằng
   `background-image: url("data:image/svg+xml,…fill='%23000'…")` — SVG ghim cứng
   màu đen, cộng `opacity: .5`. Nút không có ký tự nào bên trong (đã đọc: nội
   dung chỉ là khoảng trắng).

   Hệ quả: quy tắc `.close { color: #fff }` của theme cho nhánh ≤767px KHÔNG có
   gì để tô. Trên bề mặt tối `#000000e6` của modal đó là đen trên đen — nút biến
   mất hẳn. Đây là lỗi tôi mang vào khi dựng lại modal: khuôn cũ dùng ký tự `×`
   nên `color` còn ăn.

   Hai việc, hai lý do:

   1. `opacity: 1`. Đen ở 50% trên nền trắng cho ra xám #808080 — đo được 3,95:1,
      dưới ngưỡng. Đây là lối thoát duy nhất của một hộp phủ kín màn hình, không
      phải chi tiết trang trí.

   2. `filter: invert(1)` cho nhánh tối. Đúng cách Bootstrap tự làm cho
      `.btn-close-white`, và là cách duy nhất đổi được màu một SVG nằm trong
      `background-image` — `fill` bên trong data-URI không với tới từ ngoài. */
html.potech-pattern .ctaMobileModal .btn-close {
  opacity: 1;
}
@media (max-width: 767.98px) {
  html.potech-pattern .ctaMobileModal .btn-close {
    filter: invert(1);
  }
}

/* MODAL LUÔN XẾP DÒNG NGANG, KHÔNG THEO BỀ RỘNG MÀN HÌNH.

   Khối này xếp chồng (nhãn trên, giá trị dưới) vì cột bên hông chỉ rộng 213px —
   một dòng `glyph + "Hotline CSKH" + "0912.122.016"` ở 14px cần ~242px. Nhưng trong
   modal thì hộp rộng 490px (550 trừ padding 30 hai bên), và ở màn hình rộng thì
   media query 991.98px không chạy, nên đã đo: mỗi dòng thừa ~350px trống bên phải
   trong khi vẫn cao 52px cho hai dòng chữ.

   Điều kiện đúng ở đây là bề rộng của DÒNG chứ không của cửa sổ — cùng một khối,
   hai vật chứa khác hẳn nhau. Nên modal khai riêng, không mượn breakpoint.

   Ở điện thoại 375px hộp còn 315px: đã tính dòng dài nhất, "Máy bàn văn phòng"
   (~110px ở 12px) + "028.3726.9399" (~95px ở 14px đậm) + glyph, gap và padding
   ~60px = ~265px, vẫn dư. Dưới 360px thì trả về xếp chồng ở khối cuối mục. */
html.potech-pattern .ctaMobileModalBody .hl-nhom__so,
html.potech-pattern .ctaMobileModalBody .pt-kenh__dong {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
}

html.potech-pattern .ctaMobileModalBody .hl-nhom__so .fa,
html.potech-pattern .ctaMobileModalBody .pt-kenh__dong .fa {
  grid-row: auto;
}

html.potech-pattern .ctaMobileModalBody .hl-nhom__sdt,
html.potech-pattern .ctaMobileModalBody .pt-kenh__gt {
  text-align: right;
}

/* Địa chỉ email không phải dãy số: tắt `tabular-nums` (không có chữ số để canh cột,
   bật lên thì `@` và dấu chấm bị đẩy vào ô rộng bằng chữ số), và hạ một bậc cỡ vì
   `cskh@potech.com.vn` ở 14px đậm đã 132px. */
html.potech-pattern .pt-lienhe .pt-kenh__gt--email {
  font-size: var(--fs-eyebrow);
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

/* Dòng cuối modal. `.cp-icon` nay là glyph chứ không phải ảnh nữa (lý do ghi ở
   `footer.php`, chỗ dùng), nên phải tự khai cỡ và màu — theme không có quy tắc
   nào cho class này. */
html.potech-pattern .ctaMobileModalFooter .cp-icon {
  margin-right: var(--space-2);
  font-size: var(--fs-small);
  color: var(--kn-glyph, var(--potech-blue));
}

@media (max-width: 767.98px) {
  html.potech-pattern .ctaMobileModalFooter .cp-icon {
    color: var(--potech-blue-300);
  }
}

/* Dưới 360px hộp còn ~300px. `cskh@potech.com.vn` (~118px ở 12px) cạnh nhãn
   "Email" thì vừa, nhưng "Máy bàn văn phòng" cạnh "028.3726.9399" thì sát mép và
   một trong hai sẽ ngắt dòng lệch. Trả về xếp chồng như cột bên hông. Đặt SAU khối
   modal ở trên vì hai chuỗi cùng độ đặc hiệu (0,3,1) — thứ tự nguồn quyết định. */
@media (max-width: 359.98px) {
  html.potech-pattern .ctaMobileModalBody .hl-nhom__so,
  html.potech-pattern .ctaMobileModalBody .pt-kenh__dong {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--space-3);
  }

  html.potech-pattern .ctaMobileModalBody .hl-nhom__so .fa,
  html.potech-pattern .ctaMobileModalBody .pt-kenh__dong .fa {
    grid-row: 1 / span 2;
  }

  html.potech-pattern .ctaMobileModalBody .hl-nhom__sdt,
  html.potech-pattern .ctaMobileModalBody .pt-kenh__gt {
    text-align: left;
  }
}


/* ==========================================================================
   23 · KHỐI SẢN PHẨM TRONG CARD DỰ ÁN — rãnh trượt khi quá 2 sản phẩm
   ==========================================================================

   Ô sản phẩm là `col-md-6` nên xếp 2 cột. Ba sản phẩm đổ xuống hàng thứ hai và
   `.related-product` cao 124px thay vì 73px; card cùng hàng của Bootstrap cao
   bằng nhau nên MỘT dự án 3 sản phẩm kéo cả hàng cao thêm 51px, hai card bên
   cạnh thừa 51px trống. Đã đo trên /portfolio/: hàng đầu 408px, ba hàng sau 357px.

   Đổi hàng đó thành rãnh cuộn ngang bằng scroll-snap thuần CSS. Không Swiper:
   `window.Swiper` là undefined trên trang này (Swiper chỉ nạp ở front-page và
   single-portfolio), và production chạy FlyingPress có Delay JS — rãnh CSS chạy
   ngay lúc vẽ, không chờ script nào.

   Chỉ 1/53 dự án hiện quá ngưỡng, nên nhánh này gần như luôn ngủ. Điều kiện nằm
   ở PHP theo SỐ sản phẩm (`content-portfolio.php`), không ghim vào dự án nào.
   ========================================================================== */

html.potech-pattern .related-product--truot .row {
  /* `.row` của Bootstrap là `flex-wrap: wrap` + margin ngang ÂM. Giữ margin âm
     trong một vùng cuộn thì nội dung cuộn bắt đầu lệch khỏi mép, nên bỏ margin
     và thay khoảng cách giữa ô bằng `gap` — đồng thời khỏi phải trừ padding
     gutter của từng ô khi tính bề rộng ô bên dưới. */
  flex-wrap: nowrap;
  margin: 0;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Cuộn hết rãnh thì DỪNG, không đẩy tiếp sang trang phía sau. */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-300) transparent;
  /* Thanh cuộn tốn chiều cao thật, và chiều cao là đúng cái đang phải cắt: để
     nguyên thì khối cao 79px thay vì 73px, hàng đầu 363px thay vì 357px — thu
     hồi được 45/51px nhưng vẫn lệch 6px.
     `.related-product` đã có `padding: 10px` (app.css), tức dưới ô sản phẩm đã
     dành sẵn 10px trống. Kéo rãnh xuống 6px để thanh cuộn nằm trong khoảng đó,
     còn 4px hở tới viền. Thanh cuộn là chrome chứ không phải nội dung nên không
     ai mất chỗ đọc. Đã đo sau khi thêm: khối về đúng 73px, hàng đầu 357px —
     bằng chằn chặn ba hàng còn lại. */
  margin-bottom: -6px;
}

/* Thanh cuộn để HIỆN, không ẩn. Ẩn đi thì trên máy tính dùng chuột không còn
   cách nào cuộn ngang ngoài Shift+lăn — một affordance chỉ hiện khi đã biết
   nó tồn tại. Đổi lại nó tốn chiều cao, nên vẽ mảnh nhất có thể. */
html.potech-pattern .related-product--truot .row::-webkit-scrollbar {
  height: 4px;
}
html.potech-pattern .related-product--truot .row::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--radius-pill);
}
html.potech-pattern .related-product--truot .row::-webkit-scrollbar-track {
  background: transparent;
}

/* `.col-md-6` của Bootstrap 5 là `flex: 0 0 auto` + `width: 50%` — phải ghi đè
   CẢ `width`, đặt riêng `flex-basis` không có tác dụng.

   2,15 ô một lượt chứ không phải 2 chẵn: chừa một mảnh ô thứ ba lộ ra ở mép phải
   làm tín hiệu "còn nữa, cuộn tiếp", khỏi cần chấm tròn hay mũi tên — cả hai thứ
   đó đều phải có JS mới đồng bộ được trạng thái.

   Nhưng đã đo và mảnh đó KHÔNG mạnh đều ở hai khổ, đừng tin nó là tín hiệu duy nhất:
     desktop — rãnh 361px, ô 160px, ô thứ ba chỉ lộ 25px. 25px đó rơi đúng vào ô
               ảnh (`td` rộng 30%), mà ảnh đèn dạng thanh thì mảnh và nền trắng
               nên gần như không thấy gì. Ở khổ này THANH CUỘN mới là tín hiệu
               thật — thêm một lý do nữa để không ẩn nó đi.
     mobile  — rãnh 314px, ô 245px, ô thứ hai lộ 61px = 25% bề rộng ô. Ở đây mảnh
               cắt nhìn ra ngay.
   Nó vẫn có việc thật: phân biệt được card "còn nữa" với card đúng 2 sản phẩm. */
html.potech-pattern .related-product--truot .row > a {
  flex: 0 0 auto;
  width: calc((100% - 2 * var(--space-2)) / 2.15);
  max-width: none;
  padding: 0;
  scroll-snap-align: start;
}

/* Dưới 768px `col-md-6` trải hết bề rộng, mà card lúc đó chỉ rộng ~343px: chia
   2,15 ô thì mỗi ô còn ~152px, tên sản phẩm ("Đèn LED nhà xưởng UFO 40W") vỡ
   thành 4 dòng. Ở khổ đó cho 1,25 ô một lượt — đã đo lại ở 372px: ô rộng 245px,
   tên sản phẩm 1–2 dòng, ô sau lộ 61px nên tín hiệu cuộn rõ hơn cả desktop.

   Mobile vốn KHÔNG có lỗi lệch hàng (mỗi card một hàng riêng nên không kéo ai),
   nhưng vẫn cho trượt để hai khổ cùng một hành vi; và nó gọn hơn thật: khối cao
   98px thay vì ba hàng xếp dọc ~124px. */
@media (max-width: 767.98px) {
  html.potech-pattern .related-product--truot .row > a {
    width: calc((100% - var(--space-2)) / 1.25);
  }
}

/* ==========================================================================
   24 · TRANG DỊCH VỤ — sidebar về bên trái ở desktop
   ==========================================================================

   `template-dich-vu.php` đã đổi thứ tự DOM: nội dung trước, `<aside>` sau (lý do
   đầy đủ ở docblock trong file đó — tóm tắt: ở 360px sidebar cao 435px đẩy nội
   dung thật của trang xuống y=1020, quá một màn hình).

   Ở đây trả sidebar về BÊN TRÁI cho khổ ≥992px, đúng chỗ nó vẫn đứng, để bố cục
   desktop không đổi một pixel nào so với trước.

   Không cần `!important` và không cần đấu độ đặc hiệu: `order` chưa từng được
   khai ở đâu trong CSS đã build (đã grep `public/css/*.css` — 0 kết quả cho
   `order-lg-`, `order-first`; Bootstrap của theme đã tree-shake hết nhóm utility
   này), nên `.col-lg-3` chỉ có `flex: 0 0 auto; width: 25%`. Giá trị mặc định
   `order: 0` thua bất kỳ khai báo nào.

   Ngưỡng 992px lấy đúng theo `col-lg-*`, không tự đặt số mới.
   ========================================================================== */

@media (min-width: 992px) {
  html.potech-pattern .page-template-template-dich-vu .dich-vu-aside {
    order: -1;
  }
}

/* Dưới 992px sidebar nằm cuối trang, sau cả gallery. Tách nó ra khỏi nội dung
   bằng một đường kẻ + khoảng thở, nếu không hai khối chữ dính vào nhau và menu
   "các dịch vụ khác" đọc ra như phần tiếp theo của bài.

   Chỉ ở khổ mobile: desktop hai cột đã tách nhau bằng khoảng trắng ngang rồi. */
@media (max-width: 991.98px) {
  html.potech-pattern .page-template-template-dich-vu .dich-vu-aside {
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--rule);
  }
}

/* ==========================================================================
   25 · LINK GỌI / GỬI THƯ TRONG WIDGET VĂN BẢN
   ==========================================================================

   Ô "Liên hệ với POTECH" ở sidebar trang dịch vụ là widget `text-2`; nội dung
   nằm trong DB, không trong theme. Trước đây số hotline và email là VĂN BẢN
   TRẦN — đo được `NO-LINK` cho cả hai dòng, tức hành động chuyển đổi duy nhất
   của ô đó không bấm được, và trên điện thoại thì chết hẳn. Đã bọc `<a>` cho cả
   hai dòng trong DB.

   Nhưng bọc xong thì lộ ra rule của chính lớp này bắt nhầm:

     html.potech-pattern section.widget ul li a { display: block; padding: 9px 12px }

   viết cho widget MENU (danh mục sản phẩm) — chú thích ở mục đó còn ghi "widget
   duy nhất đang chạy trong sidebar là danh mục sản phẩm", giả định nay đã sai.
   Nó tóm luôn `<ul>` bên trong widget văn bản. Hệ quả đo được: `<a>` thành khối,
   nhãn "Hotline:" bị đẩy lên một dòng riêng, dòng cao 65px thay vì 25px.

   Cách chữa là ĐỔI DỮ LIỆU chứ không phải đè thêm CSS: đưa cả "Hotline:
   0912.122.016" vào trong `<a>`. Dòng về lại một hàng, và cả hàng 40px thành
   vùng bấm — đúng cái mobile cần, thay vì một vùng bấm cao 20px. Chuỗi link
   "Hotline: 0912.122.016" cũng là chuỗi trình đọc màn hình đọc ra, tự mô tả
   hơn hẳn một dãy số trần.

   Rule dưới đây chỉ còn lo một việc: cho hai dòng đó TRÔNG RA là bấm được.
   `section.widget ul li a` tô `--ink-700` — cùng màu chữ thường, và ở khổ mobile
   KHÔNG CÓ HOVER nên không còn tín hiệu nào khác. Số điện thoại không ai biết
   chạm được thì vẫn chưa sửa xong.

   Cố ý lệch quy ước link của site (gạch chân trong suốt lúc nghỉ, hiện khi
   hover — xem chú thích dài ở `pattern.css`): hai dòng này GẠCH CHÂN NGAY LÚC
   NGHỈ. Lý do là chỗ duy nhất không có hover lại đúng là chỗ cần tín hiệu nhất.
   Màu đơn độc cũng không đủ theo WCAG 1.4.1.

   Độ đặc hiệu: rule đang tranh là
     html.potech-pattern section.widget ul li a          = (0,2,5)
     html.potech-pattern .widget_text ul li a[href^=…]   = (0,3,4)  ← thắng
   3 class hơn 2 class, không cần `!important` (rule gốc cũng không có).
   ========================================================================== */

html.potech-pattern .widget_text ul li a[href^="tel:"],
html.potech-pattern .widget_text ul li a[href^="mailto:"] {
  color: var(--link);
  font-weight: 600;
  text-decoration-color: currentColor;
}
html.potech-pattern .widget_text ul li a[href^="tel:"]:hover,
html.potech-pattern .widget_text ul li a[href^="mailto:"]:hover {
  color: var(--link-hover);
  background-color: var(--potech-blue-050);
}

/* ==========================================================================
   26 · Ô LIÊN HỆ Ở SIDEBAR TRANG DỊCH VỤ — gỡ ba khung lồng nhau
   ==========================================================================

   Ô này trông lạ vì nó là BA khung lồng trong nhau, mỗi khung một ngôn ngữ:

     1. `.page-template-template-dich-vu .widget_text` (app.css) —
        `padding: 17px 22px; border: 1px solid #404040`
     2. thanh xanh `<h3>` nằm THỤT VÀO 22px so với khung ngoài, không chạm mép
     3. `<ul>` lại có viền riêng (mục widget ở trên của file này)

   Đo được: khung ngoài rộng 261px, mọi thứ bên trong rộng 215px — tức 23px
   trắng bao quanh một thanh tiêu đề vốn phải là mép trên của thẻ. Thanh tiêu
   đề trôi lơ lửng giữa hộp thay vì đội đầu nó.

   Và nó lệch hẳn với widget menu ngay bên trên trong CÙNG sidebar: widget đó
   `padding: 0`, không viền ngoài, danh sách chạy hết bề ngang. Hai widget cạnh
   nhau, hai ngôn ngữ khác nhau — đó là cái mắt đọc ra là "kì".

   Sửa: về đúng MỘT thẻ. Viền ngoài mảnh, thanh xanh đội đầu chạm hai mép, thân
   có padding, hai dòng liên hệ tràn hết bề ngang ở đáy thẻ và ngăn nhau bằng
   một đường kẻ. Không còn khung nào lồng trong khung nào.

   `#404040` là màu ghim cứng ngoài hệ token — xám đậm hơn hẳn mọi đường kẻ khác
   trên trang. Đổi sang `--rule` (#DBDFE8), đúng màu viền mà danh sách của widget
   menu đang dùng, nên hai widget cùng một trọng lượng nét.

   Độ đặc hiệu: rule gốc `.page-template-template-dich-vu .widget_text` = (0,2,0);
   thêm `html.potech-pattern` thành (0,3,1) — hơn đúng một class, không cần
   `!important` (rule gốc không có).

   Hai dòng `<ul>` tràn mép bằng margin âm đúng bằng padding của thân. Padding
   dòng đổi 12px → `--space-4` (16px) để chữ trong dòng thẳng cột với đoạn văn
   phía trên; lệch 4px giữa hai khối chữ chồng nhau là thứ nhìn thấy được.
   ========================================================================== */

html.potech-pattern .page-template-template-dich-vu .widget_text {
  padding: 0;
  border: 1px solid var(--rule);
}

html.potech-pattern .page-template-template-dich-vu .widget_text .textwidget {
  padding: var(--space-4);
}

html.potech-pattern .page-template-template-dich-vu .widget_text .textwidget > p:last-child {
  margin-bottom: 0;
}

/* Tràn hết bề ngang thẻ, dính đáy. `border-top` thay cho cả khung viền cũ:
   danh sách đã nằm trong thẻ rồi, kẻ thêm một khung nữa là quay lại lỗi cũ. */
html.potech-pattern .page-template-template-dich-vu .widget_text ul {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
}

html.potech-pattern .page-template-template-dich-vu .widget_text ul li a {
  padding: 9px var(--space-4);
}

/* ==========================================================================
   27 · KHOẢNG TRỐNG GIỮA DẢI TIÊU ĐỀ VÀ NỘI DUNG
   ==========================================================================

   Đo trên trang dịch vụ: từ chân `<h1>` xuống phần tử nội dung đầu tiên là
   220px trống. Nó là hai khoảng cách CỘNG DỒN mà không ai định cộng:

     .page-header  padding-bottom  96px   (app.css: `padding: 6rem 0`)
     .section      padding-top     82px   (mục đầu file này: clamp(60px,6vw,96px))

   Nửa sau là do CHÍNH lớp pattern: CSS gốc để `.section{padding:60px 0}`, lớp
   này nâng lên clamp(60px, 6vw, 96px). Nâng padding của một section đứng giữa
   trang thì đúng — nhưng section ĐẦU TIÊN không đứng giữa hai khối nội dung,
   nó đứng ngay dưới một dải đã tự đệm 96px rồi.

   Chữa bằng selector anh em `+` chứ không hạ `.section` toàn cục: chỉ đúng chỗ
   hai khoảng cách chồng lên nhau mới thu lại, còn mọi section khác trên site
   giữ nguyên nhịp đã có.

   `.page-header` cũng hạ: dải cao 233px cho một dòng h1 42px, mà ảnh nền
   `pages-header.avif` đo được độ sáng trung bình 0.79 — gần trắng, nên dải đó
   đọc ra là TRỐNG chứ không phải là ảnh. Hạ xuống clamp(40px, 4vw, 64px) thì
   dải còn ~170px, vẫn đủ chỗ cho ảnh nền làm nền, không còn là một khoảng nghỉ
   dài trước khi trang bắt đầu.

   Ảnh hưởng cả 9 template dùng `template-parts/page-header.php` (404, archive
   portfolio, home, index, page, search, taxonomy portfolio, custom, dịch vụ) —
   cố ý: lỗi cộng dồn này có ở tất cả, sửa một chỗ mới đều tay. Đã đo lại trên
   nhiều trang, số ghi trong commit.

   Độ đặc hiệu:
     .page-header                              = (0,1,0)
     html.potech-pattern .page-header          = (0,2,1)  ← thắng
     html.potech-pattern .section              = (0,2,1)
     html.potech-pattern .page-header +.section= (0,2,2)  ← thắng
   ========================================================================== */

html.potech-pattern .page-header {
  padding: clamp(40px, 4vw, 64px) 0;
}

html.potech-pattern .page-header + .section {
  padding-top: clamp(28px, 3vw, 40px);
}

/* ==========================================================================
   28 · PHẦN TỬ ĐẦU CỦA CỘT NỘI DUNG KHÔNG ĐƯỢC CÓ MARGIN-TOP
   ==========================================================================

   Trang dịch vụ mở đầu bằng `<figure class="wp-block-image">`, mà
   `overrides.css` khai `.wp-block-image { margin-top: 2em }` — margin đó
   dùng để tách ảnh khỏi đoạn văn ĐỨNG TRƯỚC nó. Ở vị trí đầu tiên thì không
   có gì đứng trước, nên nó chỉ còn là 32px trống.

   Đo được: `.content` và `<aside>` cùng bắt đầu ở y=399 (đúng, cùng một
   hàng flex), nhưng `<figure>` bắt đầu ở y=431. Ảnh tụt 32px so với mép
   trên của ô menu bên trái — hai cột lệch nhau ở đúng chỗ mắt bắt đầu đọc.

   Không nhắm riêng `.wp-block-image`: quy tắc đúng là "phần tử đầu tiên
   của một khối nội dung không có khoảng trên", áp cho cả `h2`, `p`, `ul`
   nếu trang khác mở đầu bằng chúng. Đây là quy ước typography chuẩn chứ
   không phải vá cho một trang.

   Độ đặc hiệu: `.wp-block-image` = (0,1,0);
   `html.potech-pattern .content > *:first-child` = (0,2,1) — thắng, và
   không cần `!important` vì quy tắc gốc cũng không có.

   `.content` dùng ở 4 template: dich-vu, led-benefits, quy-trinh-lam-viec,
   why-us. Cả 4 đều là cột nội dung nên áp chung là đúng, không phải tác
   dụng phụ. */

html.potech-pattern .content > *:first-child {
  margin-top: 0;
}

/* ==========================================================================
   29 · BỎ MŨI ▸ TRƯỚC MỤC TRONG DROPDOWN THƯỜNG
   ==========================================================================

   `app.css` khai `.main_nav .nav-primary .dropdown-menu a::before
   { font-family: FontAwesome; content: "\f0da"; margin-right: 6px }` — một
   mũi tam giác đặt trước MỌI dòng thả xuống.

   Mega đã bỏ dấu này từ mục 19 (xem chú thích ở đó: "trong bảng nhiều dòng
   chỉ thêm nhiễu"). Lý do y hệt cũng đúng cho dropdown thường, mà ở đó nó
   còn tạo ra một sự lệch giữa hai nhánh cùng tầng: Sản phẩm không có mũi,
   Dịch vụ / Kiến thức / Giới thiệu thì có. Cùng một cấp menu, hai loại dấu
   hiệu.

   Mũi đó không mang thông tin: một hộp thả xuống nền trắng viền xanh đã tự
   nói nó là danh sách rồi, và không dòng nào trong đó dẫn tới cấp sâu hơn
   để mũi tên có nghĩa "còn nữa". Nó chỉ chiếm khoảng 14px đầu dòng và đẩy
   chữ khỏi mép trái của hộp.

   Chỉ bỏ `a::before`. `a span::before` (gạch chân chạy ngang khi hover) giữ
   nguyên cho dropdown thường — khác mega, ở đây nền KHÔNG đổi màu khi hover
   nên gạch chân là tín hiệu trạng thái duy nhất.

   Độ đặc hiệu: quy tắc gốc `.main_nav .nav-primary .dropdown-menu a::before`
   = (0,3,2); thêm `html.potech-pattern` = (0,4,2) — hơn đúng một class. */

html.potech-pattern .main_nav .nav-primary .dropdown-menu a::before {
  content: none;
}

/* ==========================================================================
   30 · BỎ GẠCH CHÂN HOVER TRÊN CÁC HÀNG LIÊN HỆ
   ==========================================================================

   `pattern.css` khai quy ước gạch chân cho link:
     html.potech-pattern a        { text-decoration: underline 1px transparent }
     html.potech-pattern a:hover  { text-decoration-color: currentColor }

   Quy ước đó viết cho LINK CHỮ NẰM TRONG DÒNG VĂN. Mọi `<a>` trong `.pt-lienhe`
   thì không phải loại đó — đo được cả ba (`.hl-nhom__so`, `.pt-kenh__dong`,
   `.pt-kenh__zalo`) đều `display: grid`, mỗi thẻ là một HÀNG có nhiều ô.

   Gạch chân trên một link grid không vẽ thành một đường: trình duyệt gạch dưới
   TỪNG cụm chữ con, nên hàng số bán hàng ra ba mảnh rời — dưới icon, dưới tên
   người, dưới số — ở ba vị trí và hai độ cao khác nhau. Trong modal gọi nhanh
   còn tệ hơn: tên nằm sát trái, số nằm sát phải, hai mảnh gạch cách nhau gần
   hết bề ngang hàng.

   Bỏ được vì hàng này KHÔNG mất tín hiệu hover: nó đã đổi nền (`--kn-hover`) và
   đổi màu số (`--kn-so-hover`). Gạch chân là tín hiệu thứ ba, thừa và vỡ hình.
   Khác dropdown thường ở mục 29 — ở đó nền không đổi nên gạch chân phải giữ.

   Nhắm `.pt-lienhe a` chứ không liệt kê ba class: trong khối này không có link
   chữ nào cả, mọi thẻ `a` đều là hàng. Đo lại nếu sau này thêm một link chữ vào
   đây thì phải tách selector.

   Độ đặc hiệu: `html.potech-pattern a` = (0,1,2);
   `html.potech-pattern .pt-lienhe a` = (0,2,2) — hơn đúng một class. */

html.potech-pattern .pt-lienhe a,
html.potech-pattern .pt-lienhe a:hover,
html.potech-pattern .pt-lienhe a:focus-visible {
  text-decoration: none;
}

/* ==========================================================================
   31 · ẢNH CÓ CHÚ THÍCH KHÔNG ĐƯỢC TRÀN KHỎI CỘT
   ==========================================================================

   Khi chèn ảnh kèm chú thích, WordPress ghi bề rộng THẬT của ảnh vào thuộc
   tính `style` của thẻ bọc:

     <figure class="wp-caption aligncenter" style="width: 1000px">

   Đây là hành vi cố hữu của `img_caption_shortcode()` trong core, không tắt
   được từ trình soạn thảo — người biên tập chỉnh kích cỡ ảnh bao nhiêu thì con
   số đó vào thẳng đây.

   `app.css` đã khai `.wp-caption > img { max-width: 100% }`, nhưng 100% của
   một cha đang bị khoá cứng 1000px vẫn là 1000px. Đo trên
   /san-pham/dau-noi-cap-noi-2-pin-chong-nuoc-m15-f-ip68-cho-den-ngoai-troi/:
   panel tab Mô tả rộng 783px, figure 1000px → tràn 217px sang phải, đè lên cột
   "Sản phẩm tương tự". Trang KHÔNG sinh thanh cuộn ngang
   (`documentElement.scrollWidth` không đổi) nên lỗi này không tự lộ ra, chỉ
   thấy khi nhìn.

   Chặn ở thẻ bọc chứ không ở ảnh: `max-width` khác thuộc tính với `width` nên
   thắng được `style` inline mà không cần `!important` — inline chỉ thắng khi
   so cùng một thuộc tính. Ảnh bên trong tự co theo, `height: auto` sẵn có của
   `app.css` giữ đúng tỉ lệ (đo lại sau khi áp: 783×783, tỉ lệ 1.000, caption
   rộng 783 khớp mép panel).

   Nhắm `.wp-caption` trần chứ không giới hạn trong `.entry-content`: class này
   chỉ do core sinh ra trong nội dung bài, và lỗi tràn thì ở panel tab, ở trang
   bài viết, hay ở trang tĩnh đều sai như nhau.

   Độ đặc hiệu: `html.potech-pattern .wp-caption` = (0,2,0). Không có quy tắc
   nào của theme khai `max-width` cho `.wp-caption` để phải tranh.
   ========================================================================== */

html.potech-pattern .wp-caption {
  max-width: 100%;
}

/* ==========================================================================
   32 · TRANG DỰ ÁN — CỘT ĐỌC CHO THÂN MÔ TẢ
   ==========================================================================

   `content-single-portfolio.php` đổ `the_content()` thẳng vào `.container`
   Bootstrap, không có lớp bó nào ở giữa. Đo trên
   /portfolio/du-an-chieu-sang-nha-may-van-ep-tekcom-.../ ở khổ 1745px:
   container 1220px, thân chữ 1196px, cỡ chữ 16px/1.55 → **154 ký tự một
   dòng**, gấp đôi ngưỡng đọc được. Mắt phải quét gần 1,2m ngang rồi tìm về
   đầu dòng sau; đó là cảm giác "khó đọc", không phải cỡ chữ.

   Áp đúng công thức Read đã dùng hai nơi khác trong dự án — bài viết đơn
   (mục 15) và trang tĩnh (`pattern.css .potech-prose`): cỡ chữ đọc 18px,
   dãn dòng 1.7, cột `72ch` tính theo chính 18px đó (≈732px) cộng 24px đệm
   của container. Không nghĩ ra con số mới: ba trang Read của site phải cùng
   một khổ, nếu không mỗi trang một nhịp đọc.

   Đo lại sau khi áp: cột 756px, **87 ký tự một dòng**. Vẫn trên chuẩn 65–75
   vì `ch` đo theo bề ngang chữ "0" trong khi chữ tiếng Việt trung bình hẹp
   hơn — cả ba trang Read đều lệch đúng như vậy. Siết thêm thì phải sửa cả
   mục 15 và `.potech-prose` cùng lượt, không sửa lẻ một trang.

   Bó ở `.pt-duan-doc` — thẻ bọc mà template dựng quanh CẢ cụm mô tả: nhãn
   "Mô tả chi tiết", khối "Sản phẩm sử dụng", đường kẻ, rồi `the_content()`.
   Bản đầu chỉ bó `[itemprop="text"]`, và cái giá lộ ra ngay: thân bài lùi vào
   giữa còn nhãn với khối sản phẩm vẫn dính lề trái ở x=268 — cùng một phần
   nội dung mà hai trục. Khai bề rộng ở một chỗ duy nhất cũng là cách giữ
   `ch` đúng nghĩa: `ch` giải theo cỡ chữ của chính phần tử khai nó, nên
   `calc(72ch + 24px)` chỉ ra 756px khi đứng cạnh `font-size: 18px`.

   Biểu đồ Google Charts và khối ước tính tiết kiệm nằm NGOÀI thẻ bọc, giữ
   nguyên khổ 1196px — chúng là bảng số, không phải chữ để đọc.

   Bảng phá khổ lên 880px từ 960px trở lên — cùng bậc 1 của `.potech-prose`.
   Bảng thông số trong bài dự án có 4 cái, nhét vào cột 756px thì cột số bị
   ép xuống dòng. Ảnh KHÔNG phá khổ (cũng theo `.potech-prose`): 10 ảnh
   `is-resized` sẵn 800px, co về 756 không mất gì.

   Độ đặc hiệu: `html.potech-pattern .single-portfolio .entry-content
   [itemprop="text"]` = (0,4,0). Không có quy tắc nào của theme khai
   `max-width` cho khối này để phải tranh — đã grep `public/css`.
   ========================================================================== */

html.potech-pattern .single-portfolio .entry-content .pt-duan-doc {
  font-size: 18px;
  line-height: 1.7;
  max-width: calc(72ch + 24px);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 960px) {
  html.potech-pattern .single-portfolio .entry-content [itemprop="text"] > figure.wp-block-table {
    width: 880px;
    max-width: none;
    margin-left: calc((100% - 880px) / 2);
    margin-right: calc((100% - 880px) / 2);
  }
}

/* ==========================================================================
   33 · CẶP NÚT ĐẦU TRANG DỰ ÁN
   ==========================================================================

   Hai việc trong một khối, cùng gốc: markup cũ mượn tiện ích của một phiên
   bản Bootstrap không còn ở đây.

   (a) BỀ RỘNG. `content-single-portfolio.php` bọc cặp nút trong
   `.hidden-sm-down` — cú pháp Bootstrap 4. Theme chạy Bootstrap 5: đo trên
   CSSOM ra **0 quy tắc** khớp class đó, nên cặp nút vẫn hiện ở 375px trái
   hẳn ý đồ. Cũng không thay được bằng `d-none d-md-block`: bản Bootstrap đã
   build trong `app.css` chỉ có `.d-none` và `.d-block` trần, không có biến
   thể breakpoint (`grep d-md-` ra 0) — dùng nó là ẩn vĩnh viễn.

   Nên tự khai, với tên nói đúng việc nó làm. Ngưỡng 768px = `md` của
   Bootstrap, giữ đúng ý đồ gốc "ẩn từ sm trở xuống". Mobile không mất lối
   liên hệ: nút nổi `.ctaMobileV2` mở cùng một modal.

   (b) THẺ. Nút thứ hai từng là `<a class="cta toggleCTA">` KHÔNG có `href`.
   JS bắt sự kiện click trên `.toggleCTA` để mở modal liên hệ — đã bấm thử
   trên desktop: modal mở và đóng đúng — nhưng `<a>` không `href` không nằm
   trong luồng tiêu điểm, nên người dùng bàn phím không bao giờ tới được nút
   này (đo: cả trang chỉ 8 phần tử tab tới được, không có nó). Đổi sang
   `<button type="button">`: đúng vai trò, có tiêu điểm và Enter/Space miễn
   phí, không cần thêm `role` hay `tabindex` tay.

   `.cta` của theme khai `border: none` sẵn nên nút không mọc viền hệ điều
   hành, nhưng `font-family` thì `<button>` KHÔNG kế thừa — thiếu dòng dưới
   là nút tụt về font mặc định của trình duyệt trong khi nút anh em bên cạnh
   vẫn Barlow. `cursor` cũng phải khai lại vì `<a>` có href mới tự là pointer.

   Độ đặc hiệu: `html.potech-pattern .cta` = (0,2,0) so với `.cta` (0,1,0)
   của `app.css` — thắng đúng một class, không cần `!important`.
   ========================================================================== */

html.potech-pattern .pt-cta-doi {
  display: none;
}

@media (min-width: 768px) {
  html.potech-pattern .pt-cta-doi {
    display: block;
  }
}

html.potech-pattern button.cta {
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   34 · "SẢN PHẨM SỬ DỤNG" — THẺ NGANG THAY LƯỚI BA CỘT
   ==========================================================================

   Template dựng khối này bằng `row` + `col-md-4`, tức một lưới ba cột. Đếm
   trên toàn bộ 51 dự án trong DB: **40 dự án gắn đúng 1 sản phẩm**, 10 gắn 2,
   đúng 1 dự án gắn 3. Lưới ba cột vì thế bỏ trống hai phần ba bề ngang ở gần
   như mọi trang — đo trên dự án TEKCOM: khối rộng 1196px, thẻ duy nhất chiếm
   407px, còn lại 789px trắng, cao 305px cho một cái ảnh và một dòng tên.

   Sửa ở hình dạng thẻ chứ không ở số cột, vì số cột nào cũng sai khi số phần
   tử là 1: thẻ dọc (ảnh trên, tên dưới, tên căn giữa) chỉ cân khi đứng thành
   hàng. Một mình nó là một cột lạc. Thẻ NGANG — ảnh 96px bên trái, tên bên
   phải căn trái — thì một cái cũng đủ đầy một dòng, hai cái xếp cạnh nhau
   vẫn cân.

   Lưới `auto-fit` chứ không `auto-fill`: `auto-fill` giữ lại các rãnh rỗng
   nên một thẻ vẫn chỉ chiếm nửa cột và lại hở; `auto-fit` xẹp rãnh rỗng, một
   thẻ trải hết cột đọc, hai thẻ chia đôi. Ngưỡng 320px là bề rộng tối thiểu
   để ảnh 96px + khoảng cách + hai dòng tên không vỡ.

   Cỡ chữ khai lại về `--fs-body`: thẻ bọc `.pt-duan-doc` đặt 18px cho cột
   đọc, nhưng khối này là tham chiếu phụ trợ, không phải văn bản để đọc — để
   nó phồng theo là nó tranh phần với chính bài viết.

   Vùng bấm: thẻ cao tối thiểu 96px, vượt xa ngưỡng 44px. Trạng thái hover và
   `:focus-visible` dùng chung một hình để bàn phím thấy đúng cái chuột thấy.

   Độ đặc hiệu: các class `pt-spdung__*` là mới, không tranh với ai. Riêng
   `.product-image` và `.product-title` là class cũ của theme —
   `html.potech-pattern .pt-spdung__the .product-title` = (0,3,0) thắng
   `.related-product .product-title` (0,2,0) trong `app.css`.
   ========================================================================== */

html.potech-pattern .single-portfolio .related-product {
  font-size: var(--fs-body);
  line-height: 1.55;
  margin-bottom: 32px;
}

html.potech-pattern .single-portfolio .related-product > p {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  margin-bottom: 12px;
}

html.potech-pattern .pt-spdung__ds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

html.potech-pattern .pt-spdung__the {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-1);
  background-color: #fff;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

html.potech-pattern .pt-spdung__the:hover,
html.potech-pattern .pt-spdung__the:focus-visible {
  border-color: var(--potech-blue);
  background-color: var(--ink-050);
}

html.potech-pattern .pt-spdung__the .product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

html.potech-pattern .pt-spdung__the .product-image img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

html.potech-pattern .pt-spdung__the .product-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--potech-blue);
  text-align: left;
}

/* =========================================================================
   35. Trang "Tính toán chiếu sáng" — trả lại lưới 2 cột cho bảng tính
   =========================================================================

   Triệu chứng người dùng báo: "nội dung trang đó cảm giác bị hẹp quá không
   cân đối lắm". Hai nguyên nhân riêng biệt, cái thứ hai mới là cái chính.

   1. Trang mặc `.container.potech-prose` — cột đọc 756px dành cho trang
      tĩnh chỉ-có-chữ. Nhưng trang này không có văn xuôi: đo được 24 thẻ
      `<input>`, 2 bảng, và thẻ `<p>` duy nhất cao 0px. Ứng dụng CHÍNH LÀ
      nội dung, nên khổ đọc là sai loại.

   2. **`.col-md-5` không tồn tại trong CSS đã build.** Đếm trong
      `public/css/*.css`: col-md-4/6/7/8/12 mỗi cái 1 quy tắc, còn
      col-md-1/2/3/5/9/10/11 đều bằng 0 — CSS được purge theo class xuất
      hiện trong source của theme, mà plugin `potech-ledcalculator` không
      nằm trong theme nên `.col-md-5` bị cắt.

      Hậu quả đo bằng CSSOM: `.col-md-7` nhận `width: 58.3333%`, còn
      `.col-md-5` không khớp quy tắc nào → là `div` block rộng 100% của
      hàng. Hai cột KHÔNG BAO GIỜ đứng cạnh nhau, ở mọi khổ đã thử
      (756/900/1000/1100/1196). Nới khổ một mình không sửa được gì — đó là
      lý do bảng tính trông vừa hẹp vừa lệch trục.

   Nới khổ mà không sửa lưới thì còn xấu hơn: đo ở khổ container đầy
   (1196px) thì ô nhập một giá trị phình lên 648px. Nên phải làm cả ba:
   khai `.col-md-5`, nới khổ, và chặn bề rộng ô nhập.

   Sau khi sửa (viewport 1536): app cao 757px thay vì 1269px, `.col-md-5`
   458px và `.col-md-7` 642px đứng cạnh nhau, ô nhập 220px.

   Phạm vi bám `body.tinh-toan-chieu-sang` — class slug do
   `inc/filters.php:60` gắn, đi theo git và không phụ thuộc post ID (ID
   lệch giữa local và production). */

@media (min-width: 768px) {
  html.potech-pattern .nhapLieu .col-md-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
}

@media (min-width: 1200px) {
  html.potech-pattern body.tinh-toan-chieu-sang .potech-prose {
    max-width: 1100px;
  }
}

html.potech-pattern .nhapLieu input {
  max-width: 220px;
}
/* =========================================================================
   36. Lưới sản phẩm — ô ảnh không được cao theo bề rộng cột
   =========================================================================

   Triệu chứng người dùng báo: "mỗi lần lỗi hình ảnh hay không load được
   hình ảnh thì sản phẩm sẽ bị dài ra".

   Ô ảnh đang chỉ được khoá TỈ LỆ, không khoá chiều cao — `overrides.css`
   khai `ul.products li.product a img { aspect-ratio: 1/1; object-fit:
   contain }`. Tỉ lệ 1:1 với bề rộng 100% nghĩa là chiều cao BẰNG bề rộng
   cột: màn hình càng rộng, ô ảnh càng cao, card càng dài. Đo ở viewport
   1306px: cột 266px, ô ảnh 237px, card 489px — ở khổ ~1820px của ảnh chụp
   thì ô ảnh thành ~355px.

   Khi ảnh 404, ô vẫn chiếm đúng chừng ấy chiều cao nhưng trống trơn, nên
   card trông "dài ra" rõ hơn hẳn so với card có ảnh lấp đầy.

   `max-height` chặn ngưỡng trên: ô ảnh không vượt 320px dù cột rộng bao
   nhiêu. Ở khổ đã đo (237px) quy tắc này không đổi gì.

   Độ đặc hiệu: overrides `ul.products li.product a img` = (0,2,3);
   quy tắc dưới = (0,3,4) → thắng, không cần `!important`.

   ĐÃ ĐO VÀ KHÔNG PHẢI NGUYÊN NHÂN: mất `width`/`height` trên thẻ `<img>`.
   Thử bỏ hai thuộc tính đó rồi nạp một ảnh 300x1200 — ô vẫn vuông 272px,
   vì `aspect-ratio` khai trong CSS không cần thuộc tính để bám.

   CÒN LẠI CHƯA GIẢI THÍCH ĐƯỢC: trong ảnh chụp, card cao hơn phần nội dung
   khoảng 330px. Ở cả local lẫn production (trạng thái khách) đo được khoảng
   dư chỉ 47px = padding. Ảnh chụp là trạng thái ĐĂNG NHẬP nên không đi qua
   HTML cache; chưa tái hiện được. Quy tắc này chặn phần đã chứng minh.

   Gốc rễ vẫn là lỗi dữ liệu: 10/12 ảnh trên trang đó trả 404 (file crop
   không còn trên đĩa dù metadata vẫn khai). Phải regenerate thumbnails;
   CSS chỉ giữ cho bố cục không vỡ theo. */

html.potech-pattern .woocommerce ul.products li.product a img,
html.potech-pattern .woocommerce .related.products li.product a img {
  max-height: 320px;
}

/* =========================================================================
   37. Trang chủ — khối "Giới thiệu về POTECH"
   =========================================================================

   Trước: bốn ô `col-md-6` xếp so le trong một `.row` — chữ, video VTC2,
   video HTV1, rồi khối chữ Top 10. Vì cột chữ cao hơn video một quãng, ô
   thứ ba rơi xuống hàng dưới và để lại một mảng trắng lớn bên phải, ngay
   giữa phần giới thiệu. Đó là khoảng trống trong ảnh chụp.

   Nay là hai cột thật: chữ bên trái, hai video xếp dọc bên phải. Khối chữ
   Top 10 đã bỏ khỏi trang chủ — nội dung đó trùng nguyên vẹn với mục
   "Giải thưởng và ghi nhận" của trang Giới thiệu, ở đó còn có cả ảnh chứng
   nhận. Thay bằng một nút dẫn sang trang ấy.

   `height="315"` cũ ép khung 610×315 = 1,94:1 trong khi video YouTube là
   16:9 — hai dải đen hai bên. `aspect-ratio: 16/9` cho khung khớp đúng
   khung hình. */

html.potech-pattern .pt-gt-video {
  margin: 0 0 24px;
}

html.potech-pattern .pt-gt-video:last-child {
  margin-bottom: 0;
}

html.potech-pattern .pt-gt-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-2);
  background-color: var(--ink-900);
}

html.potech-pattern .pt-gt-video figcaption {
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-muted);
}

html.potech-pattern .pt-gt-nut {
  margin-top: 24px;
}

/* Không mượn `.cta`: quy tắc gốc trong app.css tô nền vàng #fbbf09, đúng cho
   dải hero nhưng lạc giữa một khối chữ trên nền trắng. */
html.potech-pattern .pt-gt-nut a {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--potech-blue);
  border-radius: var(--radius-1);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--potech-blue);
  background-color: transparent;
  transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

html.potech-pattern .pt-gt-nut a:hover,
html.potech-pattern .pt-gt-nut a:focus-visible {
  color: #fff;
  background-color: var(--potech-blue);
}

/* =========================================================================
   38. Trang Giới thiệu — hàng ảnh giải thưởng
   =========================================================================

   Trước: bốn ảnh xếp dọc thành bốn khối rời, tỉ lệ chênh nhau rất xa — đo
   được 2,52 / 1,78 / 0,77 / 0,72. Ba ảnh cuối lại thuộc CÙNG một giải
   (sân khấu, giấy chứng nhận, cúp) nên người đọc gặp ba lần cùng một thông
   tin, mỗi lần một khổ khác. Riêng ba ảnh đó cao tổng 1.827px trong cột
   732px — dài hơn cả phần chữ của trang.

   Nay ba ảnh cùng giải nằm trong một `wp:gallery` ba cột, khung 4:3 đồng
   nhất. `object-fit: contain` giữ nguyên tỉ lệ thật của từng ảnh (giấy
   chứng nhận và cúp là ảnh dọc — `cover` sẽ cắt mất đầu hoặc chân cúp);
   nền trắng và viền mảnh cho ô trống hai bên ảnh dọc trông là khung chứ
   không phải lỗi.

   Ảnh giải 2014 vẫn đứng riêng: nó thuộc giải khác, và là ảnh ngang 2,52
   nên xếp cùng hàng với ảnh dọc sẽ lệch hẳn. */

html.potech-pattern .potech-prose .pt-giai-anh {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Quy tắc của WordPress core:
     .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
     { margin: 0; width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2) }
   `#individual-image` không tồn tại trong trang — nó ở đó chỉ để cộng một
   ID vào độ đặc hiệu: (1,3,1). Mọi selector không có ID đều thua, nên
   `width: 100%` viết bình thường bị bỏ qua và figure co về 89px trong ô lưới
   285px. Dùng lại đúng thủ thuật ấy — `:not(#pt)` cũng cộng một ID — để được
   (1,4,2) mà không phải với `!important`. */
html.potech-pattern .potech-prose .pt-giai-anh .wp-block-image:not(#pt) {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

html.potech-pattern .potech-prose .pt-giai-anh .wp-block-image img:not(#pt) {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  background-color: #fff;
}

/* pattern.css phá khổ MỌI `.wp-block-gallery` lên 1196px ở >=1280px — quy tắc
   đó viết cho trang Chứng chỉ, nơi lưới 40 ảnh LÀ nội dung chính. Hàng ba ảnh
   này chỉ minh hoạ cho một đoạn văn, lấy trọn khổ container thì nó át cả phần
   chữ. Giữ ở bậc 880px: mỗi ô ~285px, đủ đọc con dấu trên giấy chứng nhận. */
@media (min-width: 1280px) {
  html.potech-pattern .potech-prose .pt-giai-anh {
    width: 880px;
    margin-left: calc((100% - 880px) / 2);
    margin-right: calc((100% - 880px) / 2);
  }
}

/* ==========================================================================
   38. Trang chủ — không dựng bố cục các khối dưới màn hình đầu khi tải trang
   ==========================================================================
   `content-visibility: auto` cho trình duyệt bỏ qua style/bố cục/vẽ của khối
   chưa tới gần màn hình. Đo bằng puppeteer, CPU chậm 4 lần, 390px: tổng thời
   gian bố cục lúc tải ~1,4 s → ~0,8 s; CLS vẫn 0 kể cả khi cuộn hết trang.

   Từ khối thứ ba (`.potech-chuoi`) trở đi. Khối thứ hai `.potech-mang` bắt đầu ở
   y=704 (390px) / 476 (1280px) — đã nằm trong màn hình đầu, bọc vào chỉ làm nó
   vẽ trễ một nhịp.

   `contain-intrinsic-size` là chiều cao giữ chỗ khi khối chưa dựng, lấy từ số
   đo thật (mobile 390px / desktop 1280px) TRỪ padding dọc (120px / 153,6px) —
   giá trị này chỉ là phần nội dung, padding vẫn cộng thêm ngoài nó. Sai số chỉ làm thanh cuộn nhích khi
   khối dựng ra — xảy ra ngoài màn hình nên không tính CLS. `auto` để trình duyệt
   nhớ chiều cao thật sau lần dựng đầu. Thêm/bớt khối ở front-page.php thì cập
   nhật ở đây; trang không có anchor `#` nào trỏ vào các khối này. */
html.potech-pattern .home .wrap > .section ~ .section {
  content-visibility: auto;
}
html.potech-pattern .home .wrap > .section.potech-chuoi     { contain-intrinsic-size: auto 793px; }
html.potech-pattern .home .wrap > .section.featured-project { contain-intrinsic-size: auto 374px; }
html.potech-pattern .home .wrap > .section.intro            { contain-intrinsic-size: auto 1597px; }
html.potech-pattern .home .wrap > .section.numbers          { contain-intrinsic-size: auto 388px; }
html.potech-pattern .home .wrap > .section.testimonials     { contain-intrinsic-size: auto 1015px; }
html.potech-pattern .home .wrap > .section.partner          { contain-intrinsic-size: auto 448px; }
@media (min-width: 992px) {
  html.potech-pattern .home .wrap > .section.potech-chuoi     { contain-intrinsic-size: auto 308px; }
  html.potech-pattern .home .wrap > .section.featured-project { contain-intrinsic-size: auto 280px; }
  html.potech-pattern .home .wrap > .section.intro            { contain-intrinsic-size: auto 819px; }
  html.potech-pattern .home .wrap > .section.numbers          { contain-intrinsic-size: auto 100px; }
  html.potech-pattern .home .wrap > .section.testimonials     { contain-intrinsic-size: auto 459px; }
  html.potech-pattern .home .wrap > .section.partner          { contain-intrinsic-size: auto 188px; }
}

/* ==========================================================================
   39. Trang sản phẩm + khối liên hệ — không dựng bố cục phần dưới khi tải trang
   ==========================================================================
   Cùng cách với mục 38. Trên trang sản phẩm, lần dựng bố cục đầu tiên chặn FCP:
   đo trace, CPU chậm 4 lần, 412px, 2 sản phẩm × 5 lượt — lần dựng đầu
   1.334–1.441 ms → 725–817 ms, FCP 2.197–2.341 ms → 1.477–1.751 ms.
   Nặng nhất là panel mô tả (nội dung dài, 600+ phần tử) và `.related_products`.

   Bọc panel chứ không bọc `.woocommerce-tabs`: `ul.tabs` bên trong là sticky.
   Đã kiểm panel, `.related_products` và `#lienhe` không chứa phần tử
   fixed/sticky nào (ở 390px và 1280px; `#lienhe` kiểm trên 5 loại trang) —
   `content-visibility` kéo theo paint containment, sẽ giam phần tử fixed lại.

   Chiều cao giữ chỗ là phần nội dung (đã trừ padding), số đo thật trên 4 sản
   phẩm. Mô tả dài ngắn theo từng sản phẩm (815–7.036px ở 390px) nên chỉ là ước
   lượng; lệch thì thanh cuộn nhích khi khối dựng ra, ngoài màn hình nên không
   tính CLS. `auto` để trình duyệt nhớ chiều cao thật sau lần dựng đầu. */
html.potech-pattern .single-product .woocommerce-tabs .woocommerce-Tabs-panel,
html.potech-pattern .single-product .related_products,
html.potech-pattern #lienhe {
  content-visibility: auto;
}
html.potech-pattern .single-product .woocommerce-tabs .woocommerce-Tabs-panel { contain-intrinsic-size: auto 3600px; }
html.potech-pattern .single-product .related_products                          { contain-intrinsic-size: auto 3000px; }
html.potech-pattern #lienhe                                                    { contain-intrinsic-size: auto 970px; }
@media (min-width: 992px) {
  html.potech-pattern .single-product .woocommerce-tabs .woocommerce-Tabs-panel { contain-intrinsic-size: auto 3800px; }
  html.potech-pattern #lienhe                                                    { contain-intrinsic-size: auto 354px; }
}