/* ===================================================================
 * NỀN MÀ BẢN THIẾT KẾ VỐN VẼ LÊN
 *
 * Anh em sinh đôi của `00-de-bricks.css`, nhưng ngược chiều:
 *   de-bricks     trả thẻ trần về MẶC ĐỊNH TRÌNH DUYỆT, gỡ ý kiến của Bricks.
 *   nen-thiet-ke  đặt lại những gì ELEMENTOR từng đặt mà bản thiết kế im lặng
 *                 dựa vào.
 *
 * Vì sao cần. CSS của siteup.vn chỉ khai những thuộc tính nó quan tâm. Mọi
 * thuộc tính nó im lặng đều rơi vào tay nền bên dưới - mà nền ấy suốt thời
 * Elementor là bộ đặt lại của Elementor, không phải mặc định trình duyệt. Bỏ
 * Elementor là mất nền, và mất im lặng: mã khớp từng thẻ từng lớp, không phép
 * so cấu trúc nào đỏ, chỉ hình vẽ ra là khác.
 *
 * Ví dụ đắt nhất: CSS thiết kế có `a { text-decoration: underline }` ở thẻ
 * trần, đúng cho chữ trong bài. Elementor đặt `a { text-decoration: none }`
 * nên nút và menu không gạch chân. Bricks đặt `:where(a) { ... none }` - độ cụ
 * thể BẰNG KHÔNG, thua luật thẻ trần - nên MỌI liên kết trên site thành gạch
 * chân, kể cả nút.
 *
 * CÁCH ĐO LẠI KHI CẦN. Không đoán, đo:
 *   1. Mở cùng một trang ở hai bản (bản Elementor đóng băng và bản Bricks).
 *   2. Chèn vào mỗi bản một thẻ trần của từng loại, đặt ngoài khung nhìn.
 *   3. So `getComputedStyle` của hai bên, liệt kê thuộc tính khác nhau.
 * Bảng dưới đo ngày 18/10/2026: 16 thẻ, 44 thuộc tính lệch. Bỏ qua các
 * thuộc tính phụ thuộc nội dung thử (chiều rộng của th, td, legend, label,
 * img) vì chúng đổi theo chữ chứ không phải theo CSS.
 *
 * Nạp SAU de-bricks, TRƯỚC CSS của mẫu, để mẫu vẫn đè lên được như thường.
 *
 * Luật về thẻ `a` KHÔNG ở đây mà ở `12-sau-cung.css`: CSS của mẫu cũng khai
 * `a` ở thẻ trần, cùng độ cụ thể, nên đặt sớm là thua theo thứ tự nạp.
 * =================================================================== */

/* Danh sách: Elementor bỏ lề trên dưới. Bản thiết kế dựa vào đó để tự đặt
   khoảng cách bằng gap của khối cha. */
ul,
ol {
	margin-top: 0;
	margin-bottom: 0;
}

/* Nút trần. Bản thiết kế chỉ khoác dáng lên nút CÓ LỚP; nút trần hiếm, nhưng
   để đúng nền thì vẫn phải đặt. */
button {
	padding: 13px 20px;
	color: #fff;
	background-color: #1e2226;
	border-width: 1px;
}

/* Ô nhập. Fluent Forms in ra thẻ trần, nên ba luật này chạm vào mọi biểu mẫu. */
input {
	padding: 12px 14px;
	font-size: 16px;
	line-height: 1.55;
	color: #1e2226;
}

select {
	display: block;
	padding: 8px 16px;
	width: 100%;
}

textarea {
	padding: 12px 14px;
	min-height: 0;
}

label {
	display: inline-block;
	line-height: 1;
}

/* Chữ nhỏ: Elementor để 0.8em, trình duyệt để 0.8333em. Chênh nửa điểm ảnh,
   nhưng nhân lên vài trăm chỗ thì dòng chữ trượt và ảnh chụp lệch. */
/* KHÔNG khai `line-height` ở đây. Phép đo so `getComputedStyle` của hai bản
   nên thấy 1.55 - nhưng đó là giá trị THỪA HƯỞNG từ body, không phải thứ
   Elementor đặt riêng cho `small`. Khai thành luật là chặn đường thừa hưởng:
   `small` trong thẻ giá (`.su-tpl__price`, dòng 15px/1.2) nhảy về 1.55, hộp
   giá cao 19px thành 25px, mỗi thẻ mẫu dài thêm 6px và lưới chín thẻ dài
   thêm 17px. Dính 19/10/2026. */
small {
	font-size: 0.8em;
}

figcaption {
	line-height: 1.4;
	color: #333;
}

table {
	width: 100%;
	margin-bottom: 15px;
	font-size: 0.9em;
	line-height: 1.55;
}

hr {
	margin-top: 8px;
	margin-bottom: 8px;
	border-width: 1px;
	box-sizing: content-box;
}

/* Hộp và widget: Elementor cắt chuỗi cỡ tối thiểu.
   Hai luật nền `.e-con{min-width:0}` và `.e-con .elementor-widget{min-width:0}`
   làm mọi hộp và widget co được hẹp hơn nội dung. Mặc định của flex là
   `min-width:auto`, tức không co dưới cỡ tối thiểu của chữ - nên bỏ hai luật
   này là các cột lưới chia theo chữ chứ không theo khung, và chân trang lệch
   167px. Bản thiết kế có chỗ cố ý gỡ lại (`.su-ft .hop.su-ft__cot`), nên đặt
   ở tầng nền để mẫu còn đè lên được. Đo 19/10/2026. */
.hop {
	min-width: 0;
}

.hop [data-ten] {
	min-width: 0;
}

/* Widget không bao giờ hẹp hơn hộp của nó.
   Elementor khai `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`
   với độ cụ thể (0,4,1), đè mọi giới hạn bề rộng mà bản thiết kế đặt theo lớp.
   Nên `.su-ft__tag{max-width:22ch}` và `.su-ft__sub{max-width:56ch}` của bộ
   chuẩn KHÔNG có hiệu lực trên site đang chạy - đo trên bản đóng băng: cả hai
   ra `max-width:100%`. Bỏ luật này là hai khối ấy co về 578 và 565px, dòng
   khẩu hiệu chân trang gãy làm hai và cả trang dài thêm 49px.
   Chuẩn để so là bản ĐANG CHẠY, nên trả lại đúng cái Elementor từng làm.
   Đo 19/10/2026. */
.hop > [data-ten]:not(.hop) {
	max-width: 100%;
}

/* Lề dưới của vỏ widget: Elementor xoá sạch.
   `.e-con .elementor-widget.elementor-widget{margin-block-end:0}` - độ cụ thể
   (0,3,0), thắng mọi luật bám lớp của bản thiết kế. Nên những luật kiểu
   `.su-ft__mark{margin:0 0 -.06em}` của bộ chuẩn, vốn viết cho THẺ CHỮ, không
   chạm được vào vỏ widget thời Elementor.

   Bỏ luật này thì lề âm ăn hai lần: chữ "SiteUp" khổng lồ ở chân trang kéo cả
   chân trang ngắn đi 13px trên MỌI trang. Đo 19/10/2026. */
.hop [data-ten]:not(.hop) {
	margin-block-end: 0;
}