con lam o luoi, bao ngoai anh va cell trong bo cuc cot. Do duoc tren trang chu: mot
rong lot vao trong
`.row` (flex) — khong khoa be rong thi no an tron 1220px va chiem tron mot
dong, vo hai; khoa 64ch thi no chi con 579px, chia doi dong voi cot video va
day cot do lech 32px, de lai mang trong ben trai.
Cac thanh phan cua trang mau tu khai bao be rong doc rieng. */
html.potech-pattern p {
margin: 0 0 var(--space-4);
text-wrap: pretty;
}
/* Eyebrow — nhãn chữ hoa giãn, đứng trên tiêu đề mục */
html.potech-pattern .eyebrow {
font-family: var(--font-text);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--potech-blue);
display: inline-flex;
align-items: center;
gap: 8px;
}
html.potech-pattern .eyebrow::before {
content: "";
width: 24px;
height: 2px;
background: var(--potech-red);
}
/* Chữ nhấn đỏ trong đoạn văn (thay inline #d71818 cũ của front-page — màu đỏ
thứ hai lệch token). -700 vì đây là chữ cỡ body trên nền trắng. */
html.potech-pattern .text-accent {
color: var(--potech-red-700);
}
html.potech-pattern .caps-label {
font-family: var(--font-text);
font-size: var(--fs-small);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
/* -700: 14px là chữ nhỏ theo WCAG, đỏ tươi trên trắng chỉ 4.38. */
color: var(--potech-red-700);
}
/* Số kỹ thuật: mã hàng, thông số, số điện thoại. Không đổi mặt chữ, chỉ bật
tabular figure để cột số thẳng hàng và số 0 giữ dáng oval thường. */
html.potech-pattern code,
html.potech-pattern kbd,
html.potech-pattern .mono,
html.potech-pattern .num {
font-family: var(--font-mono);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "zero" 0;
}
html.potech-pattern .num-inline {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "zero" 0;
}
/* Gạch chân link bằng `text-decoration`, KHÔNG bằng `border-bottom`.
Bản đầu ở đây dùng `border-bottom: 1px solid transparent` rồi hover đổi màu
viền. Cách đó chỉ đúng cho link CHỮ nằm trong đoạn văn. Với link dạng KHỐI —
card, mục menu, ô danh mục — `border-bottom` kẻ ngang HẾT BỀ RỘNG HỘP, không
liên quan gì tới chữ bên trong. Đã đếm trên /videos/: 64 trong 82 thẻ ``
của trang là khối rộng hơn 200px, tức toàn bộ số đó bị kẻ một vạch dài khi
hover. Đây là lỗi toàn cục chứ không phải lỗi của một trang.
Chỗ nhìn ra rõ nhất là card video: hover một card sinh ra BA đường kẻ —
hai dòng tiêu đề bị `text-decoration: underline` của plugin
(`video.css`: `.potech-video-card:hover .potech-video-name`), cộng một vạch
dài 281px kẻ ngang chân card do quy tắc `border-bottom` ở đây.
`text-decoration` gạch dưới CHỮ, không gạch dưới hộp: link khối bao ảnh không
sinh đường kẻ nào (không có line box nào để vẽ), link khối có chữ thì gạch
đúng phần chữ. Trên card video nó trùng khít với gạch của plugin nên vẽ một
lần — ba đường về còn một.
`text-decoration-color: transparent` lúc nghỉ để chuyển màu mượt như trước —
`border-color` đổi được thì `text-decoration-color` cũng đổi được.
`text-decoration-thickness: 1px` chốt cứng để bằng đúng vạch 1px cũ; `auto`
thả cho mặt chữ tự quyết nên nét dày mỏng khác nhau theo cỡ chữ.
`text-underline-offset: 0.18em` đẩy gạch xuống khỏi chân chữ. Đây là chuyện
khoảng thở, KHÔNG phải chuyện dấu dưới của tiếng Việt: đã đo
`text-decoration-skip-ink` là `auto` (mặc định), nên Chrome tự ngắt gạch chỗ
nét chữ đi xuống (ụ, Ậ) dù offset bao nhiêu. */
html.potech-pattern a {
color: var(--link);
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--dur-fast) var(--ease-out),
text-decoration-color var(--dur-fast) var(--ease-out);
}
html.potech-pattern a:hover {
color: var(--link-hover);
text-decoration-color: currentColor;
}
/* Vòng focus bàn phím. Bundle cũ của theme có `a, a:hover, a:focus { outline:
none }` (_global.scss) — giết chỉ báo focus trên MỌI link của site. Không
build lại được bundle ở đây nên khôi phục từ lớp pattern: (0,2,1) thắng
(0,1,1). Chỉ :focus-visible — chuột bấm không hiện vòng, bàn phím thì có.
Form field không nằm trong danh sách này: chúng đã có viền + glow riêng ở
phần form phía dưới, chồng thêm outline là thừa hai lớp. */
html.potech-pattern a:focus-visible,
html.potech-pattern button:focus-visible,
html.potech-pattern [role="button"]:focus-visible,
html.potech-pattern summary:focus-visible,
html.potech-pattern [tabindex]:focus-visible {
outline: 2px solid var(--potech-blue);
outline-offset: 2px;
}
/* main nhận focus từ skip link (tabindex="-1") — đích đến, không phải control;
vẽ viền quanh cả trang nội dung thì chỉ gây hoang mang. */
html.potech-pattern main:focus-visible,
html.potech-pattern main:focus {
outline: none;
}
/* Trên nền xanh đậm thì vòng xanh chìm mất — đổi sang trắng. Các bề mặt tối
của theme cũ (.header-carousel, .contact-info…) xử lý bên theme.css. */
html.potech-pattern .potech-footer a:focus-visible,
html.potech-pattern .potech-capability a:focus-visible {
outline-color: var(--paper);
}
/* Skip link — đứng đầu , ẩn cho tới khi nhận focus bàn phím. Nền
blue-900 + chữ trắng (8.95) nổi trên cả header trắng lẫn hero xanh. */
html.potech-pattern .potech-skip {
position: absolute;
top: 0;
left: 0;
z-index: 200;
padding: 12px 20px;
background: var(--potech-blue-900);
color: var(--fg-on-blue);
font-family: var(--font-text);
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
transform: translateY(-100%);
}
html.potech-pattern .potech-skip:focus,
html.potech-pattern .potech-skip:focus-visible {
transform: translateY(0);
outline: 2px solid var(--paper);
outline-offset: -6px;
}
html.potech-pattern hr {
border: 0;
border-top: 1px solid var(--rule);
margin: var(--space-7) 0;
}
html.potech-pattern .rule-accent {
border: 0;
height: 2px;
background: var(--potech-red);
width: 48px;
margin: var(--space-4) 0;
}
/* ==========================================================================
NÚT
========================================================================== */
html.potech-pattern .btn {
font-family: var(--font-text);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 11px 20px;
border-radius: var(--radius-1);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
html.potech-pattern .btn--lg { font-size: 14px; padding: 14px 24px; }
html.potech-pattern .btn--primary { background: var(--potech-blue); color: #fff; }
html.potech-pattern .btn--primary:hover { background: var(--potech-blue-700); color: #fff; }
html.potech-pattern .btn--primary:active { background: var(--potech-blue-900); }
html.potech-pattern .btn--ghost {
background: transparent;
color: var(--potech-blue);
border-color: var(--potech-blue);
}
html.potech-pattern .btn--ghost:hover { background: var(--potech-blue-050); color: var(--potech-blue); }
html.potech-pattern .btn--link {
background: transparent;
/* Cặp -700 → -800 thay vì đỏ tươi → -700: chữ nút 13px cần 4.5:1 ở MỌI
trạng thái (đỏ tươi 4.38 trượt), và -800 (7.80) đủ xa -700 để thấy hover. */
color: var(--potech-red-700);
border: 0;
padding-left: 0;
padding-right: 0;
}
html.potech-pattern .btn--link:hover { color: var(--potech-red-800); }
/* Nút là thì gạch chân của quy tắc `a:hover` phía trên phải tắt. Tắt bằng
`text-decoration-line: none` chứ không phải `border-bottom-color` nữa — quy
tắc `a` đã đổi sang `text-decoration`. */
html.potech-pattern a.btn:hover { text-decoration-line: none; }
html.potech-pattern a.btn--ghost:hover { border-color: var(--potech-blue); }
/* ==========================================================================
HEADER
========================================================================== */
html.potech-pattern .potech-header {
display: flex;
align-items: center;
gap: 28px;
padding: 18px 40px;
background: #fff;
border-bottom: 1px solid var(--rule);
position: sticky;
top: 0;
z-index: 10;
}
html.potech-pattern .potech-header__brand img { height: 40px; display: block; }
html.potech-pattern .potech-header__nav { display: flex; gap: 28px; margin-left: auto; }
html.potech-pattern .potech-header__link {
font-family: var(--font-text);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-700);
border-bottom: 2px solid transparent;
padding: 6px 0;
}
html.potech-pattern .potech-header__link:hover { color: var(--potech-blue); text-decoration-line: none; }
html.potech-pattern .potech-header__link.is-active {
color: var(--potech-blue);
border-bottom-color: var(--potech-red);
}
/* ==========================================================================
HERO
========================================================================== */
html.potech-pattern .potech-hero {
position: relative;
overflow: hidden;
padding: 96px 40px;
background: #fff;
border-bottom: 1px solid var(--rule);
}
html.potech-pattern .potech-hero__bg {
position: absolute;
right: -120px;
bottom: -120px;
width: 720px;
opacity: 0.4;
mix-blend-mode: multiply;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
html.potech-pattern .potech-hero__inner {
max-width: var(--container);
margin: 0 auto;
position: relative;
}
/* ---------- THANH NĂNG LỰC ---------- */
html.potech-pattern .potech-capability {
max-width: var(--container);
margin: -40px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--potech-blue);
color: #fff;
position: relative;
z-index: 2;
}
html.potech-pattern .potech-capability__cell {
padding: 28px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
}
html.potech-pattern .potech-capability__cell:last-child { border-right: 0; }
html.potech-pattern .potech-capability__cell::before {
content: "";
position: absolute;
left: 0;
top: 28px;
bottom: 28px;
width: 2px;
background: var(--potech-red);
}
html.potech-pattern .potech-capability__cell:first-child::before { display: none; }
html.potech-pattern .potech-capability__value {
font-family: var(--font-display);
font-weight: 700;
font-size: 36px;
line-height: 1;
}
html.potech-pattern .potech-capability__unit {
font-size: 14px;
font-weight: 500;
opacity: 0.7;
letter-spacing: 0.04em;
text-transform: uppercase;
}
html.potech-pattern .potech-capability__label {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-on-blue-muted);
margin-top: 8px;
}
/* ==========================================================================
SECTION
========================================================================== */
html.potech-pattern .potech-section {
max-width: var(--container);
margin: 96px auto;
padding: 0 40px;
}
html.potech-pattern .potech-section__head { margin-bottom: 40px; max-width: 56ch; }
html.potech-pattern .potech-section__head h1,
html.potech-pattern .potech-section__head h2 { margin-top: 12px; }
/* ==========================================================================
LƯỚI + THẺ SẢN PHẨM
========================================================================== */
html.potech-pattern .potech-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
html.potech-pattern .potech-card {
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius-2);
cursor: pointer;
transition: box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
overflow: hidden;
}
html.potech-pattern .potech-card:hover { box-shadow: var(--shadow-3); }
html.potech-pattern .potech-card.is-featured { border-left: 2px solid var(--potech-blue); }
html.potech-pattern .potech-card__image {
background: var(--ink-050);
aspect-ratio: 4 / 3;
display: block;
width: 100%;
object-fit: contain;
}
html.potech-pattern .potech-card__body { padding: 18px; }
html.potech-pattern .potech-card__sku {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-subtle);
letter-spacing: 0.04em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
html.potech-pattern .potech-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.1;
text-transform: uppercase;
color: var(--ink-900);
margin: 6px 0 14px;
}
html.potech-pattern .potech-card__title a { color: inherit; border-bottom: 0; }
html.potech-pattern .potech-card:hover .potech-card__title a { color: var(--potech-blue); }
html.potech-pattern .potech-card__specs {
display: flex;
flex-wrap: wrap; /* giá trị thuộc tính dài (dải điện áp, tên chip) xuống dòng thay vì tràn */
gap: 6px 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
border-top: 1px solid var(--rule);
padding-top: 12px;
font-variant-numeric: tabular-nums;
}
/* Tên sản phẩm POTECH thật dài tới 4 dòng, SKU có thể là chuỗi liền không
khoảng trắng — bẻ được từ thay vì đẩy thẻ rộng ra khỏi lưới. */
html.potech-pattern .potech-card__title,
html.potech-pattern .potech-card__sku {
overflow-wrap: break-word;
min-width: 0;
}
/* ==========================================================================
FOOTER
========================================================================== */
html.potech-pattern .potech-footer {
background: var(--bg-deep);
color: #fff;
padding: 64px 40px 28px;
margin-top: 96px;
}
html.potech-pattern .potech-footer__row {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
}
/* Trên blue-900 thì cả đỏ tươi (3.33) lẫn -700 đều chìm — dùng bậc sáng -300 (6.31). */
html.potech-pattern .potech-footer__row .caps-label { color: var(--potech-red-300); }
html.potech-pattern .potech-footer a { color: #fff; }
html.potech-pattern .potech-footer a:hover { color: var(--potech-red-300); }
html.potech-pattern .potech-footer__bottom {
max-width: var(--container);
margin: 48px auto 0;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
font-size: 12px;
color: var(--ink-300);
letter-spacing: 0.04em;
}
/* ==========================================================================
TRANG SẢN PHẨM
========================================================================== */
html.potech-pattern .potech-product {
max-width: var(--container);
margin: 40px auto 96px;
padding: 0 40px;
}
html.potech-pattern .potech-product__crumbs {
display: flex;
gap: 8px;
align-items: center;
font-size: 12px;
color: var(--fg-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 32px;
}
html.potech-pattern .potech-product__crumbs a { color: var(--potech-blue); }
html.potech-pattern .potech-product__sep { color: var(--ink-300); }
html.potech-pattern .potech-product__grid {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 48px;
align-items: start;
}
html.potech-pattern .potech-product__image {
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius-2);
padding: 24px;
}
html.potech-pattern .potech-product__sku {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-subtle);
letter-spacing: 0.04em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
html.potech-pattern .potech-product__pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 24px;
}
html.potech-pattern .pill {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
html.potech-pattern .pill--blue { background: var(--potech-blue); color: #fff; }
html.potech-pattern .pill--ghost {
background: var(--potech-blue-050);
color: var(--potech-blue);
border: 1px solid var(--potech-blue-100);
}
html.potech-pattern .potech-product__specs { margin-top: 64px; }
/* ==========================================================================
BẢNG THÔNG SỐ
========================================================================== */
html.potech-pattern .potech-spec {
width: 100%;
border-collapse: collapse;
background: #fff;
/* `!important` ở đây là bắt buộc, không phải lười. `public/css/overrides.css`
của theme có `table { border: #e8e8e8 !important }` — shorthand thiếu
`