/*
 * Luật áp cho MỌI trang.
 *
 * Chỉ để những thứ thuộc về khung chung của site — phần lặp lại ở đầu và cuối
 * mọi trang. Nội dung riêng của từng loại trang thì ở `home.css`,
 * `product-card.css`, `product-page.css`, `blog-card.css`.
 *
 * @package hkt-simple-child
 */

/* --- Gộp các dải màu tối về một màu ------------------------------------- */

/* ĐO ĐƯỢC trên trang chủ 09/09/2026 — bốn vùng tối, bốn màu khác nhau:
 *
 *   y=88    cao 620   ảnh gần đen        banner
 *   y=2028  cao 546   #0e2a47            mục INDUSTRY
 *   y=3713  cao 223   #144d85            dải CTA "Global Total Tape…"
 *   y=3936  cao 575   #1b2024            chân trang
 *
 * Một dải tối giữa trang là hợp lý: trang cao 4567px cần chỗ ngắt chương, và
 * INDUSTRY là mục điều hướng nên đáng được nhấn. Vấn đề không nằm ở chỗ
 * INDUSTRY tối, mà ở chỗ KHÔNG MÀU NÀO GIỐNG MÀU NÀO — mắt đọc ra bốn khối
 * rời rạc chứ không phải một nhịp.
 *
 * `#0e2a47` và `#144d85` là hai xanh đậm gần nhau nhưng không bằng nhau, đó là
 * kiểu lệch khó chịu nhất: đủ giống để tưởng là một màu, đủ khác để thấy sai.
 *
 * Gộp hai cái đó về cùng `#0e2a47`. Chân trang giữ đen trung tính — chân trang
 * theo quy ước là một khối riêng, không tính vào nhịp nội dung.
 *
 * Dải này nằm trong `footer.php` nên có mặt ở MỌI trang, vì vậy luật phải nằm
 * trong file nạp toàn site chứ không phải `home.css`.
 *
 * `!important` vì màu gốc do theme cha sinh ra — đã grep toàn bộ CSS của child
 * và không có luật `.tape-form` nào, nên không xác định được độ ưu tiên bên
 * kia để đối chiếu. */
/* CẬP NHẬT 10/09/2026 — gộp về một màu là đúng, gộp thành BẰNG NHAU thì hơi
 * quá tay.
 *
 * Sau khi gộp, dải này và mục INDUSTRY dùng đúng một mã màu. Hết lệch, nhưng
 * sinh ra chuyện khác: trang có hai khối tối y hệt nhau, nên không khối nào
 * được ưu tiên — trong khi dải này là ô TÌM KIẾM SẢN PHẨM, tức một việc để
 * làm, còn INDUSTRY là nội dung để đọc.
 *
 * Nên giữ nguyên điểm xuất phát #0e2a47 (đúng màu của INDUSTRY, để hai khối
 * vẫn thuộc cùng một họ) rồi chuyển dần sang #0b5cab — xanh thương hiệu, cũng
 * đúng màu của nút "EXPLORE MORE" trên banner. Người xem đọc ra: chỗ nào sáng
 * dần lên là chỗ bấm được.
 *
 * Chuyển sắc theo 120deg chứ không 90deg: dải chỉ cao 223px nhưng rộng cả màn
 * hình, nên nghiêng nhẹ cho phần sáng rơi vào góc phải — đúng chỗ đặt ô tìm
 * kiếm, còn khẩu hiệu bên trái vẫn nằm trên nền đậm nhất và giữ nguyên độ
 * tương phản 14.8:1.
 *
 * Khai `background` HAI LẦN, màu đặc trước rồi gradient sau, chứ không phải
 * `background-color` rồi `background`. Lối thứ hai sai: `background` là thuộc
 * tính gộp nên nó đặt lại `background-color` về trong suốt, tức chính dòng
 * gradient xoá mất nền lùi mình vừa đặt. Viết như dưới thì trình duyệt nào
 * không dựng được gradient sẽ bỏ qua dòng thứ hai và giữ màu đặc. */
.tape-form {
	background: #0e2a47 !important;
	background: linear-gradient(120deg, #0e2a47 0%, #0e2a47 42%, #0b5cab 100%) !important;
}

/* `margin-top: 50px` của theme cha nằm NGOÀI cái nền vừa đặt, nên nó vẽ ra một
 * vạch trắng 50px ngay phía trên dải tối. Lúc dải này còn là một khối màu đặc
 * giữa hai khối cũng gần trắng thì không ai để ý; đổi sang chuyển sắc là nó
 * thành một đường seam chạy ngang màn hình.
 *
 * Bỏ margin chứ không bỏ padding: `padding-top: 50px` bên trong vẫn giữ nguyên
 * khoảng thở, chỉ khác là giờ khoảng thở ấy có màu. Dải này là dải tràn viền
 * nên ở mọi trang nó đều nên dính liền vào phần ngay trên. */
.tape-form {
	margin-top: 0 !important;
}

/* --- Thanh cuộn bị tô sọc xanh trên nền đỏ ------------------------------- */

/* `style.css:144-158` (bộ giao diện mua sẵn) tô thanh cuộn của toàn site:
 *
 *   body::-webkit-scrollbar-track { background: rgba(252, 0, 18, 0.1) }
 *   body::-webkit-scrollbar-thumb { background-color: var(--theme-color);
 *     background-image: linear-gradient(45deg, rgba(255,255,255,.3) 25%, …) }
 *
 * Tức: rãnh màu ĐỎ 10%, con trượt màu xanh thương hiệu kèm SỌC CHÉO trắng.
 * Trên nền banner tối nó hiện thành một vệt xanh sọc ở mép phải — trông như
 * lỗi hiển thị chứ không như thanh cuộn.
 *
 * Không có lý do gì để thanh cuộn có sọc, và tuyệt đối không có lý do gì để
 * rãnh của nó màu đỏ trên một site không dùng màu đỏ ở đâu cả. Đưa về màu
 * trung tính trong bảng màu, bỏ sọc.
 *
 * Firefox không hiểu `::-webkit-scrollbar` nên khai thêm `scrollbar-color`. */
body {
	scrollbar-width: thin;
	scrollbar-color: #b7c6d6 transparent;
}

body::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body::-webkit-scrollbar-track {
	background: transparent;
	box-shadow: none;
	-webkit-box-shadow: none;
}

body::-webkit-scrollbar-thumb {
	background-color: #b7c6d6;
	background-image: none;
	border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
	background-color: #0b5cab;
}

/* --- Vì sao rãnh thanh cuộn phải TRONG SUỐT ------------------------------
 *
 * Bản sửa đầu chỉ đổi rãnh từ đỏ sang xám nhạt `#eef2f6`. Vẫn còn một VẠCH DỌC
 * chạy suốt chiều cao ở mép phải — trên nền banner sáng nó lộ rõ hơn cả lúc
 * nền tối.
 *
 * Đã kiểm bằng cách tắt hẳn thanh cuộn (`overflow: hidden` trên
 * `documentElement`) rồi soi lại cùng vùng ảnh: vạch BIẾN MẤT. Nên nó đúng là
 * rãnh thanh cuộn chứ không phải phần tử nào của trang.
 *
 * Rãnh trong suốt thì chỉ còn con trượt hiện lên khi cần — giống thanh cuộn
 * mặc định của trình duyệt hiện đại, và không để lại dải màu chạy dọc màn hình.
 */

/* --- Helping Center: mục chuyển đổi, nhưng đang nhạt nhất mọi trang ------ */

/* KHỐI NÀY CÓ MẶT Ở MỌI TRANG, và tôi suýt bỏ sót điều đó.
 *
 * Bản đầu tôi viết luật này trong `home.css` kèm tiền tố `body.home`, vì trên
 * trang chủ nó là một khối Elementor. Deploy xong mở `/product/` mới thấy khối
 * y hệt ở đó mà không được kẻ một nét nào — tức là tôi vừa tạo ra chuyện cùng
 * một khối trông khác nhau tuỳ trang, tệ hơn cả lúc chưa sửa.
 *
 * Lý do: `footer.php:23-25` in `[tape_support]` ở MỌI trang TRỪ trang chủ; còn
 * trang chủ có bản riêng dựng bằng Elementor. Hai nguồn, một giao diện.
 *
 * Nên luật phải nằm ở `site.css` và không được gắn `body.home`.
 *
 * VÌ SAO ĐÁNG CHĂM: đây là khối duy nhất dẫn tới cả HAI mục tiêu kinh doanh
 * trong CLAUDE.md — "Contact us now" / "Technical Support" (yêu cầu báo giá)
 * và "Documents Download" (tải TDS/MSDS). Vậy mà nó đang là khối nhạt nhất:
 *
 *   - tiêu đề "Helping Center" là h2 duy nhất không có gạch nhấn như các mục
 *     khác của trang chủ — nhìn ra ngay là một mục lạc kiểu
 *   - thẻ: bo góc 0, không viền, chỉ một vệt bóng 40px rất nhạt
 *   - không có phản hồi nào khi rê chuột, dù cả ba thẻ đều bấm được
 *
 * Trên trang chủ, nền của khối này được giữ TRẮNG có chủ ý: sau dải navy
 * 546px, mắt cần một chỗ nghỉ, và khối chỉ có 3 thẻ nên không dính lỗi
 * thẻ-trắng-trên-nền-trắng như mục APPLICATIONS với 28 thẻ. Nhấn bằng chính
 * cái thẻ, không bằng nền. */

.form-tape h2 {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 34px;
	color: #0e2a47;
}

.form-tape h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #08A6D9, #0b5cab);
}

/* Ngoài trang chủ, khối này do `footer.php` in ra nên không có khung Elementor
 * bọc ngoài để tạo khoảng đệm. Trên `/product/` nó dính sát ngay dưới hàng
 * phân trang. Chỉ thêm đệm cho những trang đó, tránh cộng dồn với 64px mà
 * khung Elementor đã cho ở trang chủ. */
body:not(.home) .form-tape {
	margin-top: 56px;
}

.tape-support-item {
	border: 1px solid #dde5ee;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(1, 19, 60, .06);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	cursor: pointer;
}

.tape-support-item:hover {
	transform: translateY(-4px);
	border-color: #08A6D9;
	box-shadow: 0 12px 28px rgba(11, 92, 171, .18);
}

/* Vòng tròn biểu tượng: cyan phẳng -> chuyển sắc cùng họ, thêm quầng sáng để
 * nó là điểm nhìn của khối thay vì một chấm màu.
 *
 * GHI CHÚ VỀ CÁCH KIỂM: `getComputedStyle` báo `background-image: none` cho
 * đúng luật này dù ảnh chụp cho thấy chuyển sắc hiện rõ. Phần tử có
 * `transition` thì giá trị tính toán đọc ra không tin được — đã gặp đúng
 * chuyện này với lớp phủ màu của banner hôm 09/09. Kiểm bằng ảnh chụp. */
.tape-support-item .icon {
	background: linear-gradient(135deg, #08A6D9 0%, #0b5cab 100%) !important;
	box-shadow: 0 6px 18px rgba(8, 166, 217, .30);
	transition: transform .18s ease;
}

.tape-support-item:hover .icon {
	transform: scale(1.06);
}

/* Thẻ thứ ba bọc nội dung trong thẻ `a`; hai thẻ kia dùng `data-toggle`. Bỏ
 * gạch chân và giữ nguyên màu chữ để ba thẻ trông như nhau. */
.tape-support-item > a {
	display: block;
	color: inherit;
	text-decoration: none;
}