/* =========================================================
   TC CREDIT – style.css (CSS thuần)
   Màu & font lấy từ Figma "TC Credit"
   ========================================================= */
:root {
  --mau-chinh: #e60012;
  --mau-chinh-dam: #b3000e;
  --mau-vang: #ffb800;
  --mau-chu: #1a1a1a;
  --mau-phu: #555555;
  --mau-mo: #8a8a8a;
  --mau-goiy: #9a9a9a;
  --mau-nen: #f5f5f5;
  --mau-nen-toi: #111111;
  --mau-the-toi: #1c1c1c;
  --mau-vien: #e5e5e5;
  --mau-vien-dam: #d6d6d6;
  --mau-hong: #fff0f1;
  --mau-zalo: #0068ff;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --chuyen: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--mau-chu); background: #fff; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--chuyen), background-color var(--chuyen), border-color var(--chuyen), opacity var(--chuyen); }
img { display: block; max-width: 100%; height: auto; color: transparent; font-size: 0; }
img[src=""] { background: #c8c8c8; content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
iframe { display: block; border: 0; }
:focus-visible { outline: 2px solid var(--mau-vang); outline-offset: 2px; }

/* Hiệu ứng AOS: nếu thư viện không chạy thì vẫn hiện nội dung */
html:not(.aos-san) [data-aos] { opacity: 1 !important; transform: none !important; }

/* Khung nội dung: 1300px + 2 x 20px */
.tccredit-chung-khung { max-width: 1340px; padding: 0 20px; margin: 0 auto; }

/* Ẩn nhãn form nhưng vẫn đọc được bằng trình đọc màn hình */
.tccredit-header-timkiem label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tiêu đề section ---------- */
.tccredit-chung-kicker p { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 20px; color: var(--mau-chinh); }
.tccredit-chung-kicker p::before { content: ""; width: 32px; height: 4px; background: currentColor; flex: none; }
.tccredit-chung-kickertrang p { color: #fff; }
main h2 { font-size: 40px; line-height: 1.28; font-weight: 700; color: var(--mau-chu); margin-top: 20px; }

/* ---------- Nút viền (góc vát phải dưới) ---------- */
.tccredit-chung-nutvien a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 32px; font-size: 16px; font-weight: 700; color: var(--mau-chu);
  border: 1.5px solid var(--mau-chu);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.tccredit-chung-nutvien a::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
.tccredit-chung-nutvien a:hover { background: var(--mau-chu); color: #fff; }

/* Nút gửi form */
.tccredit-chung-nutgui input[type="submit"] {
  -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit;
  width: 100%; height: 56px; border: 0; background: var(--mau-chinh); color: #fff; font-size: 16px; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background-color var(--chuyen);
}
.tccredit-chung-nutgui input[type="submit"]:hover { background: var(--mau-chinh-dam); }

/* Ô đồng ý */
.tccredit-chung-dongy { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; font-size: 14px; line-height: 1.4; color: var(--mau-phu); }
.tccredit-chung-dongy input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--mau-vien-dam); background: #fff center / 10px auto no-repeat;
}
.tccredit-chung-dongy input[type="checkbox"]:checked { background-color: var(--mau-chinh); border-color: var(--mau-chinh); background-image: url(../images/icons/icon-check-trang.png); }
.tccredit-chung-dongy label { cursor: pointer; padding-top: 1px; }

/* Thông báo form */
.tccredit-chung-loi p { margin-top: 6px; font-size: 13px; color: var(--mau-chinh); }
.tccredit-chung-thanhcong { margin-top: 16px; padding: 12px 16px; background: #ecfdf3; border-left: 4px solid #12b76a; }
.tccredit-chung-thanhcong p { font-size: 14px; color: #05603a; }

/* Lưới đang lọc (tab demo) */
.tccredit-chung-dangloc { opacity: .35; transition: opacity .2s; }

/* =========================================================
   HEADER
   ========================================================= */
.tccredit-header { position: sticky; top: -80px; z-index: 100; background: #fff; }
.tccredit-header-tren { height: 80px; background: #fff; }
.tccredit-header-tren .tccredit-chung-khung { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tccredit-header-logo img { width: 164px; height: 48px; object-fit: contain; }

/* Ô tìm kiếm */
.tccredit-header-timkiem { display: flex; align-items: center; width: 640px; max-width: 100%; height: 48px; border: 1px solid var(--mau-chinh); background: #fff; }
.tccredit-header-timkiemloai { position: relative; flex: none; height: 100%; display: flex; align-items: center; }
.tccredit-header-timkiemloai::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 1px; background: var(--mau-vien); }
.tccredit-header-timkiemloai select {
  -webkit-appearance: none; appearance: none; height: 100%; border: 0; background: transparent url(../images/icons/icon-chevron-xuong.png) right 24px center / 10px auto no-repeat;
  padding: 0 52px 0 16px; font-size: 16px; font-weight: 700; color: var(--mau-chu); cursor: pointer;
}
.tccredit-header-timkiemo { flex: 1; min-width: 0; height: 100%; }
.tccredit-header-timkiemo input[type="search"] { width: 100%; height: 100%; border: 0; padding: 0 20px; font-size: 16px; background: transparent; outline: 0; }
.tccredit-header-timkiemo input[type="search"]::placeholder { color: var(--mau-mo); }
.tccredit-header-timkiemnut { flex: none; height: calc(100% + 2px); margin: -1px -1px -1px 0; }
.tccredit-header-timkiemnut input[type="submit"] {
  -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; height: 100%; width: 128px; border: 0;
  padding: 0 0 0 26px; font-size: 16px; font-weight: 700; color: #fff;
  background: var(--mau-chinh) url(../images/icons/icon-timkiem.png) 17px center / 15px auto no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background-color var(--chuyen);
}
.tccredit-header-timkiemnut input[type="submit"]:hover { background-color: var(--mau-chinh-dam); }

/* Hotline */
.tccredit-header-hotline { display: grid; grid-template-columns: 40px auto; column-gap: 12px; align-items: center; }
.tccredit-header-hotline p:first-child { grid-row: span 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--mau-hong); }
.tccredit-header-hotline p:first-child img { width: 15px; height: 15px; }
.tccredit-header-hotline p:nth-child(2) { font-size: 12px; line-height: 15px; color: var(--mau-phu); }
.tccredit-header-hotline p:nth-child(3) a { font-size: 20px; line-height: 25px; font-weight: 700; color: var(--mau-chinh); }
.tccredit-header-hotline p:nth-child(3) a:hover { color: var(--mau-chinh-dam); }
.tccredit-header-nutmobile { display: none; }

/* Menu */
.tccredit-header-menu { height: 48px; background: var(--mau-nen-toi); }
.tccredit-header-menu > .tccredit-chung-khung { height: 100%; display: flex; align-items: center; }
.tccredit-header-menudau, .tccredit-header-menuhotline { display: none; }
.tccredit-header-menu ul { display: flex; height: 100%; gap: 60px; }
.tccredit-header-menu li { position: relative; display: flex; align-items: center; }
.tccredit-header-menu > div > ul > li > a { position: relative; display: flex; align-items: center; height: 48px; font-size: 14px; font-weight: 500; color: #fff; }
.tccredit-header-menu > div > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #fff; transform: scaleX(0); transition: transform var(--chuyen); }
.tccredit-header-menu > div > ul > li > a[aria-current]::after, .tccredit-header-menu > div > ul > li:hover > a::after { transform: scaleX(1); }
.tccredit-header-menumo { width: 16px; height: 48px; margin-left: 2px; background: url(../images/icons/icon-chevron-xuong-trang.png) center / 9px auto no-repeat; transition: transform var(--chuyen); }
/* Submenu (desktop: hover / focus) – hỗ trợ cấp 3 */
.tccredit-header-menu li ul {
  position: absolute; top: 100%; left: -20px; z-index: 5; display: block; height: auto; min-width: 220px; padding: 8px 0;
  background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .12); border-top: 3px solid var(--mau-chinh);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--chuyen), transform var(--chuyen), visibility var(--chuyen);
}
.tccredit-header-menu li ul li ul { top: -10px; left: 100%; }
.tccredit-header-menu li:hover > ul, .tccredit-header-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.tccredit-header-menu li ul li { display: block; }
.tccredit-header-menu li ul a { display: block; padding: 10px 20px; font-size: 14px; color: var(--mau-chu); }
.tccredit-header-menu li ul a:hover { color: var(--mau-chinh); background: var(--mau-hong); }
.tccredit-header-dangky { margin-left: auto; }
.tccredit-header-dangky a {
  display: flex; align-items: center; justify-content: center; width: 176px; height: 32px; font-size: 14px; font-weight: 700; color: #fff; background: var(--mau-chinh);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.tccredit-header-dangky a:hover { background: var(--mau-chinh-dam); }
.tccredit-header-phu { display: none; }
.tccredit-header-dinh { box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }

/* Đường dẫn (breadcrumb) */
.tccredit-main-duongdan { background: var(--mau-nen); border-bottom: 1px solid var(--mau-vien); }
.tccredit-main-duongdan ul { display: flex; flex-wrap: wrap; align-items: center; min-height: 47px; font-size: 14px; color: var(--mau-phu); }
.tccredit-main-duongdan li { display: flex; align-items: center; }
.tccredit-main-duongdan li + li::before { content: "/"; margin: 0 7px; color: var(--mau-mo); }
.tccredit-main-duongdan li:first-child a { display: flex; align-items: center; gap: 8px; }
.tccredit-main-duongdan li:first-child a::before { content: ""; width: 12px; height: 11px; background: url(../images/icons/icon-trangchu.png) center / contain no-repeat; }
.tccredit-main-duongdan a:hover { color: var(--mau-chinh); }
.tccredit-main-duongdan span { color: var(--mau-chu); font-weight: 700; }

/* =========================================================
   THẺ SẢN PHẨM (dùng chung)
   ========================================================= */
.tccredit-chung-sanpham {
  position: relative; display: flex; flex-direction: column; padding: 12px 12px 24px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--mau-vien); transition: box-shadow var(--chuyen), transform var(--chuyen);
}
.tccredit-chung-sanpham::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--vien-vat, var(--mau-vien)) calc(50% - 1px), var(--vien-vat, var(--mau-vien)) calc(50% + .5px), transparent calc(50% + .5px)); }
.tccredit-chung-sanpham:hover { box-shadow: inset 0 0 0 1px var(--mau-chinh); transform: translateY(-4px); }
.tccredit-chung-sanpham:hover { --vien-vat: var(--mau-chinh); }
.tccredit-chung-sanphamanh { position: relative; }
.tccredit-chung-sanphamanh > p:first-child { overflow: hidden; }
.tccredit-chung-sanphamanh > p:first-child img { width: 100%; aspect-ratio: 286 / 196; object-fit: contain; transition: transform .4s ease; }
.tccredit-chung-sanpham:hover .tccredit-chung-sanphamanh > p:first-child img { transform: scale(1.05); }
.tccredit-chung-sanphamanh > p:nth-child(2) { position: absolute; top: 12px; left: 12px; }
.tccredit-chung-sanphamanh span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px 0 10px; font-size: 12px; font-weight: 700; color: #fff; background: var(--mau-chinh);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.tccredit-chung-sanphamanh span[data-loai="xecu"] { background: var(--mau-nen-toi); }
.tccredit-chung-sanphamthongtin { padding: 17px 12px 0; }
.tccredit-chung-sanphamthongtin p:first-child { font-size: 12px; font-weight: 700; line-height: 15px; color: var(--mau-mo); }
.tccredit-chung-sanphamthongtin h3 { margin-top: 8px; font-size: 16px; line-height: 20px; font-weight: 700; }
.tccredit-chung-sanphamthongtin h3 a:hover { color: var(--mau-chinh); }
.tccredit-chung-sanphamthongtin p:last-child { margin-top: 6px; font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.tccredit-chung-sanphamgia { padding: 15px 12px 0; }
.tccredit-chung-sanphamgia p:first-child { font-size: 12px; line-height: 15px; color: var(--mau-mo); }
.tccredit-chung-sanphamgia strong { display: block; margin-top: 5px; font-size: 24px; line-height: 30px; font-weight: 700; color: var(--mau-chinh); }
.tccredit-chung-sanphamtragop { margin: 15px 12px 0; padding: 12px; background: var(--mau-nen); display: grid; gap: 9px; }
.tccredit-chung-sanphamtragop p { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 18px; }
.tccredit-chung-sanphamtragop span { color: var(--mau-phu); }
.tccredit-chung-sanphamtragop strong { font-weight: 700; }
.tccredit-chung-sanphamnut { display: flex; gap: 8px; margin: 16px 12px 0; margin-top: auto; padding-top: 16px; }
.tccredit-chung-sanphamnut p:first-child { flex: 1; }
.tccredit-chung-sanphamnut p:first-child a {
  display: flex; align-items: center; justify-content: center; height: 44px; font-size: 14px; font-weight: 700; color: #fff; background: var(--mau-chinh);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.tccredit-chung-sanphamnut p:first-child a:hover { background: var(--mau-chinh-dam); }
.tccredit-chung-sanphamnut p:last-child a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--mau-vien-dam); background: #fff; }
.tccredit-chung-sanphamnut p:last-child img { width: 13px; height: auto; transition: transform var(--chuyen); }
.tccredit-chung-sanphamnut p:last-child a:hover { border-color: var(--mau-chu); background: var(--mau-chu); }
.tccredit-chung-sanphamnut p:last-child a:hover img { filter: brightness(0) invert(1); transform: translateX(2px); }

/* =========================================================
   FOOTER
   ========================================================= */
.tccredit-footer { position: relative; margin-top: 0; background: var(--mau-nen-toi); color: #fff; }
.tccredit-footer-khongcta { margin-top: 0; }
.tccredit-footer-cta {
  position: relative; top: -100px; margin-bottom: -100px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 200px; padding: 40px 56px; background: var(--mau-chinh); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}
.tccredit-footer-cta::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 440px; background: color-mix(in srgb, var(--mau-chinh-dam) 50%, transparent); clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%); }
.tccredit-footer-ctachu, .tccredit-footer-ctanut { position: relative; }
.tccredit-footer-ctachu strong { display: block; font-size: 40px; line-height: 51px; font-weight: 700; }
.tccredit-footer-ctachu p + p { margin-top: 10px; font-size: 16px; }
.tccredit-footer-ctanut { display: flex; gap: 16px; flex: none; }
.tccredit-footer-ctanut a { position: relative; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 32px; font-size: 16px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.tccredit-footer-ctanut p:first-child a { width: 240px; background: #fff; color: var(--mau-chinh); }
.tccredit-footer-ctanut p:first-child a:hover { background: var(--mau-nen-toi); color: #fff; }
.tccredit-footer-ctanut p:first-child a:hover img { filter: brightness(0) invert(1); }
.tccredit-footer-ctanut img { width: 15px; height: 15px; }
.tccredit-footer-ctanut p:last-child a { width: 144px; padding: 0; border: 1.5px solid #fff; color: #fff; }
.tccredit-footer-ctanut p:last-child a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)); }
.tccredit-footer-ctanut p:last-child a:hover { background: #fff; color: var(--mau-chinh); }

.tccredit-footer-cot { display: grid; grid-template-columns: 440px 220px 220px 420px; padding: 80px 0 56px; }
.tccredit-footer-khongcta .tccredit-footer-cot { padding-top: 80px; }
.tccredit-footer-logo img { width: 219px; height: 64px; object-fit: contain; }
.tccredit-footer-mota { margin-top: 26px; max-width: 370px; font-size: 14px; line-height: 21px; }
.tccredit-footer-thongtin ul { margin-top: 26px; display: grid; gap: 18px; font-size: 14px; line-height: 18px; }
.tccredit-footer-thongtin li { display: flex; align-items: center; gap: 14px; }
.tccredit-footer-thongtin li img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.tccredit-footer-thongtin li a:hover { color: var(--mau-chinh); }
.tccredit-footer-mangxahoi { display: flex; gap: 12px; margin-top: 28px; }
.tccredit-footer-mangxahoi a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--mau-the-toi-2, #2a2a2a); }
.tccredit-footer-mangxahoi img { width: 24px; height: 24px; object-fit: contain; }
.tccredit-footer-mangxahoi p:last-child img { width: 20px; height: 20px; }
.tccredit-footer-mangxahoi a:hover { background: var(--mau-chinh); transform: translateY(-3px); }
.tccredit-footer-tieude { position: relative; padding-bottom: 14px; margin-bottom: 23px; font-size: 16px; line-height: 20px; font-weight: 700; }
.tccredit-footer-tieude::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 3px; background: var(--mau-chinh); }
.tccredit-footer-lienket ul { display: grid; gap: 18px; font-size: 14px; line-height: 18px; }
.tccredit-footer-lienket a { position: relative; display: inline-block; }
.tccredit-footer-lienket a:hover { color: var(--mau-chinh); transform: translateX(4px); }
.tccredit-footer-bandokhung { position: relative; aspect-ratio: 420 / 240; background: var(--mau-the-toi-2, #2a2a2a); }
.tccredit-footer-bandokhung iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.tccredit-footer-duoi { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 25px 0 26px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; line-height: 18px; }
.tccredit-footer-duoi ul { display: flex; gap: 32px; }
.tccredit-footer-duoi a:hover { color: var(--mau-chinh); }

/* =========================================================
   CỐ ĐỊNH: liên hệ nổi, thanh đáy mobile, về đầu trang
   ========================================================= */
.tccredit-fixed-lienhe { position: fixed; right: 24px; top: 560px; z-index: 90; display: grid; gap: 14px; }
.tccredit-fixed-lienhe a { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.tccredit-fixed-lienhe p:first-child a { background: var(--mau-zalo); }
.tccredit-fixed-lienhe p:last-child a { background: var(--mau-chinh); animation: tccredit-rung 2.4s ease-in-out infinite; }
.tccredit-fixed-lienhe img { width: 18px; height: 18px; }
.tccredit-fixed-lienhe a:hover { transform: scale(1.08); }
@keyframes tccredit-rung { 0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mau-chinh) 45%, transparent); } 85% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--mau-chinh) 0%, transparent); } }
.tccredit-fixed-thanhday { display: none; }
.tccredit-fixed-lentop {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--mau-nen-toi);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--chuyen), transform var(--chuyen), visibility var(--chuyen), background-color var(--chuyen);
}
.tccredit-fixed-lentop img { width: 15px; height: 11px; transform: rotate(-90deg); }
.tccredit-fixed-lentop:hover { background: var(--mau-chinh); }
.tccredit-lentop-hien { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .tccredit-fixed-lienhe p:last-child a { animation: none; } }

/* =========================================================
   TRANG CHỦ
   ========================================================= */
/* ---------- Banner ---------- */
.trangchu-main-banner { position: relative; overflow: hidden; background: var(--mau-chinh); }
.trangchu-main-bannerslide { position: relative; height: 640px; overflow: hidden; }
.trangchu-main-banneranh { position: absolute; top: 0; right: 0; bottom: 0; left: calc(50% - 139px); }
.trangchu-main-banneranh img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.trangchu-main-bannerslide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--mau-chinh); clip-path: polygon(0 0, calc(50% + 120px) 0, calc(50% - 40px) 100%, 0 100%); }
.trangchu-main-bannerslide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--mau-vang); clip-path: polygon(calc(50% + 148px) 0, calc(50% + 156px) 0, calc(50% - 4px) 100%, calc(50% - 12px) 100%); }
.trangchu-main-bannerslide > .tccredit-chung-khung { position: relative; z-index: 2; height: 100%; }
.trangchu-main-bannerchu { padding-top: 80px; max-width: 640px; color: #fff; }
.trangchu-main-bannernhan p { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border: 1.5px solid #fff; font-size: 14px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.trangchu-main-bannerchu h1, .trangchu-main-bannerchu h2 { margin-top: 29px; font-size: 60px; line-height: 78px; font-weight: 700; color: #fff; text-transform: uppercase; }
.trangchu-main-bannermota { margin-top: 27px; max-width: 500px; font-size: 16px; line-height: 24px; }
.trangchu-main-bannernut { display: flex; gap: 16px; margin-top: 42px; }
.trangchu-main-bannernut a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; font-size: 16px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.trangchu-main-bannernut p:first-child a { width: 196px; background: #fff; color: var(--mau-chinh); }
.trangchu-main-bannernut p:first-child a:hover { background: var(--mau-nen-toi); color: #fff; }
.trangchu-main-bannernut p:last-child a { width: 240px; border: 1.5px solid #fff; color: #fff; }
.trangchu-main-bannernut p:last-child a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)); }
.trangchu-main-bannernut p:last-child a:hover { background: #fff; color: var(--mau-chinh); }
.trangchu-main-bannernut p:last-child a:hover img { filter: brightness(0) saturate(100%) invert(14%) sepia(97%) saturate(6000%) hue-rotate(350deg); }
.trangchu-main-bannernut img { width: 15px; height: 15px; }
/* Chữ banner trượt lên khi đổi slide */
.trangchu-main-bannerchu > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.swiper-slide-active .trangchu-main-bannerchu > * { opacity: 1; transform: none; }
.swiper-slide-active .trangchu-main-bannerchu > :nth-child(2) { transition-delay: .1s; }
.swiper-slide-active .trangchu-main-bannerchu > :nth-child(3) { transition-delay: .2s; }
.swiper-slide-active .trangchu-main-bannerchu > :nth-child(4) { transition-delay: .3s; }
.trangchu-main-banneranh img { transform: scale(1.06); transition: transform 6s ease; }
.swiper-slide-active .trangchu-main-banneranh img { transform: none; }
/* Trang trí xx + chấm đỏ */
.trangchu-main-bannertrangtri { position: absolute; z-index: 3; top: 44px; left: calc(50% - 80px); width: 72px; height: 24px; background: url(../images/icons/deco-xx-trang.png) center / contain no-repeat; opacity: .8; pointer-events: none; }
/* Bộ đếm + mũi tên */
.trangchu-main-bannerdieukhien { position: absolute; z-index: 4; left: 0; right: 0; bottom: 96px; pointer-events: none; }
.trangchu-main-bannerdieukhien .tccredit-chung-khung { display: flex; align-items: center; justify-content: space-between; }
.trangchu-main-bannerdem { display: flex; align-items: center; gap: 17px; font-size: 16px; font-weight: 700; color: #fff; pointer-events: auto; }
.trangchu-main-bannercham { display: flex; gap: 8px; }
.trangchu-main-bannercham .swiper-pagination-bullet { width: 16px; height: 4px; margin: 0 !important; border-radius: 0; background: rgba(255, 255, 255, .4); opacity: 1; transition: width var(--chuyen), background-color var(--chuyen); }
.trangchu-main-bannercham .swiper-pagination-bullet-active { width: 48px; background: #fff; }
.trangchu-main-bannermuiten { display: flex; gap: 8px; pointer-events: auto; }
.trangchu-main-bannermuiten button { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; transition: background-color var(--chuyen); }
.trangchu-main-bannermuiten img { width: 15px; height: 11px; }
.trangchu-main-bannertruoc { background: var(--mau-nen-toi); }
.trangchu-main-bannersau { background: #fff; }
.trangchu-main-bannertruoc:hover { background: var(--mau-chinh); }
.trangchu-main-bannersau:hover { background: var(--mau-chinh); }
.trangchu-main-bannersau:hover img { filter: brightness(0) invert(1); }

/* ---------- Điểm nhấn ---------- */
.trangchu-main-diemnhan { position: relative; z-index: 5; margin-top: -57px; }
.trangchu-main-diemnhankhung { display: grid; grid-template-columns: repeat(4, 1fr); padding: 32px 32px 28px; background: #fff; border: 1px solid #ededed; border-top: 4px solid var(--mau-chinh); box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.trangchu-main-diemnhanitem { display: flex; align-items: center; gap: 16px; }
.trangchu-main-diemnhanitem + .trangchu-main-diemnhanitem { padding-left: 41px; border-left: 1px solid var(--mau-vien); }
.trangchu-main-diemnhanicon p { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--mau-hong); transition: background-color var(--chuyen); }
.trangchu-main-diemnhanicon img { max-width: 26px; max-height: 28px; width: auto; height: auto; transition: filter var(--chuyen); }
.trangchu-main-diemnhanitem:hover .trangchu-main-diemnhanicon p { background: var(--mau-chinh); }
.trangchu-main-diemnhanitem:hover .trangchu-main-diemnhanicon img { filter: brightness(0) invert(1); }
.trangchu-main-diemnhanchu strong { display: block; font-size: 20px; line-height: 25px; font-weight: 700; white-space: nowrap; }
.trangchu-main-diemnhanchu p + p { white-space: nowrap; margin-top: 7px; font-size: 14px; line-height: 18px; color: var(--mau-phu); }

/* ---------- Giới thiệu ---------- */
.trangchu-main-gioithieu { padding: 44px 0 60px; }
.trangchu-main-gioithieu > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 1fr) 700px; gap: 9px; align-items: start; }
.trangchu-main-gioithieuchu { padding-top: 16px; max-width: 600px; }
.trangchu-main-gioithieuchu h2 { margin-top: 21px; }
.trangchu-main-gioithieumota { margin-top: 30px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.trangchu-main-gioithieumota p + p { margin-top: 20px; }
.trangchu-main-gioithieucheck ul { display: grid; grid-template-columns: 310px 1fr; gap: 16px 0; margin-top: 34px; }
.trangchu-main-gioithieucheck li, .trangchu-main-dangkyloiich li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 20px; }
.trangchu-main-gioithieucheck li::before { content: ""; flex: none; width: 28px; height: 28px; background: var(--mau-chinh) url(../images/icons/icon-check-trang.png) center / 12px auto no-repeat; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.trangchu-main-gioithieuchu .tccredit-chung-nutvien { margin-top: 48px; }
.trangchu-main-gioithieuhinh { position: relative; width: 100%; aspect-ratio: 700 / 612; }
.trangchu-main-gioithieuhinh::before, .trangchu-main-gioithieuhinh::after { content: ""; position: absolute; width: 86.86%; height: 84.97%; }
.trangchu-main-gioithieuhinh::before { left: 13.14%; top: 7.84%; background: var(--mau-chinh); clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px)); }
.trangchu-main-gioithieuhinh::after {
  left: 6.29%; top: 0; border: 3px solid var(--mau-vang); z-index: 0;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
  background:
    linear-gradient(to top right, transparent calc(50% - 3px), var(--mau-vang) calc(50% - 3px), var(--mau-vang) calc(50% + 1px), transparent calc(50% + 1px)) right -3px top -3px / 32px 32px no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1px), var(--mau-vang) calc(50% - 1px), var(--mau-vang) calc(50% + 3px), transparent calc(50% + 3px)) left -3px bottom -3px / 32px 32px no-repeat;
}
.trangchu-main-gioithieuanh { position: absolute; z-index: 1; left: 8.57%; top: 2.61%; width: 86.86%; }
.trangchu-main-gioithieuanh p { overflow: hidden; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px)); background: #e3e3e3; }
.trangchu-main-gioithieuanh img { width: 100%; aspect-ratio: 608 / 520; object-fit: cover; transition: transform .6s ease; }
.trangchu-main-gioithieuhinh:hover .trangchu-main-gioithieuanh img { transform: scale(1.04); }
.trangchu-main-gioithieunhan { position: absolute; z-index: 2; left: 0; top: 66.67%; width: 300px; padding: 20px 24px 24px; background: var(--mau-nen-toi); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.trangchu-main-gioithieunhan strong { display: block; font-size: 20px; line-height: 25px; }
.trangchu-main-gioithieunhan p + p { margin-top: 7px; font-size: 14px; line-height: 18px; }
.trangchu-main-gioithieu .tccredit-chung-khung { position: relative; }
.trangchu-main-gioithieu .tccredit-chung-khung::after { content: ""; position: absolute; right: 48px; bottom: -24px; width: 72px; height: 24px; background: url(../images/icons/deco-xx-do.png) center / contain no-repeat; }

/* ---------- Sản phẩm ---------- */
.trangchu-main-sanpham { padding: 60px 0; background: var(--mau-nen); }
.trangchu-main-sanphamdau { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.trangchu-main-sanphamghichu { max-width: 360px; padding-bottom: 6px; text-align: right; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.trangchu-main-khoi { margin-top: 63px; }
.trangchu-main-khoi + .trangchu-main-khoi { margin-top: 75px; }
.trangchu-main-khoitieude { position: relative; display: flex; align-items: flex-start; gap: 42px; padding-bottom: 19px; border-bottom: 1px solid var(--mau-vien); }
.trangchu-main-khoitieude h3 { position: relative; font-size: 28px; line-height: 35px; font-weight: 700; white-space: nowrap; }
.trangchu-main-khoitieude h3::after { content: ""; position: absolute; left: 0; right: -1px; bottom: -22px; height: 4px; background: var(--mau-chinh); }
.trangchu-main-khoitab ul { display: flex; flex-wrap: wrap; gap: 8px; }
.trangchu-main-khoitab a {
  position: relative; display: flex; align-items: center; height: 36px; padding: 0 16px; font-size: 14px; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px var(--mau-vien-dam);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.trangchu-main-khoitab a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - .7px), var(--mau-vien-dam) calc(50% - .7px), var(--mau-vien-dam) calc(50% + .7px), transparent calc(50% + .7px)); }
.trangchu-main-khoitab a:hover { color: var(--mau-chinh); }
.trangchu-main-khoitab a[aria-current] { background: var(--mau-chinh); color: #fff; box-shadow: none; }
.trangchu-main-khoitab a[aria-current]::after { display: none; }
.trangchu-main-tieudelink { margin-left: auto; padding-top: 8px; }
.trangchu-main-tieudelink a { display: inline-flex; align-items: center; gap: 0; font-size: 16px; font-weight: 700; line-height: 20px; color: var(--mau-chinh); white-space: nowrap; }
.trangchu-main-tieudelink img { margin-left: 12px; width: 13px; height: auto; transition: transform var(--chuyen); }
.trangchu-main-tieudelink a:hover img { transform: translateX(4px); }
.trangchu-main-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 26px; transition: opacity .2s; }
.trangchu-main-xemthem { display: none; }
.trangchu-main-khuyenmai {
  position: relative; display: flex; flex-direction: column; padding: 75px 32px 20px; background: var(--mau-chinh); color: #fff;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.trangchu-main-khuyenmai::before { content: ""; position: absolute; top: 28px; right: 20px; width: 72px; height: 24px; background: url(../images/icons/deco-xx-trang.png) center / contain no-repeat; opacity: .6; }
.trangchu-main-khuyenmaichu strong { display: block; max-width: 230px; font-size: 28px; line-height: 42px; }
.trangchu-main-khuyenmaichu p + p { margin-top: 20px; max-width: 150px; font-size: 14px; line-height: 21px; }
.trangchu-main-khuyenmaianh { margin-top: 18px; overflow: hidden; }
.trangchu-main-khuyenmaianh img { width: 100%; aspect-ratio: 246 / 172; object-fit: cover; transition: transform .5s ease; }
.trangchu-main-khuyenmai:hover .trangchu-main-khuyenmaianh img { transform: scale(1.05); }
.trangchu-main-khuyenmainut { margin-top: 16px; }
.trangchu-main-khuyenmainut a { display: inline-flex; align-items: center; justify-content: center; width: 144px; height: 44px; background: #fff; color: var(--mau-chinh); font-size: 14px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.trangchu-main-khuyenmainut a:hover { background: var(--mau-nen-toi); color: #fff; }

/* ---------- Form đăng ký ---------- */
.trangchu-main-dangky { position: relative; padding: 60px 0; background: var(--mau-chinh); color: #fff; overflow: hidden; }
.trangchu-main-dangky::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--mau-chinh-dam) 50%, transparent); clip-path: polygon(calc(50% + 380px) 0, 100% 0, 100% 100%, calc(50% + 180px) 100%); }
.trangchu-main-dangky::after { content: ""; position: absolute; inset: 0; background: var(--mau-vang); clip-path: polygon(calc(50% + 357px) 0, calc(50% + 363px) 0, calc(50% + 163px) 100%, calc(50% + 157px) 100%); }
.trangchu-main-dangky > .tccredit-chung-khung { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 40px; }
.trangchu-main-dangkychu { position: relative; max-width: 530px; }
.trangchu-main-dangkychu::before { content: ""; position: absolute; top: 4px; right: -72px; width: 72px; height: 24px; background: url(../images/icons/deco-xx-trang.png) center / contain no-repeat; opacity: .6; }
.trangchu-main-dangkychu h2 { margin-top: 21px; color: #fff; max-width: 470px; line-height: 60px; }
.trangchu-main-dangkymota { margin-top: 20px; font-size: 16px; line-height: 24px; }
.trangchu-main-dangkyloiich { margin-top: 44px; }
.trangchu-main-dangkyloiich > p strong { font-size: 20px; line-height: 25px; }
.trangchu-main-dangkyloiich ul { display: grid; gap: 16px; margin-top: 21px; }
.trangchu-main-dangkyloiich li { font-weight: 400; }
.trangchu-main-dangkyloiich li::before { content: ""; flex: none; width: 16px; height: 16px; background: #fff url(../images/icons/icon-check-do.png) center / 9px auto no-repeat; }
.trangchu-main-dangkyhotline { display: grid; grid-template-columns: 56px auto; column-gap: 20px; align-items: center; margin-top: 38px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .3); }
.trangchu-main-dangkyhotline p:first-child { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #fff; }
.trangchu-main-dangkyhotline p:first-child img { width: 21px; height: 21px; }
.trangchu-main-dangkyhotline p:nth-child(2) { font-size: 14px; line-height: 18px; }
.trangchu-main-dangkyhotline a { font-size: 28px; line-height: 35px; font-weight: 700; }
.trangchu-main-dangkyhotline a:hover { color: var(--mau-vang); }
.trangchu-main-dangkythe { background: #fff; color: var(--mau-chu); padding: 40px; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.trangchu-main-formdau strong { display: block; font-size: 28px; line-height: 35px; }
.trangchu-main-formdau p + p { margin-top: 10px; font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.trangchu-main-formluoi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; margin-top: 32px; }
.trangchu-main-formorong { grid-column: 1 / -1; }
.trangchu-main-formo label, .trangchu-main-formkyhan > p { display: block; margin-bottom: 8px; font-size: 14px; line-height: 18px; font-weight: 700; }
.trangchu-main-formo input[type="text"], .trangchu-main-formo input[type="tel"], .trangchu-main-formo select, .trangchu-main-formo textarea {
  display: block; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--mau-vien-dam); background: #fff; font-size: 16px; color: var(--mau-chu); outline: 0; border-radius: 0;
  transition: border-color var(--chuyen), box-shadow var(--chuyen);
}
.trangchu-main-formo select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url(../images/icons/icon-chevron-xuong.png) right 20px center / 10px auto no-repeat; cursor: pointer; }
.trangchu-main-formo select:invalid, .trangchu-main-formo select:has(option[value=""]:checked) { color: var(--mau-goiy); }
.trangchu-main-formo textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.trangchu-main-formo ::placeholder { color: var(--mau-goiy); }
.trangchu-main-formo input:focus, .trangchu-main-formo select:focus, .trangchu-main-formo textarea:focus { border-color: var(--mau-chinh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mau-chinh) 10%, transparent); }
.trangchu-main-formkyhannut { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trangchu-main-formkyhannut button { height: 48px; border: 1px solid var(--mau-vien-dam); background: #fff; font-size: 16px; color: var(--mau-phu); transition: all var(--chuyen); }
.trangchu-main-formkyhannut button:hover { border-color: var(--mau-chinh); color: var(--mau-chinh); }
.trangchu-main-formkyhannut button[aria-pressed="true"] { background: var(--mau-hong); border: 1.5px solid var(--mau-chinh); color: var(--mau-chinh); font-weight: 700; }
.trangchu-main-form .tccredit-chung-nutgui { margin-top: 24px; }

/* ---------- Quy trình ---------- */
.trangchu-main-quytrinh { padding: 60px 0; }
.trangchu-main-quytrinhdau { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.trangchu-main-quytrinhmota { max-width: 530px; font-size: 16px; line-height: 24px; color: var(--mau-phu); padding-bottom: 4px; }
.trangchu-main-buoc { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
.trangchu-main-buoc::before { content: ""; position: absolute; top: 35px; left: 80px; right: 310px; border-top: 2px dashed var(--mau-chinh); }
.trangchu-main-buocitem { position: relative; }
.trangchu-main-buocso p {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 28px; font-weight: 700; color: var(--mau-chinh); background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: inset 0 0 0 2px var(--mau-chinh); position: relative; transition: background-color var(--chuyen), color var(--chuyen);
}
.trangchu-main-buocso p::after { content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--mau-chinh) calc(50% - 1.5px), var(--mau-chinh) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.trangchu-main-buocitem:first-child .trangchu-main-buocso p, .trangchu-main-buocitem:hover .trangchu-main-buocso p { background: var(--mau-chinh); color: #fff; }
.trangchu-main-buocchu { margin-top: 34px; }
.trangchu-main-buocchu strong { display: block; font-size: 20px; line-height: 25px; }
.trangchu-main-buocchu p + p { margin-top: 13px; max-width: 280px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.trangchu-main-dieukien {
  position: relative; display: grid; grid-template-columns: 310px 1fr; align-items: center; margin-top: 76px; padding: 40px 40px 40px 40px; background: var(--mau-nen);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.trangchu-main-dieukien::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mau-chinh); }
.trangchu-main-dieukienchu strong { display: block; font-size: 24px; line-height: 30px; }
.trangchu-main-dieukienchu p + p { margin-top: 13px; max-width: 260px; font-size: 14px; line-height: 21px; color: var(--mau-phu); }
.trangchu-main-dieukienluoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trangchu-main-dieukienitem { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; }
.trangchu-main-dieukienitem p:first-child { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #fff; }
.trangchu-main-dieukienitem p:first-child img { max-width: 25px; max-height: 24px; width: auto; height: auto; }
.trangchu-main-dieukienitem strong { font-size: 16px; line-height: 20px; }
.trangchu-main-dieukienitem p:last-child { margin-top: 6px; font-size: 16px; line-height: 20px; color: var(--mau-phu); }

/* ---------- Vì sao chọn ---------- */
.trangchu-main-visaochon { padding: 60px 0; background: var(--mau-nen); }
.trangchu-main-visaochon > .tccredit-chung-khung { display: grid; grid-template-columns: 420px 1fr; gap: 20px; }
.trangchu-main-visaochontrai { display: flex; flex-direction: column; }
.trangchu-main-visaochonmota { margin-top: 30px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.trangchu-main-visaochonanh { margin-top: auto; padding-top: 34px; }
.trangchu-main-visaochonanh p { overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.trangchu-main-visaochonanh img { width: 100%; aspect-ratio: 420 / 296; object-fit: cover; transition: transform .6s ease; }
.trangchu-main-visaochonanh:hover img { transform: scale(1.04); }
.trangchu-main-lydo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trangchu-main-lydoitem { display: flex; gap: 24px; padding: 32px; min-height: 172px; background: #fff; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); transition: transform var(--chuyen), box-shadow var(--chuyen); }
.trangchu-main-lydoitem:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.trangchu-main-lydoicon p { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--mau-hong); transition: background-color var(--chuyen); }
.trangchu-main-lydoicon img { max-width: 25px; max-height: 26px; width: auto; height: auto; transition: filter var(--chuyen); }
.trangchu-main-lydoitem:first-child .trangchu-main-lydoicon p, .trangchu-main-lydoitem:hover .trangchu-main-lydoicon p { background: var(--mau-chinh); }
.trangchu-main-lydoitem:hover .trangchu-main-lydoicon img { filter: brightness(0) invert(1); }
.trangchu-main-lydochu strong { display: block; font-size: 20px; line-height: 25px; }
.trangchu-main-lydochu p + p { margin-top: 13px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }

/* ---------- Chính sách ---------- */
.trangchu-main-chinhsach { padding: 60px 0 59px; background: var(--mau-nen-toi); color: #fff; }
.trangchu-main-chinhsach > .tccredit-chung-khung { position: relative; }
.trangchu-main-chinhsach > .tccredit-chung-khung::after { content: ""; position: absolute; top: 4px; right: 24px; width: 72px; height: 24px; background: url(../images/icons/deco-xx-do.png) center / contain no-repeat; }
.trangchu-main-chinhsach h2 { color: #fff; margin-top: 21px; }
.trangchu-main-chinhsachluoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.trangchu-main-chinhsachitem { position: relative; min-height: 336px; padding: 48px 40px 40px; background: var(--mau-the-toi); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); transition: background-color var(--chuyen); }
.trangchu-main-chinhsachitem::before { content: ""; position: absolute; top: 0; left: 0; width: 120px; height: 4px; background: var(--mau-chinh); transition: width .4s ease; }
.trangchu-main-chinhsachitem:hover { background: color-mix(in srgb, var(--mau-the-toi) 85%, #fff); }
.trangchu-main-chinhsachitem:hover::before { width: 100%; }
.trangchu-main-chinhsachicon p:first-child { display: flex; align-items: center; height: 36px; }
.trangchu-main-chinhsachicon img { max-width: 32px; max-height: 35px; width: auto; height: auto; }
.trangchu-main-chinhsachicon strong { display: block; margin-top: 25px; font-size: 24px; line-height: 30px; }
.trangchu-main-chinhsachitem ul { display: grid; gap: 20px; margin-top: 25px; }
.trangchu-main-chinhsachitem li { position: relative; padding-left: 20px; font-size: 16px; line-height: 22px; }
.trangchu-main-chinhsachitem li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 4px; background: var(--mau-chinh); }
.trangchu-main-chinhsachghichu { margin-top: 35px; font-size: 14px; line-height: 18px; }

/* ---------- Hình ảnh & đánh giá ---------- */
.trangchu-main-hinhanh { padding: 60px 0; overflow: hidden; }
.trangchu-main-hinhanhdau, .trangchu-main-tintucdau { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.trangchu-main-hinhanhdau .trangchu-main-tieudelink { padding-bottom: 10px; }
.trangchu-main-thuvien { display: grid; grid-template-columns: 640px 1fr 1fr; grid-template-rows: auto auto; gap: 20px; margin-top: 52px; }
.trangchu-main-thuvienitem:first-child { grid-row: span 2; }
.trangchu-main-thuvienitem p, .trangchu-main-thuvienitem a { display: block; height: 100%; overflow: hidden; }
.trangchu-main-thuvienitem:first-child p { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
.trangchu-main-thuvienitem img { width: 100%; height: 100%; aspect-ratio: 310 / 220; object-fit: cover; transition: transform .6s ease; }
.trangchu-main-thuvienitem:first-child img { aspect-ratio: 640 / 460; }
.trangchu-main-thuvienitem a:hover img { transform: scale(1.06); }
.trangchu-main-xemthemlink { display: none; }
.trangchu-main-danhgiadauslide { display: flex; justify-content: space-between; align-items: center; margin-top: 69px; }
.trangchu-main-danhgiadauslide h2 { margin-top: 0; font-size: 28px; line-height: 35px; }
.trangchu-main-danhgiamuiten { display: flex; gap: 8px; }
.trangchu-main-danhgiamuiten button { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; transition: background-color var(--chuyen); }
.trangchu-main-danhgiamuiten img { width: 15px; height: 11px; }
.trangchu-main-danhgiatruoc { background: #fff; box-shadow: inset 0 0 0 1.5px var(--mau-vien); }
.trangchu-main-danhgiasau { background: var(--mau-chinh); }
.trangchu-main-danhgiatruoc:hover { background: var(--mau-nen-toi); box-shadow: none; }
.trangchu-main-danhgiatruoc:hover img { filter: brightness(0) invert(1); }
.trangchu-main-danhgiasau:hover { background: var(--mau-chinh-dam); }
.trangchu-main-danhgiaswiper { margin-top: 31px; }
.trangchu-main-danhgiaitem {
  position: relative; height: 300px; padding: 13px 32px 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--mau-vien); display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.trangchu-main-danhgiaitem::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--mau-vien) calc(50% - 1px), var(--mau-vien) calc(50% + .5px), transparent calc(50% + .5px)); }
.trangchu-main-danhgiadau { display: flex; justify-content: space-between; align-items: flex-start; }
.trangchu-main-danhgiadau p:first-child { font-size: 48px; line-height: 61px; font-weight: 700; color: var(--mau-chinh); }
.trangchu-main-danhgiadau p:last-child { display: flex; gap: 5px; padding-top: 22px; }
.trangchu-main-danhgiadau img { width: 17px; height: 16px; }
.trangchu-main-danhgiachu { margin-top: 8px; font-size: 16px; line-height: 24px; }
.trangchu-main-danhgiaten { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--mau-vien); }
.trangchu-main-danhgiaten p:first-child { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #e3e3e3; font-size: 12px; font-weight: 700; color: var(--mau-mo); }
.trangchu-main-danhgiaten strong { font-size: 16px; line-height: 20px; }
.trangchu-main-danhgiaten p:last-child { font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.trangchu-main-danhgiacham { display: none; }

/* ---------- Tin tức ---------- */
.trangchu-main-tintuc { padding: 60px 0 160px; background: var(--mau-nen); }
.trangchu-main-tintucnut { padding-bottom: 2px; }
.trangchu-main-tintucluoi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
.trangchu-main-tinnoibat { background: #fff; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.trangchu-main-tinnoibatanh p, .trangchu-main-tinanh p { overflow: hidden; }
.trangchu-main-tinnoibatanh img { width: 100%; aspect-ratio: 640 / 300; object-fit: cover; transition: transform .6s ease; }
.trangchu-main-tinnoibatchu { padding: 32px; }
.trangchu-main-tinnoibatchu > p:first-child, .trangchu-main-tinchu > p:first-child { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 18px; color: var(--mau-mo); }
.trangchu-main-tinnoibatchu span, .trangchu-main-tinchu span { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; background: var(--mau-chinh); color: #fff; font-size: 12px; font-weight: 700; }
.trangchu-main-tinchu span { background: var(--mau-nen-toi); }
.trangchu-main-tinnoibatchu h3 { margin-top: 21px; font-size: 28px; line-height: 42px; font-weight: 700; }
.trangchu-main-tinnoibatmota { margin-top: 18px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.trangchu-main-tinnoibatchu > p:last-child { margin-top: 28px; }
.trangchu-main-tinnoibatchu > p:last-child a { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--mau-chinh); }
.trangchu-main-tinnoibatchu > p:last-child img { width: 13px; height: auto; transition: transform var(--chuyen); }
.trangchu-main-tinnoibatchu > p:last-child a:hover img { transform: translateX(4px); }
.trangchu-main-tindanhsach { display: grid; gap: 24px; align-content: start; }
.trangchu-main-tinitem { display: grid; grid-template-columns: 200px 1fr; gap: 20px; background: #fff; min-height: 184px; }
.trangchu-main-tinanh img { width: 100%; height: 100%; aspect-ratio: 200 / 184; object-fit: cover; transition: transform .6s ease; }
.trangchu-main-tinchu { padding: 24px 20px 20px 0; }
.trangchu-main-tinchu h3 { margin-top: 18px; font-size: 20px; line-height: 30px; font-weight: 700; }
.trangchu-main-tinchu > p:last-child { margin-top: 16px; }
.trangchu-main-tinchu > p:last-child a { font-size: 14px; font-weight: 700; color: var(--mau-chinh); }
.trangchu-main-tinnoibat h3 a:hover, .trangchu-main-tinchu h3 a:hover { color: var(--mau-chinh); }
.trangchu-main-tinnoibat:hover .trangchu-main-tinnoibatanh img, .trangchu-main-tinitem:hover .trangchu-main-tinanh img { transform: scale(1.05); }

/* =========================================================
   DANH MỤC SẢN PHẨM
   ========================================================= */
.danhmuc-main-sanpham { padding: 60px 0; background: var(--mau-nen); }
.danhmuc-main-sanpham > .tccredit-chung-khung { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; align-items: start; }

/* ---------- Bộ lọc (cột trái) ---------- */
.danhmuc-main-boloc { padding: 24px 24px 24px; background: #fff; outline: 0; }
.danhmuc-main-bolocdau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0 18px 0; border-bottom: 1px solid var(--mau-vien); }
.danhmuc-main-boloctieude { display: flex; align-items: center; gap: 10px; }
.danhmuc-main-boloctieude img { width: 15px; height: 14px; margin-left: 3px; }
.danhmuc-main-boloctieude strong { font-size: 24px; line-height: 30px; font-weight: 700; }
.danhmuc-main-bolocxoa { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mau-chinh); transition: color var(--chuyen); }
.danhmuc-main-bolocxoa:hover { color: var(--mau-chinh-dam); text-decoration: underline; }
.danhmuc-main-bolocdong { display: none; }
.danhmuc-main-bolocnhom { padding: 21px 0 18px; border-bottom: 1px solid var(--mau-vien); }
.danhmuc-main-bolocmo { position: relative; display: block; width: 100%; padding-right: 24px; text-align: left; font-size: 16px; line-height: 20px; font-weight: 700; }
.danhmuc-main-bolocmo::before, .danhmuc-main-bolocmo::after { content: ""; position: absolute; right: 3px; top: 9px; width: 10px; height: 1.5px; background: var(--mau-chu); transition: transform var(--chuyen); }
.danhmuc-main-bolocmo::after { transform: rotate(90deg); }
.danhmuc-main-bolocmo[aria-expanded="true"]::after { transform: rotate(0); }
.danhmuc-main-bolocmo:hover { color: var(--mau-chinh); }
.danhmuc-main-bolocnhom ul { display: grid; gap: 12px; padding-top: 16px; }
.danhmuc-main-bolocnhom li { position: relative; display: flex; align-items: center; gap: 12px; }
.danhmuc-main-bolocnhom input {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 1.5px solid #c8c8c8; background: #fff center / 10px auto no-repeat; transition: border-color var(--chuyen), background-color var(--chuyen);
}
.danhmuc-main-bolocnhom input[type="radio"] { width: 18px; height: 18px; margin: 1px; border-radius: 50%; }
.danhmuc-main-bolocnhom input:hover { border-color: var(--mau-chinh); }
.danhmuc-main-bolocnhom input[type="checkbox"]:checked { background-color: var(--mau-chinh); border-color: var(--mau-chinh); background-image: url(../images/icons/icon-check-trang.png); }
.danhmuc-main-bolocnhom input[type="radio"]:checked { border: 5px solid var(--mau-chinh); }
.danhmuc-main-bolocnhom label { cursor: pointer; font-size: 14px; line-height: 18px; }
.danhmuc-main-bolocnhom input:checked + label { font-weight: 700; }
.danhmuc-main-bolocnhom label:hover { color: var(--mau-chinh); }
.danhmuc-main-bolocnhom:last-child { border-bottom: 0; }
.danhmuc-main-bolocnut { padding-top: 12px; }
.danhmuc-main-bolocnutxoa, .danhmuc-main-bolocnutketqua { display: none; }
.danhmuc-main-bolocnut input {
  -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; width: 100%; height: 48px; border: 0; border-radius: 0;
  background: var(--mau-chinh); color: #fff; font-size: 16px; font-weight: 700; transition: background-color var(--chuyen), color var(--chuyen);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.danhmuc-main-bolocnut input:hover { background: var(--mau-chinh-dam); }
.danhmuc-main-bolocphu { display: none; }

/* Thẻ tư vấn */
.danhmuc-main-tuvan { margin-top: 20px; padding: 24px; background: var(--mau-nen-toi); color: #fff; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.danhmuc-main-tuvanicon p { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--mau-chinh); }
.danhmuc-main-tuvanicon img { width: 18px; height: 18px; }
.danhmuc-main-tuvanchu { margin-top: 18px; }
.danhmuc-main-tuvanchu strong { font-size: 20px; line-height: 25px; }
.danhmuc-main-tuvanchu p:nth-child(2) { margin-top: 11px; font-size: 14px; line-height: 21px; max-width: 240px; }
.danhmuc-main-tuvanchu p:last-child { margin-top: 18px; }
.danhmuc-main-tuvanchu a { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--mau-chinh); }
.danhmuc-main-tuvanchu a:hover { color: #fff; }

/* ---------- Cột sản phẩm ---------- */
.danhmuc-main-cotphai h1 { font-size: 40px; line-height: 51px; font-weight: 700; }
.danhmuc-main-congcu { display: flex; align-items: center; gap: 16px; margin-top: 25px; }
.danhmuc-main-nutloc, .danhmuc-main-dangloc, .danhmuc-main-ketqua p:last-child { display: none; }
.danhmuc-main-ketqua { font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.danhmuc-main-sapxep { position: relative; display: flex; align-items: center; width: 240px; height: 48px; margin-left: auto; padding-left: 16px; background: #fff; border: 1px solid var(--mau-vien-dam); font-size: 14px; font-weight: 700; transition: border-color var(--chuyen); }
.danhmuc-main-sapxep:hover, .danhmuc-main-sapxep:focus-within { border-color: var(--mau-chu); }
.danhmuc-main-sapxep label { flex: none; margin-right: 4px; }
.danhmuc-main-sapxep select {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0 36px 0 0; border: 0; outline: 0; cursor: pointer;
  background: transparent url(../images/icons/icon-chevron-xuong.png) right 20px center / 10px auto no-repeat; font-weight: 700; color: var(--mau-chu);
}
.danhmuc-main-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; transition: opacity .2s; }
.danhmuc-main-phantrang { margin-top: 40px; }
.danhmuc-main-phantrang ul { display: flex; justify-content: center; gap: 8px; }
.danhmuc-main-phantrang a, .danhmuc-main-phantrang span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #fff; border: 1px solid var(--mau-vien); font-size: 16px; }
.danhmuc-main-phantrang a img { width: 13px; height: auto; }
.danhmuc-main-phantrang a:hover { border-color: var(--mau-chinh); color: var(--mau-chinh); }
.danhmuc-main-phantrang a[aria-current] { background: var(--mau-chinh); border-color: var(--mau-chinh); color: #fff; font-weight: 700; }
.danhmuc-main-phantrang a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.danhmuc-main-xemthem { display: none; }

/* ---------- Nội dung SEO + form liên hệ ---------- */
.danhmuc-main-noidung { padding: 60px 0 160px; background: #fff; }
.danhmuc-main-noidung > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 640px) 530px; justify-content: space-between; gap: 40px; align-items: start; }
.danhmuc-main-noidung h2 { margin-top: 21px; line-height: 60px; }
.danhmuc-main-noidungmota { margin-top: 26px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.danhmuc-main-noidungmota p + p, .danhmuc-main-noidungthem p + h3 { margin-top: 20px; }
.danhmuc-main-noidungcheck ul { display: grid; gap: 16px; margin-top: 24px; }
.danhmuc-main-noidungcheck li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 20px; font-weight: 700; }
.danhmuc-main-noidungcheck li::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--mau-chinh) url(../images/icons/icon-check-trang.png) center / 9px auto no-repeat; }
.danhmuc-main-noidungthem { margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.danhmuc-main-noidungthem h3 { font-size: 20px; line-height: 25px; color: var(--mau-chu); }
.danhmuc-main-noidungthem h3 + p { margin-top: 8px; }
.danhmuc-main-noidungnut { margin-top: 24px; }
.danhmuc-main-noidungnut button { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--mau-chinh); }
.danhmuc-main-noidungnut button::after { content: ""; width: 10px; height: 6px; background: url(../images/icons/icon-chevron-xuong-do.png) center / contain no-repeat; transition: transform var(--chuyen); }
.danhmuc-main-noidungnut button[aria-expanded="true"]::after { transform: rotate(180deg); }
.danhmuc-main-noidungnut button:hover { color: var(--mau-chinh-dam); }

.danhmuc-main-form { position: relative; padding: 35px 32px 32px; background: var(--mau-nen); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.danhmuc-main-form::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 4px; background: var(--mau-chinh); }
.danhmuc-main-formdau h2 { margin: 0; font-size: 28px; line-height: 35px; }
.danhmuc-main-formdau p { margin-top: 10px; font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.danhmuc-main-formluoi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 28px; }
.danhmuc-main-formorong { grid-column: 1 / -1; }
.danhmuc-main-formo label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 18px; font-weight: 700; }
.danhmuc-main-formo input, .danhmuc-main-formo select, .danhmuc-main-formo textarea {
  display: block; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--mau-vien-dam); border-radius: 0; background: #fff; font-size: 16px; color: var(--mau-chu); outline: 0;
  transition: border-color var(--chuyen), box-shadow var(--chuyen);
}
.danhmuc-main-formo select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url(../images/icons/icon-chevron-xuong.png) right 20px center / 10px auto no-repeat; cursor: pointer; }
.danhmuc-main-formo select:has(option[value=""]:checked) { color: var(--mau-goiy); }
.danhmuc-main-formo textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.danhmuc-main-formo ::placeholder { color: var(--mau-goiy); }
.danhmuc-main-formo input:focus, .danhmuc-main-formo select:focus, .danhmuc-main-formo textarea:focus { border-color: var(--mau-chinh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mau-chinh) 10%, transparent); }
.danhmuc-main-form .tccredit-chung-dongy { margin-top: 20px; }
.danhmuc-main-form .tccredit-chung-nutgui { margin-top: 24px; }
.danhmuc-main-form .tccredit-chung-nutgui input[type="submit"] { height: 48px; }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .danhmuc-main-noidung > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 500px; }
}
@media (max-width: 1199px) {
  .danhmuc-main-sanpham > .tccredit-chung-khung { grid-template-columns: 270px minmax(0, 1fr); }
  .danhmuc-main-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .danhmuc-main-noidung > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 440px; }
}
/* Từ 991px: bộ lọc thành panel trượt ra */
@media (max-width: 991px) {
  .danhmuc-main-sanpham > .tccredit-chung-khung { display: block; }
  .danhmuc-main-tuvan { display: none; }
  .danhmuc-main-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .danhmuc-main-boloc {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; display: flex; flex-direction: column; width: min(390px, 100%); padding: 0;
    transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s;
  }
  .danhmuc-boloc-mo { overflow: hidden; }
  .danhmuc-boloc-mo .danhmuc-main-boloc { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .danhmuc-main-bolocphu { position: fixed; inset: 0; z-index: 205; display: block; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .danhmuc-boloc-mo .danhmuc-main-bolocphu { opacity: 1; visibility: visible; }
  .danhmuc-main-bolocdau { flex: none; height: 64px; padding: 0 20px 0 20px; }
  .danhmuc-main-boloctieude strong { font-size: 18px; line-height: 23px; }
  .danhmuc-main-bolocxoa { display: none; }
  .danhmuc-main-bolocdong { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--mau-nen); transition: background-color var(--chuyen); }
  .danhmuc-main-bolocdong:hover { background: var(--mau-vien); }
  .danhmuc-main-bolocdong img { width: 12px; height: 12px; }
  .danhmuc-main-bolocthan { flex: 1; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; }
  .danhmuc-main-bolocnhom { padding: 24px 0 23px; }
  .danhmuc-main-bolocmo { pointer-events: none; }
  .danhmuc-main-bolocmo::before, .danhmuc-main-bolocmo::after { display: none; }
  .danhmuc-main-bolocnhom ul { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .danhmuc-main-bolocnhom input, .danhmuc-main-bolocnhom input[type="radio"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .danhmuc-main-bolocnhom label {
    position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; background: #fff; box-shadow: inset 0 0 0 1px var(--mau-vien-dam); font-size: 14px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: color var(--chuyen), background-color var(--chuyen), box-shadow var(--chuyen);
  }
  .danhmuc-main-bolocnhom label::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - .7px), var(--vien-chip, var(--mau-vien-dam)) calc(50% - .7px), var(--vien-chip, var(--mau-vien-dam)) calc(50% + .7px), transparent calc(50% + .7px)); }
  .danhmuc-main-bolocnhom input:checked + label { --vien-chip: var(--mau-chinh); background: var(--mau-hong); color: var(--mau-chinh); box-shadow: inset 0 0 0 1.5px var(--mau-chinh); }
  .danhmuc-main-bolocnhom input:checked + label::before { content: ""; width: 10px; height: 8px; background: url(../images/icons/icon-check-do.png) center / contain no-repeat; }
  .danhmuc-main-bolocnhom input:focus-visible + label { outline: 2px solid var(--mau-vang); outline-offset: 2px; }
  .danhmuc-main-bolocnut { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--mau-vien); }
  .danhmuc-main-bolocnutapdung { display: none; }
  .danhmuc-main-bolocnutxoa, .danhmuc-main-bolocnutketqua { display: block; }
  .danhmuc-main-bolocnutxoa input { background: #fff; color: var(--mau-chu); box-shadow: inset 0 0 0 1.5px var(--mau-chu); font-size: 14px; }
  .danhmuc-main-bolocnutxoa input:hover { background: var(--mau-chu); color: #fff; }
  .danhmuc-main-bolocnutketqua input { font-size: 14px; }

  .danhmuc-main-congcu { flex-wrap: wrap; gap: 12px 10px; }
  .danhmuc-main-nutloc {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--mau-chu); font-size: 14px; font-weight: 700;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  }
  .danhmuc-main-nutloc::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--mau-chu) calc(50% - 1px), var(--mau-chu) calc(50% + 1px), transparent calc(50% + 1px)); }
  .danhmuc-main-nutloc img { width: 15px; height: 14px; }
  .danhmuc-main-nutloc span:last-child { display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: -6px; border-radius: 10px; background: var(--mau-chinh); color: #fff; font-size: 12px; line-height: 1; }
  .danhmuc-main-nutloc:hover { background: var(--mau-nen); }
  .danhmuc-main-dangloc { display: block; order: 5; flex-basis: 100%; }
  .danhmuc-main-dangloc ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .danhmuc-main-dangloc button {
    position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; background: var(--mau-hong); box-shadow: inset 0 0 0 1px var(--mau-chinh); color: var(--mau-chinh); font-size: 12px; font-weight: 700;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  }
  .danhmuc-main-dangloc button::after { content: ""; width: 7px; height: 7px; background: url(../images/icons/icon-dong-do.png) center / contain no-repeat; }
  .danhmuc-main-dangloc button:hover { background: color-mix(in srgb, var(--mau-chinh) 14%, #fff); }
}
@media (max-width: 767px) {
  .danhmuc-main-sanpham { padding: 32px 0 30px; }
  .danhmuc-main-cotphai h1 { font-size: 24px; line-height: 30px; }
  .danhmuc-main-congcu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 18px; }
  .danhmuc-main-nutloc { grid-column: 1; grid-row: 1; height: 44px; padding: 0; }
  .danhmuc-main-sapxep { grid-column: 2; grid-row: 1; width: auto; height: 44px; margin: 0; padding-left: 14px; }
  .danhmuc-main-sapxep label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .danhmuc-main-sapxep select { background-position: right 16px center; }
  .danhmuc-main-ketqua { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; min-height: 32px; margin-top: 12px; font-size: 12px; line-height: 15px; }
  .danhmuc-main-ketqua p:first-child { display: none; }
  .danhmuc-main-ketqua p:last-child { display: block; }
  .danhmuc-main-dangloc { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0 108px; }
  .danhmuc-main-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 20px; }
  .danhmuc-main-luoi .tccredit-chung-sanphamnut { margin-top: auto; }
  .danhmuc-main-luoi:not(.danhmuc-main-hienhet) > .tccredit-chung-sanpham:nth-child(n + 9) { display: none; }
  .danhmuc-main-phantrang { display: none; }
  .danhmuc-main-xemthem { display: block; margin-top: 24px; }
  .danhmuc-main-tiendo p:first-child { text-align: center; font-size: 12px; line-height: 15px; color: var(--mau-phu); }
  .danhmuc-main-tiendo [role="progressbar"] { height: 4px; margin-top: 9px; background: var(--mau-vien); }
  .danhmuc-main-tiendo [role="progressbar"] span { display: block; width: 8.33%; height: 100%; background: var(--mau-chinh); transition: width .4s ease; }
  .danhmuc-main-nutxemthem {
    position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 16px; box-shadow: inset 0 0 0 1.5px var(--mau-chu); font-size: 14px; font-weight: 700;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background-color var(--chuyen), color var(--chuyen);
  }
  .danhmuc-main-nutxemthem::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--mau-chu) calc(50% - 1px), var(--mau-chu) calc(50% + 1px), transparent calc(50% + 1px)); }
  .danhmuc-main-nutxemthem:hover { background: var(--mau-chu); color: #fff; }
  .danhmuc-main-hienhet + .danhmuc-main-phantrang + .danhmuc-main-xemthem .danhmuc-main-nutxemthem { display: none; }

  .danhmuc-main-noidung { padding: 32px 0 164px; }
  .danhmuc-main-noidung > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .danhmuc-main-noidung h2 { line-height: 32px; }
  .danhmuc-main-noidungmota { margin-top: 16px; font-size: 14px; line-height: 21px; }
  .danhmuc-main-noidungmota p + p { margin-top: 12px; }
  .danhmuc-main-noidungcheck ul { gap: 12px; margin-top: 16px; }
  .danhmuc-main-noidungcheck li { font-size: 14px; line-height: 18px; gap: 8px; }
  .danhmuc-main-noidungthem { font-size: 14px; line-height: 21px; }
  .danhmuc-main-noidungthem h3 { font-size: 16px; line-height: 20px; }
  .danhmuc-main-noidungnut { margin-top: 16px; }
  .danhmuc-main-noidungnut button { font-size: 14px; }
  .danhmuc-main-form { padding: 28px 20px 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .danhmuc-main-formdau h2 { font-size: 20px; line-height: 25px; }
  .danhmuc-main-formdau p { margin-top: 8px; font-size: 12px; line-height: 15px; }
  .danhmuc-main-formluoi { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .danhmuc-main-form .tccredit-chung-dongy { font-size: 12px; }
}

/* =========================================================
   CHI TIẾT SẢN PHẨM
   ========================================================= */
/* ---------- Thông tin sản phẩm ---------- */
.chitiet-main-thongtin { padding: 60px 0; background: #fff; }
.chitiet-main-thongtin > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 530px); justify-content: space-between; gap: 40px; align-items: start; }

/* Gallery */
.chitiet-main-anhchinh { position: relative; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); background: var(--mau-nen); }
.chitiet-main-anhswiper img { width: 100%; aspect-ratio: 640 / 480; object-fit: cover; }
.chitiet-main-anhnhan { position: absolute; top: 24px; left: 24px; z-index: 2; pointer-events: none; }
.chitiet-main-anhnhan span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; background: var(--mau-chinh); color: #fff; font-size: 14px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.chitiet-main-anhdem { display: none; }
.chitiet-main-anhtruoc, .chitiet-main-anhsau { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; background: #fff; box-shadow: inset 0 0 0 1px var(--mau-vien); transition: background-color var(--chuyen), opacity var(--chuyen); }
.chitiet-main-anhtruoc { left: 12px; }
.chitiet-main-anhsau { right: 12px; }
.chitiet-main-anhtruoc img, .chitiet-main-anhsau img { width: 10px; height: auto; }
.chitiet-main-anhtruoc:hover, .chitiet-main-anhsau:hover { background: var(--mau-chinh); box-shadow: none; }
.chitiet-main-anhtruoc:hover img, .chitiet-main-anhsau:hover img { filter: brightness(0) invert(1); }
.chitiet-main-anhtruoc.swiper-button-disabled, .chitiet-main-anhsau.swiper-button-disabled { opacity: .4; cursor: default; }
.chitiet-main-anhnho { margin-top: 16px; }
.chitiet-main-thumbswiper .swiper-slide { position: relative; cursor: pointer; }
.chitiet-main-thumbswiper .swiper-slide::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--chuyen); }
.chitiet-main-thumbswiper .swiper-slide-thumb-active::after { box-shadow: inset 0 0 0 2px var(--mau-chinh); }
.chitiet-main-thumbswiper .swiper-slide:hover::after { box-shadow: inset 0 0 0 2px var(--mau-vien-dam); }
.chitiet-main-thumbswiper .swiper-slide-thumb-active:hover::after { box-shadow: inset 0 0 0 2px var(--mau-chinh); }
.chitiet-main-thumbswiper p { overflow: hidden; }
.chitiet-main-thumbswiper img { width: 100%; aspect-ratio: 148 / 112; object-fit: cover; transition: transform .4s ease; }
.chitiet-main-thumbswiper .swiper-slide:hover img { transform: scale(1.05); }
.chitiet-main-loiich { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 24px; }
.chitiet-main-loiichitem { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; background: var(--mau-nen); }
.chitiet-main-loiichitem p:first-child { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; }
.chitiet-main-loiichitem img { width: 17px; height: 20px; object-fit: contain; }
.chitiet-main-loiichitem strong { font-size: 16px; line-height: 20px; }

/* Chọn phiên bản / màu */
.chitiet-main-nhan { display: flex; align-items: center; gap: 8px; }
.chitiet-main-nhan span { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: var(--mau-nen-toi); color: #fff; font-size: 12px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.chitiet-main-nhan p:last-child { font-size: 12px; line-height: 15px; font-weight: 700; color: var(--mau-mo); }
.chitiet-main-chon h1 { margin-top: 12px; font-size: 40px; line-height: 51px; font-weight: 700; }
.chitiet-main-mota { margin-top: 9px; padding-bottom: 24px; border-bottom: 1px solid var(--mau-vien); font-size: 16px; line-height: 20px; color: var(--mau-phu); }
.chitiet-main-giamobile { display: none; }
.chitiet-main-luachon { margin-top: 23px; }
.chitiet-main-luachon + .chitiet-main-luachon { margin-top: 20px; }
.chitiet-main-luachon > p { font-size: 14px; line-height: 18px; font-weight: 700; }
.chitiet-main-luachon > p span { font-weight: 700; }
.chitiet-main-luachonnut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chitiet-main-phienban button {
  position: relative; height: 40px; padding: 0 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--mau-vien-dam); font-size: 14px; color: var(--mau-chu);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: color var(--chuyen), background-color var(--chuyen), box-shadow var(--chuyen);
}
.chitiet-main-phienban button::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - .7px), var(--vien-nut, var(--mau-vien-dam)) calc(50% - .7px), var(--vien-nut, var(--mau-vien-dam)) calc(50% + .7px), transparent calc(50% + .7px)); }
.chitiet-main-phienban button:hover { color: var(--mau-chinh); }
.chitiet-main-phienban button[aria-pressed="true"] { --vien-nut: var(--mau-chinh); background: var(--mau-hong); box-shadow: inset 0 0 0 1.5px var(--mau-chinh); color: var(--mau-chinh); font-weight: 700; }
.chitiet-main-mausac .chitiet-main-luachonnut { gap: 12px; }
.chitiet-main-mausac button { position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--chuyen); }
.chitiet-main-mausac button::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--mau); box-shadow: inset 0 0 0 1px var(--mau-vien-dam); transition: transform var(--chuyen); }
.chitiet-main-mausac button:hover::before { transform: scale(1.08); }
.chitiet-main-mausac button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mau-chinh); }

/* Bảng tính trả góp */
.chitiet-main-tinh { margin-top: 24px; padding: 16px 24px 29px; background: var(--mau-nen); }
.chitiet-main-tinhgia { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--mau-vien); }
.chitiet-main-tinhgia p:first-child { font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.chitiet-main-tinhgia strong { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--mau-chinh); }
.chitiet-main-tinhtieude { margin-top: 19px; }
.chitiet-main-tinhtieude strong { font-size: 20px; line-height: 25px; }
.chitiet-main-tinhchon { margin-top: 16px; }
.chitiet-main-tinhchon > p { font-size: 14px; line-height: 18px; font-weight: 700; }
.chitiet-main-tinhnut { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.chitiet-main-tinhnut button { height: 44px; background: #fff; box-shadow: inset 0 0 0 1px var(--mau-vien-dam); font-size: 16px; color: var(--mau-phu); transition: color var(--chuyen), box-shadow var(--chuyen), background-color var(--chuyen); }
.chitiet-main-tinhnut button:hover { color: var(--mau-chinh); box-shadow: inset 0 0 0 1px var(--mau-chinh); }
.chitiet-main-tinhnut button[aria-pressed="true"] { background: var(--mau-hong); box-shadow: inset 0 0 0 1.5px var(--mau-chinh); color: var(--mau-chinh); font-weight: 700; }
.chitiet-main-tinhdong { display: grid; gap: 12px; margin-top: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--mau-vien); }
.chitiet-main-tinhdong p, .chitiet-main-tinhgop p { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; line-height: 20px; }
.chitiet-main-tinhdong span { color: var(--mau-phu); }
.chitiet-main-tinhgop { margin-top: 20px; }
.chitiet-main-tinhgop span { font-weight: 700; }
.chitiet-main-tinhgop strong { font-size: 28px; line-height: 35px; color: var(--mau-chinh); }
.chitiet-main-tinhghichu { margin-top: 14px; font-size: 12px; line-height: 18px; color: var(--mau-mo); }
.chitiet-main-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.chitiet-main-nut a { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; font-size: 16px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.chitiet-main-nut p:first-child a { background: var(--mau-chinh); color: #fff; }
.chitiet-main-nut p:first-child a:hover { background: var(--mau-chinh-dam); }
.chitiet-main-nut p:last-child a { box-shadow: inset 0 0 0 1.5px var(--mau-chu); }
.chitiet-main-nut p:last-child a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--mau-chu) calc(50% - 1px), var(--mau-chu) calc(50% + 1px), transparent calc(50% + 1px)); }
.chitiet-main-nut p:last-child a:hover { background: var(--mau-chu); color: #fff; }
.chitiet-main-nut p:last-child a:hover img { filter: brightness(0) invert(1); }
.chitiet-main-nut img { width: 15px; height: 15px; }

/* ---------- Mô tả, thông số, thủ tục ---------- */
.chitiet-main-chitiet { padding: 60px 0 66px; background: var(--mau-nen); }
.chitiet-main-chitiet > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 860px) 420px; justify-content: space-between; gap: 20px; align-items: start; }
.chitiet-main-noidung { padding: 40px; background: #fff; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.chitiet-main-tab ul { display: flex; gap: 40px; border-bottom: 1px solid var(--mau-vien); }
.chitiet-main-tab button { position: relative; padding-bottom: 18px; font-size: 20px; line-height: 25px; font-weight: 700; color: var(--mau-mo); transition: color var(--chuyen); }
.chitiet-main-tab button span:last-child { display: none; }
.chitiet-main-tab button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--mau-chinh); transform: scaleX(0); transition: transform var(--chuyen); }
.chitiet-main-tab button:hover { color: var(--mau-chu); }
.chitiet-main-tab button[aria-current] { color: var(--mau-chu); }
.chitiet-main-tab button[aria-current]::after { transform: none; }
.chitiet-main-khoi { scroll-margin-top: 140px; }
.chitiet-main-khoi h2 { margin-top: 0; font-size: 28px; line-height: 35px; }
.chitiet-main-khoi:first-of-type { padding-top: 31px; }
.chitiet-main-khoi + .chitiet-main-khoi { margin-top: 50px; }
.chitiet-main-baiviet, .chitiet-main-baivietthem { font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.chitiet-main-baiviet { margin-top: 15px; }
.chitiet-main-baiviet p + p { margin-top: 26px; }
.chitiet-main-baiviet img { width: 100%; aspect-ratio: 780 / 400; object-fit: cover; }
.chitiet-main-baivietthem { padding-top: 20px; }
.chitiet-main-baivietthem h3 { font-size: 20px; line-height: 25px; color: var(--mau-chu); }
.chitiet-main-baivietthem h3 + p { margin-top: 8px; }
.chitiet-main-baivietthem p + h3 { margin-top: 20px; }
.chitiet-main-xemthem { margin-top: 16px; }
.chitiet-main-xemthem button { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--mau-chinh); }
.chitiet-main-xemthem button::after { content: ""; width: 10px; height: 6px; background: url(../images/icons/icon-chevron-xuong-do.png) center / contain no-repeat; transition: transform var(--chuyen); }
.chitiet-main-xemthem button[aria-expanded="true"]::after { transform: rotate(180deg); }
.chitiet-main-xemthem button:hover { color: var(--mau-chinh-dam); }
.chitiet-main-thongso { margin-top: 17px; }
.chitiet-main-thongso table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 20px; }
.chitiet-main-thongso caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chitiet-main-thongso tr:nth-child(odd) { background: var(--mau-nen); }
.chitiet-main-thongso th, .chitiet-main-thongso td { height: 48px; padding: 0 20px; text-align: left; vertical-align: middle; }
.chitiet-main-thongso th { width: 320px; font-weight: 400; color: var(--mau-phu); }
.chitiet-main-thongso th span:last-child { display: none; }
.chitiet-main-thongso td { padding-left: 0; font-weight: 700; }
.chitiet-main-buoc { display: grid; grid-template-columns: repeat(4, 200px); margin-top: 25px; }
.chitiet-main-buocitem { position: relative; padding-right: 24px; }
.chitiet-main-buocitem:not(:last-child)::before { content: ""; position: absolute; top: 23px; left: 48px; right: 0; height: 2px; background: repeating-linear-gradient(to right, var(--mau-chinh) 0 5px, transparent 5px 9px); }
.chitiet-main-buocso p { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #fff; color: var(--mau-chinh); font-size: 20px; line-height: 25px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--mau-chinh); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); transition: background-color var(--chuyen), color var(--chuyen); }
.chitiet-main-buocso p::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: linear-gradient(to bottom right, transparent calc(50% - 1.4px), var(--mau-chinh) calc(50% - 1.4px), var(--mau-chinh) calc(50% + 1.4px), transparent calc(50% + 1.4px)); }
.chitiet-main-buocitem:first-child .chitiet-main-buocso p, .chitiet-main-buocitem:hover .chitiet-main-buocso p { background: var(--mau-chinh); color: #fff; }
.chitiet-main-buocchu { margin-top: 20px; }
.chitiet-main-buocchu strong { font-size: 16px; line-height: 20px; }
.chitiet-main-buocchu p + p { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--mau-phu); }
.chitiet-main-dieukien { margin-top: 27px; padding: 24px 24px 26px; background: var(--mau-nen); border-left: 4px solid var(--mau-chinh); }
.chitiet-main-dieukien strong { font-size: 20px; line-height: 25px; }
.chitiet-main-dieukien ul { display: grid; gap: 12px; margin-top: 18px; }
.chitiet-main-dieukien li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 20px; }
.chitiet-main-dieukien li::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--mau-chinh) url(../images/icons/icon-check-trang.png) center / 9px auto no-repeat; }
.chitiet-main-thutuclink { margin-top: 22px; }
.chitiet-main-thutuclink a { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--mau-chinh); }
.chitiet-main-thutuclink img { width: 13px; height: auto; transition: transform var(--chuyen); }
.chitiet-main-thutuclink a:hover img { transform: translateX(4px); }

/* Cột phụ: hồ sơ + nhận bảng góp */
.chitiet-main-phu { position: sticky; top: 72px; display: grid; gap: 20px; }
.chitiet-main-hoso, .chitiet-main-tuvan { position: relative; padding: 32px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.chitiet-main-hoso { background: #fff; }
.chitiet-main-hoso::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 4px; background: var(--mau-chinh); }
.chitiet-main-phu h2 { margin: 0; font-size: 24px; line-height: 30px; }
.chitiet-main-hoso ul { display: grid; gap: 16px; margin-top: 20px; }
.chitiet-main-hoso li { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 20px; font-weight: 700; }
.chitiet-main-hoso span { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--mau-hong); }
.chitiet-main-hoso img { width: 19px; height: 18px; object-fit: contain; }
.chitiet-main-tuvan { background: var(--mau-chinh); color: #fff; }
.chitiet-main-tuvan h2 { color: #fff; }
.chitiet-main-tuvanmota { margin-top: 10px; font-size: 14px; line-height: 21px; }
.chitiet-main-tuvan form { display: grid; gap: 12px; margin-top: 23px; }
.chitiet-main-tuvanformo label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chitiet-main-tuvanformo input { display: block; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: #fff; font-size: 16px; color: var(--mau-chu); outline: 0; transition: box-shadow var(--chuyen); }
.chitiet-main-tuvanformo input::placeholder { color: var(--mau-goiy); }
.chitiet-main-tuvanformo input:focus { box-shadow: 0 0 0 3px var(--mau-vang); }
.chitiet-main-tuvan .tccredit-chung-loi p { color: #fff; font-weight: 700; }
.chitiet-main-tuvangui { margin-top: 4px; }
.chitiet-main-tuvangui input { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; width: 100%; height: 48px; border: 0; border-radius: 0; background: var(--mau-nen-toi); color: #fff; font-size: 16px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background-color var(--chuyen); }
.chitiet-main-tuvangui input:hover { background: #333; }

/* ---------- Sản phẩm tương tự ---------- */
.chitiet-main-tuongtu { padding: 60px 0 160px; background: #fff; overflow: hidden; }
.chitiet-main-tuongtudau { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.chitiet-main-tuongtulink { padding-bottom: 14px; }
.chitiet-main-tuongtulink a { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--mau-chinh); white-space: nowrap; }
.chitiet-main-tuongtulink img { width: 13px; height: auto; transition: transform var(--chuyen); }
.chitiet-main-tuongtulink a:hover img { transform: translateX(4px); }
.chitiet-main-tuongtuswiper { margin-top: 39px; padding-top: 4px; }
.chitiet-main-tuongtuswiper .swiper-slide { height: auto; display: flex; }
.chitiet-main-tuongtuswiper .tccredit-chung-sanpham { width: 100%; }
.chitiet-main-tuongtucham { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.chitiet-main-tuongtucham button { width: 8px; height: 8px; padding: 0; border-radius: 0; background: var(--mau-vien-dam); opacity: 1; transition: width var(--chuyen), background-color var(--chuyen); }
.chitiet-main-tuongtucham .swiper-pagination-bullet-active { width: 24px; background: var(--mau-chinh); }
.chitiet-main-tuongtucham.swiper-pagination-lock { display: none; }
.chitiet-main-tuongtunut { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .chitiet-main-thongtin > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
  .chitiet-main-chitiet > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 380px; }
  .chitiet-main-buoc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .chitiet-main-thongtin > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .chitiet-main-loiichitem strong { font-size: 14px; line-height: 18px; }
  .chitiet-main-tinhgia strong { font-size: 26px; line-height: 32px; }
  .chitiet-main-tinhgop strong { font-size: 24px; line-height: 30px; }
  .chitiet-main-nut { grid-template-columns: 1fr; gap: 12px; }
  .chitiet-main-chitiet > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 320px; }
  .chitiet-main-noidung { padding: 32px; }
  .chitiet-main-thongso th { width: 40%; }
  .chitiet-main-hoso, .chitiet-main-tuvan { padding: 28px 24px; }
}
@media (max-width: 991px) {
  .chitiet-main-thongtin > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .chitiet-main-loiich { gap: 8px; }
  .chitiet-main-chon h1 { font-size: 32px; line-height: 40px; }
  .chitiet-main-loiichitem { padding: 8px; }
  .chitiet-main-chitiet > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr); }
  .chitiet-main-phu { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .chitiet-main-khoi { scroll-margin-top: 80px; }
}
@media (max-width: 767px) {
  /* Thông tin sản phẩm: gallery tràn viền, lợi ích xuống dưới nút */
  .chitiet-main-thongtin { padding: 0 0 30px; }
  .chitiet-main-thongtin > .tccredit-chung-khung { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .chitiet-main-anhchinh, .chitiet-main-anhnho, .chitiet-main-chon, .chitiet-main-loiich { min-width: 0; }
  .chitiet-main-hinh { display: contents; }
  .chitiet-main-anhchinh { order: 1; margin: 0 -20px; clip-path: none; }
  .chitiet-main-anhswiper img { aspect-ratio: 390 / 300; }
  .chitiet-main-anhnhan { top: 16px; left: 20px; }
  .chitiet-main-anhnhan span { height: 24px; padding: 0 10px; font-size: 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
  .chitiet-main-anhdem { position: absolute; right: 20px; bottom: 16px; z-index: 2; display: block; }
  .chitiet-main-anhdem p { display: flex; align-items: center; justify-content: center; width: 48px; height: 24px; background: rgba(17, 17, 17, .7); color: #fff; font-size: 12px; font-weight: 700; }
  .chitiet-main-anhtruoc { left: 12px; }
  .chitiet-main-anhsau { right: 12px; }
  .chitiet-main-anhnho { order: 2; margin-top: 12px; }
  .chitiet-main-thumbswiper img { aspect-ratio: 1 / 1; }
  .chitiet-main-thumbswiper::after { content: attr(data-them); position: absolute; top: 0; bottom: 0; left: calc(75% + 7.5px); right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, .6); color: #fff; font-size: 20px; font-weight: 700; pointer-events: none; transition: opacity var(--chuyen); }
  .chitiet-main-thumbswiper:has(.swiper-slide:nth-child(n + 4).swiper-slide-thumb-active)::after { opacity: 0; }
  .chitiet-main-chon { order: 3; margin-top: 20px; }
  .chitiet-main-loiich { order: 4; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 20px; }
  .chitiet-main-loiichitem { gap: 8px; min-height: 48px; padding: 8px 6px 8px 14px; }
  .chitiet-main-loiichitem p:first-child { width: auto; height: auto; background: none; }
  .chitiet-main-loiichitem img { width: 14px; height: 16px; }
  .chitiet-main-loiichitem strong { font-size: 12px; line-height: 15px; }
  .chitiet-main-chon h1 { margin-top: 12px; font-size: 24px; line-height: 30px; }
  .chitiet-main-mota { margin-top: 6px; padding-bottom: 0; border: 0; font-size: 14px; line-height: 18px; }
  .chitiet-main-giamobile { display: block; margin-top: 14px; padding-bottom: 21px; border-bottom: 1px solid var(--mau-vien); }
  .chitiet-main-giamobile p:first-child { font-size: 12px; line-height: 15px; color: var(--mau-mo); }
  .chitiet-main-giamobile strong { display: block; margin-top: 5px; font-size: 24px; line-height: 30px; color: var(--mau-chinh); }
  .chitiet-main-luachon { margin-top: 19px; }
  .chitiet-main-phienban button { padding: 0 14px; }
  .chitiet-main-tinh { margin-top: 24px; padding: 16px 16px 18px; }
  .chitiet-main-tinhgia { display: none; }
  .chitiet-main-tinhtieude { margin-top: 0; }
  .chitiet-main-tinhtieude strong { font-size: 18px; line-height: 23px; }
  .chitiet-main-tinhnut button { font-size: 14px; }
  .chitiet-main-tinhdong { gap: 10px; margin-top: 20px; }
  .chitiet-main-tinhdong p, .chitiet-main-tinhgop p { font-size: 14px; line-height: 18px; }
  .chitiet-main-tinhgop { margin-top: 15px; }
  .chitiet-main-tinhgop p { flex-direction: column; align-items: flex-start; gap: 6px; }
  .chitiet-main-tinhgop strong { font-size: 24px; line-height: 30px; }
  .chitiet-main-tinhghichu { margin-top: 11px; }
  .chitiet-main-nut { margin-top: 16px; }
  .chitiet-main-nut a { height: 48px; }
  .chitiet-main-nut p:last-child { display: none; }

  /* Mô tả – thông số – thủ tục */
  .chitiet-main-chitiet { padding: 0; background: #fff; }
  .chitiet-main-chitiet > .tccredit-chung-khung { gap: 0; }
  .chitiet-main-noidung { padding: 24px 0 32px; clip-path: none; }
  .chitiet-main-tab { position: sticky; top: 64px; z-index: 5; margin: 0 -20px; padding: 0 20px; background: #fff; }
  .chitiet-main-tab ul { gap: 24px; }
  .chitiet-main-tab button { padding-bottom: 12px; font-size: 14px; line-height: 18px; }
  .chitiet-main-tab button::after { height: 3px; }
  .chitiet-main-tab button span:first-child { display: none; }
  .chitiet-main-tab button span:last-child { display: inline; }
  .chitiet-main-khoi { scroll-margin-top: 120px; }
  .chitiet-main-khoi:first-of-type { padding-top: 24px; }
  .chitiet-main-khoi + .chitiet-main-khoi { margin-top: 40px; }
  .chitiet-main-khoi h2 { font-size: 20px; line-height: 26px; }
  .chitiet-main-baiviet, .chitiet-main-baivietthem { font-size: 14px; line-height: 21px; }
  .chitiet-main-baiviet { margin-top: 12px; }
  .chitiet-main-baiviet p + p { margin-top: 16px; }
  .chitiet-main-baiviet img { aspect-ratio: 350 / 220; }
  .chitiet-main-baivietthem h3 { font-size: 16px; line-height: 20px; }
  .chitiet-main-xemthem { margin-top: 8px; }
  .chitiet-main-xemthem button { font-size: 14px; }
  .chitiet-main-thongso { margin-top: 16px; }
  .chitiet-main-thongso table { font-size: 14px; line-height: 18px; }
  .chitiet-main-thongso th, .chitiet-main-thongso td { height: 40px; padding: 4px 12px; }
  .chitiet-main-thongso th { width: 45%; }
  .chitiet-main-thongso td { padding-left: 0; }
  .chitiet-main-thongso th span:first-child { display: none; }
  .chitiet-main-thongso th span:last-child { display: inline; }
  .chitiet-main-buoc { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .chitiet-main-buocitem { display: flex; gap: 12px; padding: 0; }
  .chitiet-main-buocitem:not(:last-child)::before { top: 36px; bottom: -20px; left: 17px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(to bottom, var(--mau-chinh) 0 3px, transparent 3px 6px); }
  .chitiet-main-buocso p { width: 36px; height: 36px; font-size: 16px; line-height: 20px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
  .chitiet-main-buocso p::after { width: 9px; height: 9px; }
  .chitiet-main-buocchu { margin-top: 0; }
  .chitiet-main-buocchu p + p { margin-top: 4px; }
  .chitiet-main-dieukien { margin-top: 24px; padding: 16px 16px 18px; }
  .chitiet-main-dieukien strong { font-size: 16px; line-height: 20px; }
  .chitiet-main-dieukien ul { gap: 10px; margin-top: 14px; }
  .chitiet-main-dieukien li { gap: 10px; font-size: 14px; line-height: 20px; }
  .chitiet-main-thutuclink { margin-top: 20px; }
  .chitiet-main-thutuclink a { font-size: 14px; }
  .chitiet-main-phu { grid-template-columns: 1fr; gap: 16px; margin: 0 -20px; padding: 24px 20px 32px; background: var(--mau-nen); }
  .chitiet-main-hoso, .chitiet-main-tuvan { padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .chitiet-main-hoso::before { width: 64px; }
  .chitiet-main-phu h2 { font-size: 20px; line-height: 25px; }
  .chitiet-main-hoso ul { gap: 12px; margin-top: 16px; }
  .chitiet-main-hoso li { gap: 14px; font-size: 14px; line-height: 18px; }
  .chitiet-main-hoso span { width: 36px; height: 36px; }
  .chitiet-main-hoso img { width: 16px; height: 16px; }
  .chitiet-main-tuvanmota { margin-top: 8px; font-size: 12px; line-height: 18px; }
  .chitiet-main-tuvan form { gap: 10px; margin-top: 16px; }
  .chitiet-main-tuvangui { margin-top: 0; }

  /* Đường dẫn 1 dòng, tên sản phẩm dài thì rút gọn */
  .chitiet-body .tccredit-main-duongdan ul { flex-wrap: nowrap; min-height: 40px; white-space: nowrap; }
  .chitiet-body .tccredit-main-duongdan li:last-child { min-width: 0; }
  .chitiet-body .tccredit-main-duongdan li:last-child span { overflow: hidden; text-overflow: ellipsis; }

  /* Sản phẩm tương tự */
  .chitiet-main-tuongtuswiper .tccredit-chung-sanphamnut { margin-top: auto; }
  .chitiet-main-tuongtu { padding: 32px 0 164px; }
  .chitiet-main-tuongtulink { display: none; }
  .chitiet-main-tuongtuswiper { margin-top: 20px; }
  .chitiet-main-tuongtunut { display: block; margin-top: 20px; }
  .chitiet-main-tuongtunut a { display: flex; width: 100%; font-size: 14px; }
}

/* =========================================================
   TRANG GIỚI THIỆU
   ========================================================= */
/* ---------- Đầu section: tiêu đề trái + mô tả phải ---------- */
.gioithieu-main-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.gioithieu-main-daumota { flex: none; width: 530px; padding-top: 44px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }

/* ---------- S02: Hình ảnh nổi bật ---------- */
.gioithieu-main-hinhanh { padding: 60px 0; }
.gioithieu-main-hinhanhluoi { display: grid; grid-template-columns: minmax(0, 860fr) minmax(0, 420fr); grid-template-rows: auto auto; gap: 20px; }
.gioithieu-main-hinhanhlon { position: relative; grid-row: span 2; }
.gioithieu-main-hinhanhanh, .gioithieu-main-hinhanhphu { overflow: hidden; height: 100%; }
.gioithieu-main-hinhanhanh p, .gioithieu-main-hinhanhphu p { height: 100%; }
.gioithieu-main-hinhanhanh { clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px); }
.gioithieu-main-hinhanhanh img { width: 100%; height: 100%; aspect-ratio: 860 / 560; object-fit: cover; transition: transform .6s ease; }
.gioithieu-main-hinhanhphu img { width: 100%; height: 100%; aspect-ratio: 420 / 270; object-fit: cover; transition: transform .6s ease; }
.gioithieu-main-hinhanhlon + .gioithieu-main-hinhanhphu { clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.gioithieu-main-hinhanhlon:hover img, .gioithieu-main-hinhanhphu:hover img { transform: scale(1.05); }
.gioithieu-main-hinhanhthe {
  position: absolute; left: 0; bottom: 0; width: 530px; max-width: calc(100% - 40px); padding: 20px 40px; background: var(--mau-chinh); color: #fff;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 25px, 100% 100%, 0 100%);
}
.gioithieu-main-hinhanhthe h1 { font-size: 60px; line-height: 76px; font-weight: 700; }
.gioithieu-main-hinhanhthe p { margin-top: 12px; font-size: 16px; line-height: 24px; }

/* Thành tựu */
.gioithieu-main-thanhtuu { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; padding: 32px 0 28px; border: 1px solid var(--mau-vien); border-top: 4px solid var(--mau-chinh); background: #fff; }
.gioithieu-main-thanhtuuitem { display: flex; align-items: flex-start; gap: 20px; padding: 0 12px 0 42px; }
.gioithieu-main-thanhtuuitem:first-child { padding-left: 32px; }
.gioithieu-main-thanhtuuitem + .gioithieu-main-thanhtuuitem { border-left: 1px solid var(--mau-vien); }
.gioithieu-main-thanhtuuicon { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: 8px; background: var(--mau-hong); transition: background-color var(--chuyen); }
.gioithieu-main-thanhtuuicon img { max-width: 28px; max-height: 28px; width: auto; height: auto; transition: filter var(--chuyen); }
.gioithieu-main-thanhtuuitem:hover .gioithieu-main-thanhtuuicon { background: var(--mau-chinh); }
.gioithieu-main-thanhtuuitem:hover .gioithieu-main-thanhtuuicon img { filter: brightness(0) invert(1); }
.gioithieu-main-thanhtuuchu strong { display: block; font-size: 32px; line-height: 40px; font-weight: 700; color: var(--mau-chinh); font-variant-numeric: tabular-nums; }
.gioithieu-main-thanhtuuchu p + p { margin-top: 10px; font-size: 16px; line-height: 20px; color: var(--mau-phu); }

/* ---------- S03: Thanh điều hướng dính ---------- */
.gioithieu-main-dieuhuong { position: sticky; top: 48px; z-index: 50; background: var(--mau-nen-toi); }
.gioithieu-main-dieuhuongkhung { overflow-x: auto; scrollbar-width: none; }
.gioithieu-main-dieuhuongkhung::-webkit-scrollbar { display: none; }
.gioithieu-main-dieuhuong ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gioithieu-main-dieuhuong li { position: relative; }
.gioithieu-main-dieuhuong li + li::before { content: ""; position: absolute; left: -10px; top: 24px; bottom: 24px; width: 1px; background: rgba(255, 255, 255, .15); }
.gioithieu-main-dieuhuong a {
  display: flex; align-items: center; justify-content: center; gap: 11px; height: 80px; padding: 0 16px; white-space: nowrap;
  font-size: 20px; line-height: 25px; font-weight: 700; color: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.gioithieu-main-dieuhuong span { font-size: 14px; line-height: 18px; opacity: .9; }
.gioithieu-main-dieuhuong a:hover { color: var(--mau-vang); }
.gioithieu-main-dieuhuong a[aria-current] { background: var(--mau-chinh); color: #fff; }

/* ---------- S04: Lịch sử phát triển ---------- */
.gioithieu-main-lichsu { padding: 60px 0; }
.gioithieu-main-lichsuluoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.gioithieu-main-lichsuitem { position: relative; display: flex; flex-direction: column; }
.gioithieu-main-lichsunam p { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--mau-chu); }
.gioithieu-main-lichsuitem[data-hientai] .gioithieu-main-lichsunam p { color: var(--mau-chinh); }
.gioithieu-main-lichsumoc { position: relative; height: 20px; margin-top: 19px; }
.gioithieu-main-lichsumoc::before { content: ""; position: absolute; left: 0; right: -20px; top: 9px; height: 2px; background: var(--mau-chinh); }
.gioithieu-main-lichsuitem[data-hientai] .gioithieu-main-lichsumoc::before { right: 0; background: var(--mau-vien); }
.gioithieu-main-lichsumoc::after { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mau-chinh); box-shadow: 0 0 0 4px #fff; }
.gioithieu-main-lichsuitem[data-hientai] .gioithieu-main-lichsumoc::after { box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--mau-chinh) 40%, transparent); animation: gioithieu-nhip 2s ease-in-out infinite; }
@keyframes gioithieu-nhip { 0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--mau-chinh) 40%, transparent); } 50% { box-shadow: 0 0 0 4px #fff, 0 0 0 10px color-mix(in srgb, var(--mau-chinh) 15%, transparent); } }
.gioithieu-main-lichsuchu { margin-top: 27px; }
.gioithieu-main-lichsuchu h3 { font-size: 20px; line-height: 25px; font-weight: 700; }
.gioithieu-main-lichsuchu p { margin-top: 13px; max-width: 300px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.gioithieu-main-lichsuanh { margin-top: auto; padding-top: 20px; }
.gioithieu-main-lichsuanh p { overflow: hidden; }
.gioithieu-main-lichsuitem[data-hientai] .gioithieu-main-lichsuanh p { clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.gioithieu-main-lichsuanh img { width: 100%; aspect-ratio: 310 / 180; object-fit: cover; transition: transform .5s ease; }
.gioithieu-main-lichsuitem:hover .gioithieu-main-lichsuanh img { transform: scale(1.05); }
.gioithieu-main-lichsuitem:hover h3 { color: var(--mau-chinh); }

/* ---------- S05: Tầm nhìn sứ mệnh ---------- */
.gioithieu-main-tamnhin { padding: 60px 0; background: var(--mau-nen); }
.gioithieu-main-tamnhinluoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.gioithieu-main-tamnhinanh { position: relative; }
.gioithieu-main-tamnhinanh p { overflow: hidden; height: 100%; clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 26px); }
.gioithieu-main-tamnhinanh img { width: 100%; height: 100%; aspect-ratio: 640 / 460; object-fit: cover; transition: transform .6s ease; }
.gioithieu-main-tamnhinanh:hover img { transform: scale(1.05); }
.gioithieu-main-tamnhinanh::after { content: ""; position: absolute; left: 28px; top: 28px; z-index: 1; width: 72px; height: 24px; background: url(../images/icons/deco-xx-do.png) center / contain no-repeat; }
.gioithieu-main-tamnhinthe { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.gioithieu-main-tamnhinitem {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; padding: 40px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); transition: transform var(--chuyen);
}
.gioithieu-main-tamnhinitem:first-child { background: var(--mau-chinh); color: #fff; }
.gioithieu-main-tamnhinitem:hover { transform: translateY(-4px); }
.gioithieu-main-tamnhinicon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--mau-hong); }
.gioithieu-main-tamnhinitem:first-child .gioithieu-main-tamnhinicon { background: #fff; }
.gioithieu-main-tamnhinicon img { width: auto; height: auto; max-width: 28px; max-height: 26px; }
.gioithieu-main-tamnhinchu { padding-top: 13px; }
.gioithieu-main-tamnhinchu h3 { font-size: 28px; line-height: 35px; font-weight: 700; }
.gioithieu-main-tamnhinchu p { margin-top: 14px; max-width: 470px; font-size: 16px; line-height: 24px; }

.gioithieu-main-giatri { margin-top: 59px; }
.gioithieu-main-giatri h3 { font-size: 28px; line-height: 35px; font-weight: 700; }
.gioithieu-main-giatriluoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.gioithieu-main-giatriitem {
  position: relative; min-height: 204px; padding: 36px 32px 30px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); transition: transform var(--chuyen), box-shadow var(--chuyen);
}
.gioithieu-main-giatriitem::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 4px; background: var(--mau-chinh); transition: width .4s ease; }
.gioithieu-main-giatriitem:hover { transform: translateY(-4px); }
.gioithieu-main-giatriitem:hover::before { width: 100%; }
.gioithieu-main-giatriicon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.gioithieu-main-giatriicon img { width: auto; height: auto; max-width: 28px; max-height: 28px; }
.gioithieu-main-giatrichu { margin-top: 15px; }
.gioithieu-main-giatrichu strong { display: block; font-size: 24px; line-height: 30px; font-weight: 700; }
.gioithieu-main-giatrichu p + p { margin-top: 13px; font-size: 14px; line-height: 21px; color: var(--mau-phu); }

/* ---------- S06: Đội ngũ nhân sự ---------- */
.gioithieu-main-doingu { padding: 60px 0 62px; }
.gioithieu-main-doinguluoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.gioithieu-main-doinguanh { position: relative; }
.gioithieu-main-doinguanh p { overflow: hidden; background: #e3e3e3; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.gioithieu-main-doinguanh img { width: 100%; aspect-ratio: 310 / 360; object-fit: cover; object-position: top; transition: transform .5s ease; }
.gioithieu-main-doinguanh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--mau-vien); transition: background-color var(--chuyen); }
.gioithieu-main-doinguitem:first-child .gioithieu-main-doinguanh::after, .gioithieu-main-doinguitem:hover .gioithieu-main-doinguanh::after { background: var(--mau-chinh); }
.gioithieu-main-doinguitem:hover img { transform: scale(1.05); }
.gioithieu-main-doinguchu { margin-top: 27px; }
.gioithieu-main-doinguchu h3 { font-size: 24px; line-height: 30px; font-weight: 700; transition: color var(--chuyen); }
.gioithieu-main-doinguitem:hover h3 { color: var(--mau-chinh); }
.gioithieu-main-doinguchu p { margin-top: 9px; font-size: 16px; line-height: 20px; color: var(--mau-phu); }

/* ---------- S07: Cơ sở vật chất (section cuối: chừa chỗ hộp CTA 100px) ---------- */
.gioithieu-main-coso { padding: 60px 0 160px; background: var(--mau-nen); }
.gioithieu-main-cosoluoi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 52px; }
.gioithieu-main-cosoitem { overflow: hidden; }
.gioithieu-main-cosoitem:first-child { grid-row: span 2; clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px); }
.gioithieu-main-cosoitem:nth-child(3), .gioithieu-main-cosoitem:nth-child(4) { clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.gioithieu-main-cosoitem p { height: 100%; }
.gioithieu-main-cosoitem img { width: 100%; height: 100%; aspect-ratio: 310 / 220; object-fit: cover; transition: transform .5s ease; }
.gioithieu-main-cosoitem:first-child img { aspect-ratio: 640 / 460; }
.gioithieu-main-cosoitem:hover img { transform: scale(1.05); }

/* Mục được cuộn tới không bị thanh dính che */
.gioithieu-main-lichsu, .gioithieu-main-tamnhin, .gioithieu-main-doingu, .gioithieu-main-coso { scroll-margin-top: 128px; }

/* ---------- Responsive trang giới thiệu ---------- */
@media (max-width: 1399px) {
  .gioithieu-main-daumota { width: 460px; }
  .gioithieu-main-thanhtuuitem { padding: 0 20px 0 24px; gap: 16px; }
  .gioithieu-main-thanhtuuitem:first-child { padding-left: 24px; }
  .gioithieu-main-dieuhuong a { font-size: 18px; }
}

@media (max-width: 1199px) {
  .gioithieu-main-hinhanhthe h1 { font-size: 44px; line-height: 56px; }
  .gioithieu-main-hinhanhthe { padding: 20px 32px; }
  .gioithieu-main-thanhtuu { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .gioithieu-main-thanhtuuitem:nth-child(3) { border-left: 0; padding-left: 24px; }
  .gioithieu-main-dieuhuong ul { gap: 0; }
  .gioithieu-main-dieuhuong li + li::before { left: 0; }
  .gioithieu-main-dieuhuong a { gap: 8px; font-size: 16px; }
  .gioithieu-main-daumota { width: 400px; padding-top: 40px; }
  .gioithieu-main-tamnhinitem { padding: 28px; gap: 20px; }
  .gioithieu-main-tamnhinchu h3 { font-size: 24px; line-height: 30px; }
  .gioithieu-main-giatriluoi { grid-template-columns: repeat(2, 1fr); }
  .gioithieu-main-giatriitem { min-height: 0; }
}

@media (max-width: 991px) {
  .gioithieu-main-dieuhuong { top: 64px; }
  .gioithieu-main-dieuhuong ul { display: flex; }
  .gioithieu-main-dieuhuong li { flex: 1 0 auto; }
  .gioithieu-main-dieuhuong a { height: 60px; padding: 0 20px; }
  .gioithieu-main-dau { flex-direction: column; gap: 0; }
  .gioithieu-main-daumota { width: auto; max-width: 640px; padding-top: 16px; }
  .gioithieu-main-hinhanhluoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gioithieu-main-hinhanhlon { grid-column: 1 / -1; grid-row: auto; }
  .gioithieu-main-lichsuluoi { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .gioithieu-main-lichsuitem .gioithieu-main-lichsumoc::before { right: 0; }
  .gioithieu-main-tamnhinluoi { grid-template-columns: 1fr; }
  .gioithieu-main-doinguluoi { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .gioithieu-main-cosoluoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gioithieu-main-cosoitem:first-child { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 767px) {
  .gioithieu-main-daumota { font-size: 14px; line-height: 21px; padding-top: 12px; }

  /* Hình ảnh nổi bật: thẻ đỏ nằm dưới ảnh */
  .gioithieu-main-hinhanh { padding: 24px 0 40px; }
  .gioithieu-main-hinhanhluoi { gap: 12px; }
  .gioithieu-main-hinhanhanh { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
  .gioithieu-main-hinhanhanh, .gioithieu-main-hinhanhanh p { height: auto; }
  .gioithieu-main-hinhanhanh img { height: auto; aspect-ratio: 350 / 240; }
  .gioithieu-main-hinhanhthe { position: static; width: auto; max-width: none; padding: 20px; clip-path: none; }
  .gioithieu-main-hinhanhthe h1 { font-size: 32px; line-height: 40px; }
  .gioithieu-main-hinhanhthe p { margin-top: 8px; font-size: 14px; line-height: 21px; }
  .gioithieu-main-hinhanhlon + .gioithieu-main-hinhanhphu { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .gioithieu-main-thanhtuu { margin-top: 24px; padding: 20px 0; row-gap: 20px; }
  .gioithieu-main-thanhtuuitem, .gioithieu-main-thanhtuuitem:first-child, .gioithieu-main-thanhtuuitem:nth-child(3) { flex-direction: column; gap: 10px; padding: 0 12px 0 16px; }
  .gioithieu-main-thanhtuuicon { width: 40px; height: 40px; margin-top: 0; }
  .gioithieu-main-thanhtuuicon img { max-width: 22px; max-height: 22px; }
  .gioithieu-main-thanhtuuchu strong { font-size: 24px; line-height: 30px; }
  .gioithieu-main-thanhtuuchu p + p { margin-top: 4px; font-size: 13px; line-height: 18px; }

  /* Thanh điều hướng cuộn ngang */
  .gioithieu-main-dieuhuong > .tccredit-chung-khung { padding: 0; }
  .gioithieu-main-dieuhuong a { height: 52px; padding: 0 16px; font-size: 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  .gioithieu-main-dieuhuong span { font-size: 12px; }
  .gioithieu-main-dieuhuong li + li::before { top: 16px; bottom: 16px; }

  /* Lịch sử: timeline dọc */
  .gioithieu-main-lichsu { padding: 40px 0; }
  .gioithieu-main-lichsuluoi { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .gioithieu-main-lichsuitem { display: block; padding: 0 0 32px 36px; }
  .gioithieu-main-lichsuitem[data-hientai] { padding-bottom: 0; }
  .gioithieu-main-lichsuitem::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: -14px; width: 2px; background: var(--mau-chinh); }
  .gioithieu-main-lichsuitem[data-hientai]::before { display: none; }
  .gioithieu-main-lichsunam p { font-size: 24px; line-height: 30px; }
  .gioithieu-main-lichsumoc { position: absolute; left: 0; top: 5px; margin: 0; width: 20px; }
  .gioithieu-main-lichsumoc::before { display: none; }
  .gioithieu-main-lichsuchu { margin-top: 10px; }
  .gioithieu-main-lichsuchu h3 { font-size: 18px; line-height: 23px; }
  .gioithieu-main-lichsuchu p { margin-top: 8px; max-width: none; font-size: 14px; line-height: 21px; }
  .gioithieu-main-lichsuanh { padding-top: 16px; }

  /* Tầm nhìn sứ mệnh */
  .gioithieu-main-tamnhin { padding: 40px 0; }
  .gioithieu-main-tamnhinluoi { gap: 12px; margin-top: 24px; }
  .gioithieu-main-tamnhinanh::after { left: 16px; top: 16px; width: 54px; height: 18px; }
  .gioithieu-main-tamnhinthe { grid-template-rows: auto; gap: 12px; }
  .gioithieu-main-tamnhinitem { grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .gioithieu-main-tamnhinicon { width: 48px; height: 48px; }
  .gioithieu-main-tamnhinicon img { max-width: 22px; max-height: 20px; }
  .gioithieu-main-tamnhinchu { padding-top: 8px; }
  .gioithieu-main-tamnhinchu h3 { font-size: 20px; line-height: 25px; }
  .gioithieu-main-tamnhinchu p { margin-top: 8px; font-size: 14px; line-height: 21px; }
  .gioithieu-main-giatri { margin-top: 32px; }
  .gioithieu-main-giatri h3 { font-size: 20px; line-height: 25px; }
  .gioithieu-main-giatriluoi { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .gioithieu-main-giatriitem { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 24px 20px 20px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .gioithieu-main-giatrichu { margin-top: 2px; }
  .gioithieu-main-giatrichu strong { font-size: 18px; line-height: 23px; }
  .gioithieu-main-giatrichu p + p { margin-top: 6px; }

  /* Đội ngũ */
  .gioithieu-main-doingu { padding: 40px 0; }
  .gioithieu-main-doinguluoi { gap: 24px 12px; margin-top: 24px; }
  .gioithieu-main-doinguanh p { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .gioithieu-main-doinguchu { margin-top: 16px; }
  .gioithieu-main-doinguchu h3 { font-size: 16px; line-height: 20px; }
  .gioithieu-main-doinguchu p { margin-top: 4px; font-size: 13px; line-height: 18px; }

  /* Cơ sở vật chất (section cuối: 40px + 124px hộp CTA) */
  .gioithieu-main-coso { padding: 40px 0 164px; }
  .gioithieu-main-cosoluoi { gap: 12px; margin-top: 24px; }
  .gioithieu-main-cosoitem:first-child { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
  .gioithieu-main-cosoitem:nth-child(3), .gioithieu-main-cosoitem:nth-child(4) { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .gioithieu-main-lichsu, .gioithieu-main-tamnhin, .gioithieu-main-doingu, .gioithieu-main-coso { scroll-margin-top: 116px; }
}

/* =========================================================
   TIN TỨC (tin-tuc.html) + thành phần tin dùng chung
   ========================================================= */

/* ---------- Meta tin: nhãn danh mục + ngày ---------- */
.tccredit-chung-tinthechu > p:first-child,
.tintuc-main-bailonchu > p:first-child,
.tintuc-main-noibatchu > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; line-height: 15px; color: var(--mau-mo); }
.tccredit-chung-tinthechu > p:first-child span,
.tintuc-main-bailonchu > p:first-child span,
.tintuc-main-noibatchu > p:first-child span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; background: var(--mau-chinh); color: #fff; font-weight: 700; white-space: nowrap; }
.tccredit-chung-tinthechu time,
.tintuc-main-bailonchu time,
.tintuc-main-noibatchu time { display: inline-flex; align-items: center; gap: 6px; }
.tccredit-chung-tinthechu time::before,
.tintuc-main-bailonchu time::before,
.tintuc-main-noibatchu time::before { content: ""; width: 12px; height: 12px; background: url(../images/icons/icon-dongho-xam.png) center / contain no-repeat; }

/* ---------- Thẻ tin (lưới) ---------- */
.tccredit-chung-tinthe {
  display: flex; flex-direction: column; background: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform var(--chuyen), box-shadow var(--chuyen);
}
.tccredit-chung-tinthe:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.tccredit-chung-tintheanh p { overflow: hidden; background: #e3e3e3; }
.tccredit-chung-tintheanh img { width: 100%; aspect-ratio: 420 / 236; object-fit: cover; transition: transform .6s ease; }
.tccredit-chung-tinthe:hover .tccredit-chung-tintheanh img { transform: scale(1.05); }
.tccredit-chung-tinthechu { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 26px; }
.tccredit-chung-tinthechu h3 { margin-top: 15px; font-size: 20px; line-height: 30px; font-weight: 700; }
.tccredit-chung-tinthechu h3 a:hover { color: var(--mau-chinh); }
.tccredit-chung-tinthechu > p:nth-of-type(2) { margin-top: 14px; font-size: 14px; line-height: 21px; color: var(--mau-phu); }
.tccredit-chung-tinthechu > p:last-child { margin-top: auto; padding-top: 17px; line-height: 18px; }
.tccredit-chung-tinthechu > p:last-child a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mau-chinh); }
.tccredit-chung-tinthechu > p:last-child img { width: 11px; height: auto; transition: transform var(--chuyen); }
.tccredit-chung-tinthechu > p:last-child a:hover { color: var(--mau-chinh-dam); }
.tccredit-chung-tinthechu > p:last-child a:hover img { transform: translateX(4px); }

/* ---------- Thẻ thanh bên: Xem nhiều nhất ---------- */
.tccredit-chung-xemnhieu,
.tintuc-main-danhmuc,
.tccredit-chung-tuvan { position: relative; padding: 32px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.tccredit-chung-xemnhieu, .tintuc-main-danhmuc { background: #fff; }
.tccredit-chung-xemnhieu > p:first-child strong,
.tintuc-main-danhmuc > p:first-child strong,
.tccredit-chung-tuvan > p:first-child strong { display: block; font-size: 24px; line-height: 30px; font-weight: 700; }
.tccredit-chung-xemnhieu ol { margin-top: 16px; border-top: 1px solid var(--mau-vien); }
.tccredit-chung-xemnhieu li + li { border-top: 1px solid var(--mau-vien); }
.tccredit-chung-xemnhieu a { display: grid; grid-template-columns: 52px 1fr; align-items: start; padding: 16px 0 19px; font-size: 16px; line-height: 24px; font-weight: 700; }
.tccredit-chung-xemnhieu li:last-child a { padding-bottom: 0; }
.tccredit-chung-xemnhieu span { font-size: 28px; line-height: 35px; margin-top: -4px; color: var(--mau-vien-dam); transition: color var(--chuyen); }
.tccredit-chung-xemnhieu li:first-child span, .tccredit-chung-xemnhieu a:hover span { color: var(--mau-chinh); }
.tccredit-chung-xemnhieu a:hover { color: var(--mau-chinh); }

/* ---------- Thẻ thanh bên: Tư vấn (nền đỏ) ---------- */
.tccredit-chung-tuvan { background: var(--mau-chinh); color: #fff; }
.tccredit-chung-tuvan::before { content: ""; position: absolute; top: 34px; right: 36px; width: 72px; height: 24px; background: url(../images/icons/deco-xx-trang.png) center / contain no-repeat; opacity: .5; }
.tccredit-chung-tuvan > p:nth-child(2) { margin-top: 12px; font-size: 14px; line-height: 21px; }
.tccredit-chung-tuvan > p:nth-child(3) { margin-top: 17px; }
.tccredit-chung-tuvan > p:nth-child(3) a { font-size: 28px; line-height: 35px; font-weight: 700; }
.tccredit-chung-tuvan > p:nth-child(3) a:hover { color: var(--mau-vang); }
.tccredit-chung-tuvan > p:last-child { margin-top: 17px; }
.tccredit-chung-tuvan > p:last-child a {
  display: flex; align-items: center; justify-content: center; height: 48px; background: #fff; color: var(--mau-chinh); font-size: 16px; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.tccredit-chung-tuvan > p:last-child a:hover { background: var(--mau-nen-toi); color: #fff; }

/* ---------- S02: tiêu đề + tab + tin nổi bật ---------- */
.tintuc-main-dau { padding: 60px 0; background: #fff; }
.tintuc-main-tieude { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.tintuc-main-tieude h1 { font-size: 40px; line-height: 51px; font-weight: 700; }
.tintuc-main-mota { width: 420px; max-width: 100%; padding-top: 8px; font-size: 16px; line-height: 20px; color: var(--mau-phu); }
.tintuc-main-tab { margin-top: 25px; }
.tintuc-main-tab ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tintuc-main-tab a {
  position: relative; display: flex; align-items: center; height: 40px; padding: 0 20px; font-size: 14px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--mau-vien-dam); background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.tintuc-main-tab a::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--mau-vien-dam) calc(50% - .5px), var(--mau-vien-dam) calc(50% + .5px), transparent calc(50% + .5px)); }
.tintuc-main-tab a:hover { color: var(--mau-chinh); border-color: var(--mau-chinh); }
.tintuc-main-tab a[aria-current] { background: var(--mau-chinh); border-color: var(--mau-chinh); color: #fff; }
.tintuc-main-tab a[aria-current]::after { display: none; }

.tintuc-main-noibat { display: grid; grid-template-columns: minmax(0, 860fr) minmax(0, 420fr); gap: 20px; margin-top: 32px; }
.tintuc-main-bailon { position: relative; overflow: hidden; background: var(--mau-nen-toi); clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.tintuc-main-bailonanh p { height: 100%; }
.tintuc-main-bailonanh img { width: 100%; height: 100%; min-height: 444px; aspect-ratio: 860 / 444; object-fit: cover; transition: transform .6s ease; }
.tintuc-main-bailon:hover .tintuc-main-bailonanh img { transform: scale(1.05); }
.tintuc-main-bailonchu { position: absolute; left: 0; right: 0; bottom: 0; min-height: 176px; padding: 30px 30px 28px; background: rgba(17, 17, 17, .85); color: #fff; }
.tintuc-main-bailonchu > p:first-child { color: #fff; }
.tintuc-main-bailonchu time::before { filter: brightness(0) invert(1); }
.tintuc-main-bailonchu h2 { margin-top: 16px; font-size: 32px; line-height: 40px; color: #fff; }
.tintuc-main-bailonchu h2 a:hover { color: var(--mau-vang); }
.tintuc-main-bailonchu > p:last-child { margin-top: 16px; font-size: 16px; line-height: 20px; }

.tintuc-main-noibatphai h2 { position: relative; margin-top: 0; padding-bottom: 9px; border-bottom: 1px solid var(--mau-vien); font-size: 28px; line-height: 35px; }
.tintuc-main-noibatphai h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 216px; height: 4px; background: var(--mau-chinh); }
.tintuc-main-noibatds { display: grid; gap: 20px; margin-top: 23px; }
.tintuc-main-noibatitem { display: grid; grid-template-columns: 148px 1fr; gap: 20px; align-items: start; }
.tintuc-main-noibatanh p { overflow: hidden; }
.tintuc-main-noibatanh img { width: 100%; aspect-ratio: 148 / 112; object-fit: cover; transition: transform .6s ease; }
.tintuc-main-noibatitem:hover .tintuc-main-noibatanh img { transform: scale(1.05); }
.tintuc-main-noibatchu h3 { margin-top: 14px; font-size: 16px; line-height: 24px; font-weight: 700; }
.tintuc-main-noibatchu h3 a:hover { color: var(--mau-chinh); }

/* ---------- S03: danh sách bài + thanh bên ---------- */
.tintuc-main-danhsach { padding: 60px 0 160px; background: var(--mau-nen); }
.tintuc-main-danhsach > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 860fr) minmax(0, 420fr); gap: 20px; align-items: start; }
.tintuc-main-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; transition: opacity .2s; }
.tintuc-main-phantrang { margin-top: 40px; }
.tintuc-main-phantrang ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.tintuc-main-phantrang a, .tintuc-main-phantrang span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--mau-vien); background: #fff; font-size: 16px; }
.tintuc-main-phantrang img { width: 13px; height: auto; }
.tintuc-main-phantrang a:hover { border-color: var(--mau-chu); }
.tintuc-main-phantrang a[aria-current] { background: var(--mau-chinh); border-color: var(--mau-chinh); color: #fff; font-weight: 700; }
.tintuc-main-phantrang a[aria-disabled] { opacity: .5; pointer-events: none; }

.tintuc-main-ben { display: grid; gap: 20px; }
.tintuc-main-danhmuc::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 4px; background: var(--mau-chinh); }
.tintuc-main-danhmuc ul { margin-top: 16px; }
.tintuc-main-danhmuc li { border-top: 1px solid var(--mau-vien); }
.tintuc-main-danhmuc a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 4px 14px 0; font-size: 16px; line-height: 20px; font-weight: 700;
}
.tintuc-main-danhmuc li:last-child a { padding-bottom: 0; }
.tintuc-main-danhmuc a::after { content: ""; flex: none; width: 11px; height: 8px; background: url(../images/icons/icon-muiten-phai-do.png) center / contain no-repeat; transition: transform var(--chuyen); }
.tintuc-main-danhmuc a:hover { color: var(--mau-chinh); }
.tintuc-main-danhmuc a:hover::after { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .tintuc-main-bailonchu h2 { font-size: 28px; line-height: 36px; }
}
@media (max-width: 1199px) {
  .tintuc-main-noibat { grid-template-columns: 1fr; }
  .tintuc-main-noibatds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tintuc-main-noibatitem { grid-template-columns: 1fr; gap: 12px; }
  .tintuc-main-noibatanh img { aspect-ratio: 16 / 10; }
  .tintuc-main-danhsach > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 340px; }
  .tccredit-chung-xemnhieu, .tintuc-main-danhmuc, .tccredit-chung-tuvan { padding: 28px 24px; }
  .tccredit-chung-tinthechu { padding: 20px 20px 22px; }
  .tccredit-chung-tinthechu h3 { font-size: 18px; line-height: 27px; }
}
@media (max-width: 991px) {
  .tintuc-main-danhsach > .tccredit-chung-khung { grid-template-columns: 1fr; gap: 40px; }
  .tintuc-main-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .tccredit-chung-tuvan { grid-column: 1 / -1; }
  .tintuc-main-bailonchu { position: static; min-height: 0; background: var(--mau-nen-toi); }
  .tintuc-main-bailonanh img { min-height: 0; }
}
@media (max-width: 767px) {
  .tintuc-main-dau { padding: 40px 0; }
  .tintuc-main-tieude { display: block; }
  .tintuc-main-tieude h1 { font-size: 28px; line-height: 36px; }
  .tintuc-main-mota { width: auto; margin-top: 8px; padding-top: 0; font-size: 14px; line-height: 21px; }
  /* Tab cuộn ngang trong khung, không tràn trang */
  .tintuc-main-tab { margin: 20px -20px 0; overflow-x: auto; scrollbar-width: none; }
  .tintuc-main-tab::-webkit-scrollbar { display: none; }
  .tintuc-main-tab ul { flex-wrap: nowrap; padding: 0 20px; width: max-content; }
  .tintuc-main-tab a { height: 36px; padding: 0 14px; font-size: 13px; }
  .tintuc-main-noibat { gap: 24px; margin-top: 20px; }
  .tintuc-main-bailon { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .tintuc-main-bailonanh img { aspect-ratio: 350 / 196; }
  .tintuc-main-bailonchu { padding: 16px; }
  .tintuc-main-bailonchu h2 { margin-top: 12px; font-size: 18px; line-height: 27px; }
  .tintuc-main-bailonchu > p:last-child { margin-top: 8px; font-size: 14px; line-height: 21px; }
  .tintuc-main-noibatphai h2 { font-size: 20px; line-height: 28px; padding-bottom: 8px; }
  .tintuc-main-noibatphai h2::after { width: 120px; }
  .tintuc-main-noibatds { grid-template-columns: 1fr; gap: 0; margin-top: 4px; }
  .tintuc-main-noibatitem { grid-template-columns: 80px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--mau-vien); }
  .tintuc-main-noibatanh img { aspect-ratio: 1; }
  .tintuc-main-noibatchu h3 { margin-top: 8px; font-size: 14px; line-height: 20px; }
  .tccredit-chung-tinthechu > p:first-child,
  .tintuc-main-bailonchu > p:first-child,
  .tintuc-main-noibatchu > p:first-child { gap: 4px 8px; font-size: 11px; }
  .tccredit-chung-tinthechu > p:first-child span,
  .tintuc-main-bailonchu > p:first-child span,
  .tintuc-main-noibatchu > p:first-child span { height: 22px; padding: 0 8px; }

  .tintuc-main-danhsach { padding: 40px 0 164px; }
  .tintuc-main-danhsach > .tccredit-chung-khung { gap: 32px; }
  .tintuc-main-luoi { grid-template-columns: 1fr; gap: 16px; }
  .tccredit-chung-tinthe { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .tccredit-chung-tintheanh img { aspect-ratio: 350 / 196; }
  .tccredit-chung-tinthechu { padding: 16px 16px 18px; }
  .tccredit-chung-tinthechu h3 { margin-top: 12px; font-size: 18px; line-height: 27px; }
  .tccredit-chung-tinthechu > p:nth-of-type(2) { margin-top: 8px; }
  .tccredit-chung-tinthechu > p:last-child { padding-top: 12px; }
  .tintuc-main-phantrang { margin-top: 24px; }
  .tintuc-main-phantrang ul { gap: 6px; }
  .tintuc-main-phantrang a, .tintuc-main-phantrang span { width: 40px; height: 40px; font-size: 14px; }
  .tintuc-main-ben { grid-template-columns: 1fr; gap: 16px; }
  .tccredit-chung-xemnhieu, .tintuc-main-danhmuc, .tccredit-chung-tuvan { padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .tccredit-chung-xemnhieu > p:first-child strong, .tintuc-main-danhmuc > p:first-child strong, .tccredit-chung-tuvan > p:first-child strong { font-size: 20px; line-height: 28px; }
  .tintuc-main-danhmuc a { font-size: 14px; }
  .tccredit-chung-xemnhieu a { grid-template-columns: 40px 1fr; padding: 12px 0 14px; font-size: 14px; line-height: 20px; }
  .tccredit-chung-xemnhieu span { font-size: 22px; line-height: 26px; margin-top: -3px; }
  .tccredit-chung-tuvan::before { top: 26px; right: 20px; width: 54px; height: 18px; }
  .tccredit-chung-tuvan > p:nth-child(3) a { font-size: 24px; line-height: 30px; }
}

/* =========================================================
   CHI TIẾT BÀI VIẾT (chi-tiet-bai-viet.html)
   Dùng lại: .tccredit-chung-tinthe / -xemnhieu / -tuvan (50-tintuc.css)
   ========================================================= */
.baiviet-main-chitiet { padding: 60px 0; background: #fff; }
.baiviet-main-chitiet > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 750px) minmax(0, 420px); justify-content: space-between; gap: 40px; align-items: start; }

/* ---------- Đầu bài: meta, h1, sapo, chia sẻ ---------- */
.baiviet-main-meta p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12px; line-height: 15px; color: var(--mau-mo); }
.baiviet-main-meta span:first-child { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; background: var(--mau-chinh); color: #fff; font-weight: 700; }
.baiviet-main-meta time, .baiviet-main-meta span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.baiviet-main-meta time::before { content: ""; width: 12px; height: 12px; background: url(../images/icons/icon-dongho-xam.png) center / contain no-repeat; }
.baiviet-main-meta span:last-child::before { content: ""; width: 9px; height: 12px; background: url(../images/icons/icon-tailieu-xam.png) center / contain no-repeat; }
.baiviet-main-bai h1 { margin-top: 12px; font-size: 40px; line-height: 60px; font-weight: 700; }
.baiviet-main-sapo { margin-top: 14px; font-size: 20px; line-height: 30px; color: var(--mau-phu); }
.baiviet-main-chiase { display: flex; align-items: center; gap: 15px; margin-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--mau-vien); }
.baiviet-main-chiase > p { font-size: 14px; line-height: 18px; font-weight: 700; }
.baiviet-main-chiase ul { display: flex; gap: 8px; }
.baiviet-main-chiase a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--mau-nen); }
.baiviet-main-chiase img { width: 24px; height: 24px; transition: filter var(--chuyen); }
.baiviet-main-chiase a:hover { background: var(--mau-chinh); transform: translateY(-3px); }
.baiviet-main-chiase a:hover img { filter: brightness(0) invert(1); }

/* ---------- Nội dung bài (thẻ tự nhiên kiểu WordPress) ---------- */
.baiviet-main-noidung { margin-top: 30px; font-size: 16px; line-height: 24px; color: #333; }
.baiviet-main-noidung > * + * { margin-top: 16px; }
.baiviet-main-noidung h2 { margin-top: 32px; font-size: 28px; line-height: 35px; color: var(--mau-chu); scroll-margin-top: 80px; }
.baiviet-main-noidung h3 { margin-top: 28px; font-size: 22px; line-height: 30px; color: var(--mau-chu); }
.baiviet-main-noidung h2 + p, .baiviet-main-noidung h2 + ul, .baiviet-main-noidung h3 + p { margin-top: 20px; }
.baiviet-main-noidung p + ul { margin-top: 20px; }
.baiviet-main-noidung a { color: var(--mau-chinh); text-decoration: underline; }
.baiviet-main-noidung strong { font-weight: 700; color: var(--mau-chu); }
.baiviet-main-noidung ul li, .baiviet-main-noidung ol li { position: relative; padding-left: 24px; }
.baiviet-main-noidung li + li { margin-top: 8px; }
.baiviet-main-noidung ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; background: var(--mau-chinh); }
.baiviet-main-noidung ol { counter-reset: muc; }
.baiviet-main-noidung ol li { counter-increment: muc; }
.baiviet-main-noidung ol li::before { content: counter(muc) "."; position: absolute; left: 0; font-weight: 700; color: var(--mau-chinh); }
.baiviet-main-noidung figure { margin-top: 30px; margin-bottom: 0; }
.baiviet-main-noidung ul + figure { margin-top: 16px; }
.baiviet-main-noidung figure + * { margin-top: 40px; }
.baiviet-main-noidung > p:first-child { margin-top: 0; }
.baiviet-main-noidung > figure:first-child { margin-top: 0; }
.baiviet-main-noidung figure + p { margin-top: 28px; }
.baiviet-main-noidung img { width: 100%; height: auto; aspect-ratio: 750 / 421; object-fit: cover; }
.baiviet-main-noidung figcaption { margin-top: 13px; font-size: 12px; line-height: 15px; color: var(--mau-mo); text-align: center; }
.baiviet-main-noidung blockquote { margin: 16px 0 0; padding: 18px 24px 20px; background: var(--mau-hong); border-left: 4px solid var(--mau-chinh); }
.baiviet-main-noidung blockquote p + p { margin-top: 6px; }
.baiviet-main-noidung blockquote strong { color: var(--mau-chinh); }

/* ---------- Từ khóa ---------- */
.baiviet-main-tukhoa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 26px; }
.baiviet-main-tukhoa > p { font-size: 14px; line-height: 18px; font-weight: 700; }
.baiviet-main-tukhoa ul { display: flex; flex-wrap: wrap; gap: 8px; }
.baiviet-main-tukhoa a { display: flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--mau-vien-dam); font-size: 14px; color: var(--mau-phu); }
.baiviet-main-tukhoa a:hover { border-color: var(--mau-chinh); color: var(--mau-chinh); }

/* ---------- CTA cuối bài ---------- */
.baiviet-main-cta { position: relative; margin-top: 32px; padding: 32px; background: var(--mau-chinh); color: #fff; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.baiviet-main-cta > p:first-child strong { display: block; font-size: 28px; line-height: 35px; font-weight: 700; }
.baiviet-main-cta > p:nth-child(2) { margin-top: 9px; font-size: 16px; line-height: 20px; }
.baiviet-main-ctanut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.baiviet-main-ctanut a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 32px; font-size: 16px; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.baiviet-main-ctanut p:first-child a { background: #fff; color: var(--mau-chinh); }
.baiviet-main-ctanut p:first-child a:hover { background: var(--mau-nen-toi); color: #fff; }
.baiviet-main-ctanut p:last-child a { padding: 0 34px 0 36px; border: 1.5px solid #fff; color: #fff; }
.baiviet-main-ctanut p:last-child a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)); }
.baiviet-main-ctanut p:last-child a:hover { background: #fff; color: var(--mau-chinh); }
.baiviet-main-ctanut p:last-child a:hover img { filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6000%) hue-rotate(350deg); }
.baiviet-main-ctanut img { width: 15px; height: 15px; }

/* ---------- Bài trước / sau ---------- */
.baiviet-main-chuyenbai { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.baiviet-main-baitruoc, .baiviet-main-baisau { position: relative; min-height: 104px; padding: 20px 20px 14px; border: 1px solid var(--mau-vien); transition: border-color var(--chuyen); }
.baiviet-main-baisau { text-align: right; }
.baiviet-main-baitruoc > p:first-child, .baiviet-main-baisau > p:first-child { font-size: 12px; line-height: 15px; font-weight: 700; color: var(--mau-mo); }
.baiviet-main-baitruoc a, .baiviet-main-baisau a { display: block; margin-top: 5px; font-size: 16px; line-height: 24px; font-weight: 700; }
.baiviet-main-baitruoc a::after, .baiviet-main-baisau a::after { content: ""; position: absolute; inset: 0; }
.baiviet-main-baitruoc:hover, .baiviet-main-baisau:hover { border-color: var(--mau-chinh); }
.baiviet-main-baitruoc:hover a, .baiviet-main-baisau:hover a { color: var(--mau-chinh); }

/* ---------- Thanh bên (dính khi cuộn) ---------- */
.baiviet-main-ben { position: sticky; top: 68px; display: grid; gap: 20px; }
.baiviet-main-mucluc { padding: 32px 32px 30px; background: var(--mau-nen); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.baiviet-main-mucluc > p strong { display: block; font-size: 24px; line-height: 30px; font-weight: 700; }
.baiviet-main-mucluc ol { margin-top: 16px; }
.baiviet-main-mucluc a { position: relative; display: block; padding: 10px 0; font-size: 16px; line-height: 24px; transition: color var(--chuyen); }
.baiviet-main-mucluc a::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0; width: 4px; background: var(--mau-chinh); transform: scaleY(0); transition: transform var(--chuyen); }
.baiviet-main-mucluc a:hover { color: var(--mau-chinh); }
.baiviet-main-mucluc a[aria-current] { color: var(--mau-chinh); font-weight: 700; }
.baiviet-main-mucluc a[aria-current]::before { transform: none; }
.baiviet-main-ben .tccredit-chung-tuvan::before { display: none; }
.baiviet-main-ben .tccredit-chung-xemnhieu { box-shadow: inset 0 0 0 1px var(--mau-vien); }
.baiviet-main-ben .tccredit-chung-xemnhieu::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--mau-vien) calc(50% - 1px), var(--mau-vien) calc(50% + .5px), transparent calc(50% + .5px)); }

/* ---------- S03: Bài viết liên quan ---------- */
.baiviet-main-lienquan { padding: 60px 0 160px; background: var(--mau-nen); }
.baiviet-main-lienquandau { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.baiviet-main-lienquanxem { padding-bottom: 14px; }
.baiviet-main-lienquanxem a { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--mau-chinh); white-space: nowrap; }
.baiviet-main-lienquanxem img { width: 13px; height: auto; transition: transform var(--chuyen); }
.baiviet-main-lienquanxem a:hover img { transform: translateX(4px); }
.baiviet-main-lienquanluoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .baiviet-main-chitiet > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 340px; }
  .baiviet-main-mucluc { padding: 28px 24px; }
  .baiviet-main-mucluc a::before { left: -24px; }
  .baiviet-main-bai h1 { font-size: 36px; line-height: 50px; }
}
@media (max-width: 991px) {
  .baiviet-main-chitiet > .tccredit-chung-khung { grid-template-columns: 1fr; gap: 40px; }
  .baiviet-main-ben { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .baiviet-main-ben .tccredit-chung-xemnhieu { grid-column: 1 / -1; }
  .baiviet-main-lienquanluoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baiviet-main-lienquanluoi > :nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  .baiviet-main-chitiet { padding: 40px 0; }
  .baiviet-main-meta p { gap: 4px 12px; font-size: 11px; }
  .baiviet-main-meta span:first-child { height: 22px; padding: 0 8px; }
  .baiviet-main-bai h1 { margin-top: 12px; font-size: 26px; line-height: 36px; }
  .baiviet-main-sapo { margin-top: 10px; font-size: 16px; line-height: 24px; }
  .baiviet-main-chiase { margin-top: 20px; padding-bottom: 20px; }
  .baiviet-main-noidung { margin-top: 24px; font-size: 15px; line-height: 24px; }
  .baiviet-main-noidung h2 { margin-top: 28px; font-size: 20px; line-height: 28px; }
  .baiviet-main-noidung h3 { font-size: 18px; line-height: 26px; }
  .baiviet-main-noidung h2 + p, .baiviet-main-noidung h2 + ul, .baiviet-main-noidung p + ul { margin-top: 12px; }
  .baiviet-main-noidung figure + * { margin-top: 28px; }
  .baiviet-main-noidung figure + p { margin-top: 20px; }
  .baiviet-main-noidung figcaption { margin-top: 8px; }
  .baiviet-main-noidung blockquote { padding: 16px 16px 18px; }
  .baiviet-main-cta { margin-top: 28px; padding: 24px 20px 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .baiviet-main-cta > p:first-child strong { font-size: 20px; line-height: 28px; }
  .baiviet-main-cta > p:nth-child(2) { font-size: 14px; line-height: 21px; }
  .baiviet-main-ctanut { flex-direction: column; margin-top: 16px; }
  .baiviet-main-ctanut a { width: 100%; }
  .baiviet-main-chuyenbai { grid-template-columns: 1fr; gap: 12px; }
  .baiviet-main-baitruoc, .baiviet-main-baisau { min-height: 0; padding: 16px; }
  .baiviet-main-baitruoc a, .baiviet-main-baisau a { font-size: 14px; line-height: 20px; }
  .baiviet-main-chitiet > .tccredit-chung-khung { gap: 32px; }
  .baiviet-main-ben { grid-template-columns: 1fr; gap: 16px; }
  .baiviet-main-mucluc { padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .baiviet-main-mucluc > p strong { font-size: 20px; line-height: 28px; }
  .baiviet-main-mucluc ol { margin-top: 8px; }
  .baiviet-main-mucluc a { padding: 8px 0; font-size: 14px; line-height: 20px; }
  .baiviet-main-mucluc a::before { left: -20px; }
  .baiviet-main-ben .tccredit-chung-xemnhieu::after { width: 20px; height: 20px; }

  .baiviet-main-lienquan { padding: 40px 0 164px; }
  .baiviet-main-lienquanxem { padding-bottom: 6px; }
  .baiviet-main-lienquanxem a { font-size: 14px; gap: 8px; }
  .baiviet-main-lienquanluoi { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .baiviet-main-lienquanluoi > :nth-child(3) { display: flex; }
}

/* =========================================================
   TRANG LIÊN HỆ
   ========================================================= */
/* ---------- S02: Kênh liên hệ ---------- */
.lienhe-main-kenh { padding: 60px 0; }
.lienhe-main-kenhdau { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.lienhe-main-kenhdau h1 { font-size: 40px; line-height: 51px; font-weight: 700; }
.lienhe-main-kenhmota { flex: none; width: 530px; padding-top: 8px; font-size: 16px; line-height: 24px; color: var(--mau-phu); }
.lienhe-main-kenhluoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 49px; }
.lienhe-main-kenhitem {
  position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 32px; background: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--mau-vien); transition: box-shadow var(--chuyen), transform var(--chuyen);
}
.lienhe-main-kenhitem::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--vien-vat, var(--mau-vien)) calc(50% - 1px), var(--vien-vat, var(--mau-vien)) calc(50% + .5px), transparent calc(50% + .5px)); }
.lienhe-main-kenhitem:hover { --vien-vat: var(--mau-chinh); box-shadow: inset 0 0 0 1px var(--mau-chinh); transform: translateY(-4px); }
.lienhe-main-kenhitem:first-child { background: var(--mau-chinh); color: #fff; box-shadow: none; }
.lienhe-main-kenhitem:first-child::after { display: none; }
.lienhe-main-kenhicon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--mau-hong); }
.lienhe-main-kenhitem:first-child .lienhe-main-kenhicon { background: #fff; }
.lienhe-main-kenhicon img { width: auto; height: auto; max-width: 24px; max-height: 25px; }
.lienhe-main-kenhchu { margin-top: 20px; }
.lienhe-main-kenhchu > p:first-child { font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.lienhe-main-kenhitem:first-child .lienhe-main-kenhchu > p:first-child { color: #fff; }
.lienhe-main-kenhchu strong { display: block; margin-top: 10px; font-size: 16px; line-height: 24px; font-weight: 700; }
.lienhe-main-kenhitem:first-child .lienhe-main-kenhchu strong { font-size: 24px; line-height: 30px; }
.lienhe-main-kenhitem:nth-child(2) .lienhe-main-kenhchu strong { font-size: 20px; line-height: 25px; word-break: break-word; }
.lienhe-main-kenhlink { margin-top: auto; padding-top: 24px; }
.lienhe-main-kenhlink a { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mau-chinh); }
.lienhe-main-kenhitem:first-child .lienhe-main-kenhlink a { color: #fff; }
.lienhe-main-kenhlink img { width: 11px; height: 8px; transition: transform var(--chuyen); }
.lienhe-main-kenhlink a:hover img { transform: translateX(4px); }
.lienhe-main-kenhlink a:hover { color: var(--mau-chinh-dam); }
.lienhe-main-kenhitem:first-child .lienhe-main-kenhlink a:hover { color: var(--mau-vang); }

/* ---------- S03: Form + bản đồ ---------- */
.lienhe-main-form { padding: 60px 0; background: var(--mau-nen); }
.lienhe-main-form > .tccredit-chung-khung { display: grid; grid-template-columns: minmax(0, 750fr) minmax(0, 530fr); gap: 20px; align-items: start; }
.lienhe-main-formthe { position: relative; padding: 40px; background: #fff; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.lienhe-main-formthe::before { content: ""; position: absolute; left: 0; top: 0; width: 80px; height: 4px; background: var(--mau-chinh); }
.lienhe-main-formdau h2 { margin-top: 0; font-size: 28px; line-height: 35px; }
.lienhe-main-formdau p { margin-top: 9px; font-size: 14px; line-height: 18px; color: var(--mau-phu); }
.lienhe-main-formluoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-top: 32px; }
.lienhe-main-formorong { grid-column: 1 / -1; }
.lienhe-main-formo label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 18px; font-weight: 700; }
.lienhe-main-formo input, .lienhe-main-formo select, .lienhe-main-formo textarea {
  display: block; width: 100%; height: 48px; padding: 0 15px; font-size: 16px; color: var(--mau-chu); background: #fff;
  border: 1px solid var(--mau-vien-dam); border-radius: 4px; outline: 0; transition: border-color var(--chuyen), box-shadow var(--chuyen);
}
.lienhe-main-formo select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; background: #fff url(../images/icons/icon-chevron-xuong.png) right 21px center / 10px auto no-repeat; }
.lienhe-main-formo textarea { height: 120px; padding: 13px 15px; resize: vertical; line-height: 1.5; }
.lienhe-main-formo input::placeholder, .lienhe-main-formo textarea::placeholder { color: var(--mau-goiy); }
.lienhe-main-formo input:focus, .lienhe-main-formo select:focus, .lienhe-main-formo textarea:focus { border-color: var(--mau-chinh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mau-chinh) 10%, transparent); }
.lienhe-main-formthe .tccredit-chung-nutgui { margin-top: 28px; }

/* Cột phải: bản đồ + kết nối */
.lienhe-main-formphai { display: grid; gap: 20px; }
.lienhe-main-bando, .lienhe-main-ketnoi { background: #fff; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.lienhe-main-bandokhung { position: relative; aspect-ratio: 530 / 320; background: #e3e3e3; }
.lienhe-main-bandokhung iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.lienhe-main-bandochu { padding: 25px 20px 25px 36px; }
.lienhe-main-bandochu p:first-child { display: flex; align-items: flex-start; gap: 17px; font-size: 16px; line-height: 20px; }
.lienhe-main-bandochu p:first-child img { flex: none; width: 11px; height: 16px; margin-top: 2px; }
.lienhe-main-bandochu p + p { margin-top: 17px; padding-left: 28px; }
.lienhe-main-bandochu a { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mau-chinh); }
.lienhe-main-bandochu a img { width: 11px; height: 8px; transition: transform var(--chuyen); }
.lienhe-main-bandochu a:hover { color: var(--mau-chinh-dam); }
.lienhe-main-bandochu a:hover img { transform: translateX(4px); }

.lienhe-main-ketnoi { padding: 32px; }
.lienhe-main-ketnoitieude strong { display: block; font-size: 24px; line-height: 30px; font-weight: 700; }
.lienhe-main-ketnoiluoi { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 24px; margin-top: 20px; }
.lienhe-main-ketnoimxh ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lienhe-main-ketnoimxh a { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px; font-size: 14px; line-height: 18px; font-weight: 700; background: var(--mau-nen); }
.lienhe-main-ketnoimxh span { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--mau-nen-toi); transition: background-color var(--chuyen); }
.lienhe-main-ketnoimxh img { width: auto; height: auto; max-width: 24px; max-height: 24px; }
.lienhe-main-ketnoimxh a:hover { color: var(--mau-chinh); background: var(--mau-hong); }
.lienhe-main-ketnoimxh a:hover span { background: var(--mau-chinh); }
.lienhe-main-ketnoiqr a { display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; background: #e3e3e3; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mau-mo); }
.lienhe-main-ketnoiqr a:hover { color: var(--mau-chinh); }
.lienhe-main-ketnoiqr p + p { margin-top: 9px; font-size: 12px; line-height: 15px; color: var(--mau-phu); text-align: center; }

/* ---------- Responsive trang liên hệ ---------- */
@media (max-width: 1399px) {
  .lienhe-main-kenhmota { width: 460px; }
  .lienhe-main-kenhitem { padding: 28px 24px; }
  .lienhe-main-ketnoiluoi { grid-template-columns: 1fr; }
  .lienhe-main-ketnoiqr { display: flex; align-items: center; gap: 16px; }
  .lienhe-main-ketnoiqr p + p { margin-top: 0; text-align: left; }
}

@media (max-width: 1199px) {
  .lienhe-main-kenhdau { flex-direction: column; gap: 12px; }
  .lienhe-main-kenhmota { width: auto; max-width: 640px; padding-top: 0; }
  .lienhe-main-kenhluoi { grid-template-columns: repeat(2, 1fr); }
  .lienhe-main-kenhitem { min-height: 230px; }
  .lienhe-main-form > .tccredit-chung-khung { grid-template-columns: 1fr; }
  .lienhe-main-formphai { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 991px) {
  .lienhe-main-formphai { grid-template-columns: 1fr; }
  .lienhe-main-ketnoiluoi { grid-template-columns: minmax(0, 1fr) 128px; }
  .lienhe-main-ketnoiqr { display: block; }
  .lienhe-main-ketnoiqr p + p { margin-top: 9px; text-align: center; }
}

@media (max-width: 767px) {
  .lienhe-main-kenh { padding: 32px 0 40px; }
  .lienhe-main-kenhdau h1 { font-size: 28px; line-height: 36px; }
  .lienhe-main-kenhmota { font-size: 14px; line-height: 21px; }
  .lienhe-main-kenhluoi { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .lienhe-main-kenhitem { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; min-height: 0; padding: 20px; }
  .lienhe-main-kenhicon { grid-row: span 2; width: 48px; height: 48px; }
  .lienhe-main-kenhicon img { max-width: 22px; max-height: 22px; }
  .lienhe-main-kenhchu { margin-top: 0; }
  .lienhe-main-kenhchu > p:first-child { font-size: 13px; }
  .lienhe-main-kenhchu strong { margin-top: 4px; font-size: 15px; line-height: 22px; }
  .lienhe-main-kenhitem:first-child .lienhe-main-kenhchu strong { font-size: 22px; line-height: 28px; }
  .lienhe-main-kenhitem:nth-child(2) .lienhe-main-kenhchu strong { font-size: 18px; line-height: 23px; }
  .lienhe-main-kenhlink { padding-top: 12px; }

  .lienhe-main-form { padding: 40px 0; }
  .lienhe-main-form > .tccredit-chung-khung { gap: 12px; }
  .lienhe-main-formthe { padding: 28px 16px 24px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .lienhe-main-formthe::before { width: 64px; }
  .lienhe-main-formdau h2 { font-size: 22px; line-height: 28px; }
  .lienhe-main-formdau p { font-size: 13px; line-height: 19px; }
  .lienhe-main-formluoi { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .lienhe-main-formo label { margin-bottom: 6px; }
  .lienhe-main-formo textarea { height: 112px; }
  .lienhe-main-formthe .tccredit-chung-dongy { margin-top: 20px; }
  .lienhe-main-formthe .tccredit-chung-nutgui { margin-top: 20px; }
  .lienhe-main-formthe .tccredit-chung-nutgui input[type="submit"] { height: 48px; }
  .lienhe-main-formphai { gap: 12px; }
  .lienhe-main-bando, .lienhe-main-ketnoi { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .lienhe-main-bandokhung { aspect-ratio: 350 / 220; }
  .lienhe-main-bandochu { padding: 20px 16px; }
  .lienhe-main-bandochu p:first-child { gap: 12px; font-size: 14px; line-height: 20px; }
  .lienhe-main-bandochu p + p { margin-top: 12px; padding-left: 23px; }
  .lienhe-main-ketnoi { padding: 24px 16px; }
  .lienhe-main-ketnoitieude strong { font-size: 20px; line-height: 25px; }
  .lienhe-main-ketnoiluoi { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .lienhe-main-ketnoimxh ul { gap: 8px; }
  .lienhe-main-ketnoimxh a { height: 52px; gap: 10px; padding: 0 10px; }
  .lienhe-main-ketnoiqr { display: flex; align-items: center; gap: 16px; }
  .lienhe-main-ketnoiqr a { width: 96px; height: 96px; font-size: 12px; text-align: center; }
  .lienhe-main-ketnoiqr p + p { margin-top: 0; text-align: left; }
}

/* =========================================================
   RESPONSIVE – breakpoint 1399 / 1199 / 991 / 767
   ========================================================= */
@media (max-width: 1399px) {
  .tccredit-header-menu ul { gap: 40px; }
  .tccredit-footer-cot { grid-template-columns: 1.2fr .6fr .6fr 1.1fr; gap: 24px; }
  .trangchu-main-gioithieu > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 600px; gap: 32px; }
  .trangchu-main-dangky > .tccredit-chung-khung { grid-template-columns: minmax(0, 1fr) 600px; }
  .trangchu-main-diemnhanitem + .trangchu-main-diemnhanitem { padding-left: 24px; }
  .trangchu-main-diemnhanchu strong { font-size: 18px; white-space: normal; }
  .trangchu-main-diemnhanchu p + p { white-space: normal; }
}

@media (max-width: 1199px) {
  .tccredit-header-timkiem { width: 480px; }
  .tccredit-header-hotline p:nth-child(2) { display: none; }
  .tccredit-header-menu ul { gap: 26px; }
  .tccredit-footer-cta { padding: 32px; }
  .tccredit-footer-ctachu strong { font-size: 32px; line-height: 40px; }
  .tccredit-footer-cot { grid-template-columns: 1fr 1fr; gap: 40px; }
  main h2 { font-size: 34px; }

  .trangchu-main-bannerchu h1, .trangchu-main-bannerchu h2 { font-size: 48px; line-height: 62px; }
  .trangchu-main-diemnhankhung { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .trangchu-main-diemnhanitem:nth-child(3) { padding-left: 0; border-left: 0; }
  .trangchu-main-gioithieu > .tccredit-chung-khung { grid-template-columns: 1fr 1fr; }
  .trangchu-main-luoi { grid-template-columns: repeat(3, 1fr); }
  .trangchu-main-khoitieude { flex-wrap: wrap; gap: 16px 32px; }
  .trangchu-main-dangky > .tccredit-chung-khung { grid-template-columns: 1fr 1fr; }
  .trangchu-main-dangky::before, .trangchu-main-dangky::after { display: none; }
  .trangchu-main-dieukien { grid-template-columns: 1fr; gap: 24px; }
  .trangchu-main-visaochon > .tccredit-chung-khung { grid-template-columns: 340px 1fr; }
  .trangchu-main-lydoitem { padding: 24px; gap: 16px; }
  .trangchu-main-chinhsachitem { padding: 40px 28px 32px; }
  .trangchu-main-thuvien { grid-template-columns: 1.5fr 1fr 1fr; }
  .trangchu-main-tinitem { grid-template-columns: 160px 1fr; }
  .trangchu-main-tinchu h3 { font-size: 18px; line-height: 26px; }
}

/* ---------- Header mobile từ 991px ---------- */
@media (max-width: 991px) {
  .tccredit-header { top: 0; box-shadow: 0 1px 0 var(--mau-vien); }
  .tccredit-header-tren { height: 64px; }
  .tccredit-header-tren .tccredit-chung-khung { gap: 12px; }
  .tccredit-header-logo img { width: 137px; height: 40px; }
  .tccredit-header-timkiem, .tccredit-header-hotline { display: none; }
  .tccredit-header-nutmobile { display: flex; align-items: center; gap: 16px; }
  .tccredit-header-nutmobile a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--mau-chinh); }
  .tccredit-header-nutmobile a img { width: 15px; height: 15px; }
  .tccredit-header-nutmenu { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
  .tccredit-header-nutmenu img { width: 19px; height: 12px; }

  /* Menu trượt từ trái */
  .tccredit-header-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 120; width: min(320px, 86vw); height: auto; overflow-y: auto; background: #fff; transform: translateX(-100%); transition: transform .3s ease; }
  .tccredit-menu-mo .tccredit-header-menu { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .tccredit-header-menu > .tccredit-chung-khung { display: block; height: auto; padding: 0 0 24px; }
  .tccredit-header-menudau { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--mau-vien); }
  .tccredit-header-menudau img { width: 120px; height: 35px; object-fit: contain; }
  .tccredit-header-dong { position: relative; width: 40px; height: 40px; }
  .tccredit-header-dong::before, .tccredit-header-dong::after { content: ""; position: absolute; left: 11px; top: 19px; width: 18px; height: 2px; background: var(--mau-chu); transform: rotate(45deg); }
  .tccredit-header-dong::after { transform: rotate(-45deg); }
  .tccredit-header-menu ul { display: block; height: auto; }
  .tccredit-header-menu > div > ul > li { flex-wrap: wrap; border-bottom: 1px solid var(--mau-vien); }
  .tccredit-header-menu > div > ul > li > a { flex: 1; height: 52px; padding: 0 20px; font-size: 15px; font-weight: 700; color: var(--mau-chu); }
  .tccredit-header-menu > div > ul > li > a::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 4px; height: auto; background: var(--mau-chinh); transform: scaleY(0); }
  .tccredit-header-menu > div > ul > li > a[aria-current] { color: var(--mau-chinh); }
  .tccredit-header-menu > div > ul > li > a[aria-current]::after { transform: none; }
  .tccredit-header-menu > div > ul > li:hover > a::after { transform: scaleY(0); }
  .tccredit-header-menu > div > ul > li > a[aria-current]:hover::after { transform: none; }
  .tccredit-header-menumo { width: 52px; height: 52px; margin: 0; background-image: url(../images/icons/icon-chevron-xuong.png); background-size: 11px auto; }
  .tccredit-header-menumo[aria-expanded="true"] { transform: rotate(180deg); }
  .tccredit-header-menu li ul { position: static; flex-basis: 100%; display: none; min-width: 0; padding: 0 0 8px; box-shadow: none; border-top: 0; background: var(--mau-nen); opacity: 1; visibility: visible; transform: none; transition: none; }
  .tccredit-header-menu li ul a { padding: 11px 20px 11px 36px; }
  .tccredit-header-dangky { margin: 24px 20px 0; }
  .tccredit-header-dangky a { width: 100%; height: 48px; font-size: 16px; }
  .tccredit-header-menuhotline { display: block; margin: 20px 20px 0; font-size: 13px; color: var(--mau-phu); }
  .tccredit-header-menuhotline a { font-size: 22px; font-weight: 700; color: var(--mau-chinh); }
  .tccredit-header-phu { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .tccredit-menu-mo .tccredit-header-phu { opacity: 1; visibility: visible; }
  .tccredit-menu-mo { overflow: hidden; }

  .tccredit-fixed-lienhe { top: auto; right: 20px; bottom: 136px; }
  .tccredit-fixed-lienhe p:last-child { display: none; }
  .tccredit-fixed-lienhe a { width: 48px; height: 48px; }
  .tccredit-fixed-thanhday { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 20px; background: #fff; border-top: 1px solid var(--mau-vien); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
  .tccredit-fixed-thanhday a { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; font-size: 16px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
  .tccredit-fixed-thanhday p:first-child a { border: 1.5px solid var(--mau-chu); }
  .tccredit-fixed-thanhday p:first-child a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--mau-chu) calc(50% - 1px), var(--mau-chu) calc(50% + 1px), transparent calc(50% + 1px)); }
  .tccredit-fixed-thanhday p:last-child a { background: var(--mau-chinh); color: #fff; font-size: 14px; }
  .tccredit-fixed-thanhday img { width: 15px; height: 15px; }
  body { padding-bottom: 64px; }
  .tccredit-fixed-lentop { right: 20px; bottom: 80px; width: 40px; height: 40px; }
  .tccredit-fixed-lentop.tccredit-lentop-hien ~ .tccredit-fixed-lienhe { bottom: 136px; }

  .trangchu-main-gioithieu > .tccredit-chung-khung { grid-template-columns: 1fr; }
  .trangchu-main-gioithieuhinh { max-width: 700px; }
  .trangchu-main-dangky > .tccredit-chung-khung { grid-template-columns: 1fr; }
  .trangchu-main-dangkychu { max-width: none; }
  .trangchu-main-buoc { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .trangchu-main-buoc::before { display: none; }
  .trangchu-main-visaochon > .tccredit-chung-khung { grid-template-columns: 1fr; }
  .trangchu-main-visaochonanh { order: -1; margin-top: 24px; padding-top: 0; }
  .trangchu-main-chinhsachluoi { grid-template-columns: 1fr; }
  .trangchu-main-chinhsachitem { min-height: 0; }
  .trangchu-main-tintucluoi { grid-template-columns: 1fr; }
}

/* ---------- Mobile (bám khung 390px của Figma) ---------- */
@media (max-width: 767px) {
  main h2 { font-size: 24px; line-height: 32px; margin-top: 14px; }
  .tccredit-chung-kicker p { font-size: 14px; line-height: 18px; }
  .tccredit-chung-kicker p::before { width: 24px; }
  .tccredit-chung-nutvien a { min-height: 48px; padding: 0 24px; }

  /* Footer */
  .tccredit-footer-cta { flex-direction: column; align-items: stretch; min-height: 0; padding: 22px 20px 20px; top: -124px; margin-bottom: -124px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
  .tccredit-footer { margin-top: 0; }
  .tccredit-footer-cta::before { width: 140px; clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%); }
  .tccredit-footer-ctachu strong { font-size: 20px; line-height: 25px; }
  .tccredit-footer-ctachu p + p { margin-top: 13px; font-size: 14px; line-height: 21px; }
  .tccredit-footer-ctanut { flex-direction: column; gap: 12px; margin-top: 2px; }
  .tccredit-footer-ctanut a, .tccredit-footer-ctanut p:first-child a, .tccredit-footer-ctanut p:last-child a { width: 100%; height: 48px; }
  .tccredit-footer-cot { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 52px 0 32px; }
  .tccredit-footer-thongtin, .tccredit-footer-bando { grid-column: 1 / -1; }
  .tccredit-footer-logo img { width: 137px; height: 40px; }
  .tccredit-footer-mota { margin-top: 20px; font-size: 14px; }
  .tccredit-footer-thongtin ul { margin-top: 20px; gap: 16px; }
  .tccredit-footer-mangxahoi { margin-top: 24px; }
  .tccredit-footer-tieude { margin-bottom: 20px; }
  .tccredit-footer-lienket ul { gap: 16px; }
  .tccredit-footer-bandokhung { aspect-ratio: 350 / 196; }
  .tccredit-footer-duoi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 0 24px; font-size: 12px; }
  .tccredit-footer-duoi ul { gap: 20px; }

  /* Banner */
  .trangchu-main-bannerslide { height: auto; display: flex; flex-direction: column; }
  .trangchu-main-bannerslide::before, .trangchu-main-bannerslide::after { display: none; }
  .trangchu-main-bannerslide > .tccredit-chung-khung { background: var(--mau-chinh); padding-bottom: 76px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .trangchu-main-banneranh { position: relative; order: 2; left: auto; height: 305px; margin-top: -64px; }
  .trangchu-main-banneranh::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--mau-vang); clip-path: polygon(0 64px, 100% 24px, 100% 30px, 0 70px); }
  .trangchu-main-banneranh img { object-position: 60% center; }
  .trangchu-main-bannerchu { padding: 24px 0 0; }
  .trangchu-main-bannernhan p { height: 28px; padding: 0 12px; font-size: 12px; }
  .trangchu-main-bannerchu h1, .trangchu-main-bannerchu h2 { margin-top: 18px; font-size: 24px; line-height: 32px; }
  .trangchu-main-bannermota { margin-top: 14px; font-size: 14px; line-height: 22px; }
  .trangchu-main-bannernut { flex-direction: column; gap: 12px; margin-top: 24px; }
  .trangchu-main-bannernut a, .trangchu-main-bannernut p:first-child a, .trangchu-main-bannernut p:last-child a { width: 100%; height: 48px; }
  .trangchu-main-bannertrangtri { top: 22px; left: auto; right: 20px; width: 60px; height: 20px; }
  .trangchu-main-bannerdieukhien { bottom: 0; }
  .trangchu-main-bannerdieukhien .tccredit-chung-khung { justify-content: center; height: 36px; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
  .trangchu-main-bannerdem { font-size: 12px; gap: 10px; }
  .trangchu-main-bannercham .swiper-pagination-bullet { width: 12px; height: 3px; }
  .trangchu-main-bannercham .swiper-pagination-bullet-active { width: 40px; }
  .trangchu-main-bannermuiten { display: none; }

  /* Điểm nhấn: 2 x 2 */
  .trangchu-main-diemnhan { margin-top: 0; padding-top: 20px; }
  .trangchu-main-diemnhankhung { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
  .trangchu-main-diemnhanitem, .trangchu-main-diemnhanitem + .trangchu-main-diemnhanitem { flex-direction: column; align-items: flex-start; gap: 18px; padding: 16px 12px; border: 1px solid var(--mau-vien); border-top: 4px solid var(--mau-chinh); }
  .trangchu-main-diemnhanicon p { width: 40px; height: 40px; }
  .trangchu-main-diemnhanicon img { max-width: 19px; max-height: 20px; }
  .trangchu-main-diemnhanchu strong { font-size: 14px; line-height: 18px; }
  .trangchu-main-diemnhanchu p + p { margin-top: 4px; font-size: 12px; line-height: 16px; }

  /* Giới thiệu */
  .trangchu-main-gioithieu { padding: 40px 0; }
  .trangchu-main-gioithieuchu { padding-top: 0; }
  .trangchu-main-gioithieuchu h2 { margin-top: 14px; }
  .trangchu-main-gioithieumota { margin-top: 16px; font-size: 14px; line-height: 22px; }
  .trangchu-main-gioithieumota p + p { margin-top: 12px; }
  .trangchu-main-gioithieucheck ul { grid-template-columns: 1fr 1fr; gap: 12px 8px; margin-top: 20px; }
  .trangchu-main-gioithieucheck li { gap: 8px; font-size: 13px; line-height: 17px; }
  .trangchu-main-gioithieucheck li::before { width: 20px; height: 20px; background-size: 10px auto; }
  .trangchu-main-gioithieuchu .tccredit-chung-nutvien { margin-top: 24px; }
  .trangchu-main-gioithieuhinh { aspect-ratio: 350 / 268; margin-top: 8px; }
  .trangchu-main-gioithieuhinh::before { left: 4%; top: 6%; width: 96%; height: 90%; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
  .trangchu-main-gioithieuhinh::after { left: 0; top: 0; width: 96%; height: 90%; border-width: 2px; }
  .trangchu-main-gioithieuanh { left: 2%; top: 3%; width: 94%; }
  .trangchu-main-gioithieuanh p { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
  .trangchu-main-gioithieuanh img { aspect-ratio: 350 / 230; }
  .trangchu-main-gioithieunhan { top: auto; bottom: 6%; left: 2%; width: auto; padding: 10px 14px 12px; }
  .trangchu-main-gioithieunhan strong { font-size: 14px; line-height: 18px; }
  .trangchu-main-gioithieunhan p + p { margin-top: 2px; font-size: 12px; }
  .trangchu-main-gioithieu .tccredit-chung-khung::after { display: none; }

  /* Sản phẩm */
  .trangchu-main-sanpham { padding: 40px 0; }
  .trangchu-main-sanphamdau { display: block; }
  .trangchu-main-sanphamghichu { margin-top: 10px; max-width: none; text-align: left; font-size: 12px; line-height: 18px; }
  .trangchu-main-khoi, .trangchu-main-khoi + .trangchu-main-khoi { margin-top: 32px; }
  .trangchu-main-khoitieude { display: grid; grid-template-columns: 1fr auto; gap: 0; padding-bottom: 0; border-bottom: 0; }
  .trangchu-main-khoitieude h3 { font-size: 18px; line-height: 23px; padding-bottom: 12px; }
  .trangchu-main-khoitieude h3::after { bottom: 0; height: 3px; }
  .trangchu-main-khoitieude::before { content: ""; grid-column: 1 / -1; grid-row: 2; height: 1px; background: var(--mau-vien); margin-top: -1px; }
  .trangchu-main-tieudelink { grid-column: 2; grid-row: 1; padding-top: 0; }
  .trangchu-main-tieudelink a { font-size: 14px; gap: 8px; }
  .trangchu-main-tieudelink span { display: none; }
  .trangchu-main-khoitab { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; overflow-x: auto; }
  .trangchu-main-khoitab ul { flex-wrap: nowrap; }
  .trangchu-main-khoitab a { height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .trangchu-main-luoi { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .trangchu-main-luoi > .tccredit-chung-sanpham:nth-child(n + 5) { display: none; }
  .trangchu-main-luoidienthoai > .tccredit-chung-sanpham:nth-child(n + 4) { display: none; }
  .trangchu-main-xemthem { display: block; margin-top: 20px; }
  .trangchu-main-xemthem a { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; border: 1.5px solid var(--mau-chu); font-size: 14px; font-weight: 700; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
  .trangchu-main-xemthem a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--mau-chu) calc(50% - 1px), var(--mau-chu) calc(50% + 1px), transparent calc(50% + 1px)); }
  .trangchu-main-xemthem a:hover { background: var(--mau-chu); color: #fff; }
  .trangchu-main-khuyenmai { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 150px; grid-template-rows: auto auto; column-gap: 12px; padding: 16px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
  .trangchu-main-khuyenmai::before { display: none; }
  .trangchu-main-khuyenmaichu strong { font-size: 18px; line-height: 24px; }
  .trangchu-main-khuyenmaichu p + p { margin-top: 4px; font-size: 12px; line-height: 16px; max-width: none; }
  .trangchu-main-khuyenmaianh { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .trangchu-main-khuyenmainut { margin-top: 10px; }
  .trangchu-main-khuyenmainut a { width: 130px; height: 32px; font-size: 12px; }

  /* Thẻ sản phẩm thu gọn */
  .tccredit-chung-sanpham { padding: 8px 8px 12px; }
  .tccredit-chung-sanphamanh > p:nth-child(2) { top: 4px; left: 4px; }
  .tccredit-chung-sanphamanh span { height: 20px; padding: 0 8px; font-size: 11px; }
  .tccredit-chung-sanphamthongtin { padding: 12px 4px 0; }
  .tccredit-chung-sanphamthongtin h3 { margin-top: 4px; font-size: 14px; line-height: 18px; }
  .tccredit-chung-sanphamthongtin p:last-child { margin-top: 2px; font-size: 12px; line-height: 16px; }
  .tccredit-chung-sanphamgia { padding: 10px 4px 0; }
  .tccredit-chung-sanphamgia p:first-child { display: none; }
  .tccredit-chung-sanphamgia strong { margin-top: 0; font-size: 16px; line-height: 20px; }
  .tccredit-chung-sanphamtragop { margin: 10px 0 0; padding: 8px; gap: 4px; }
  .tccredit-chung-sanphamtragop p { font-size: 12px; line-height: 16px; }
  .tccredit-chung-sanphamtragop p:first-child { flex-direction: column; gap: 2px; }
  .tccredit-chung-sanphamtragop p:first-child strong { font-size: 14px; line-height: 18px; }
  .tccredit-chung-sanphamtragop p:last-child { justify-content: flex-start; gap: 4px; color: var(--mau-phu); }
  .tccredit-chung-sanphamtragop p:last-child strong { font-weight: 400; }
  .tccredit-chung-sanphamnut { margin: auto 0 0; padding-top: 12px; }
  .tccredit-chung-sanphamnut p:first-child a { height: 44px; font-size: 14px; }
  .tccredit-chung-sanphamnut p:last-child { display: none; }

  /* Form đăng ký */
  .trangchu-main-dangky { padding: 32px 0 40px; }
  .trangchu-main-dangky > .tccredit-chung-khung { gap: 24px; }
  .trangchu-main-dangkychu { display: contents; }
  .trangchu-main-dangkychu::before { display: none; }
  .trangchu-main-dangkychu > .tccredit-chung-kicker { order: 1; }
  .trangchu-main-dangkychu h2 { order: 2; margin-top: -10px; line-height: 32px; }
  .trangchu-main-dangkymota { order: 3; margin-top: -12px; font-size: 14px; line-height: 21px; }
  .trangchu-main-dangkythe { order: 4; padding: 24px 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .trangchu-main-dangkyloiich { order: 5; margin-top: 8px; }
  .trangchu-main-dangkyhotline { order: 6; margin-top: 0; padding-top: 24px; }
  .trangchu-main-dangkyloiich > p strong { font-size: 16px; }
  .trangchu-main-dangkyloiich ul { margin-top: 14px; gap: 12px; }
  .trangchu-main-dangkyloiich li { font-size: 14px; }
  .trangchu-main-dangkyhotline a { font-size: 20px; line-height: 25px; }
  .trangchu-main-dangkyhotline p:nth-child(2) { font-size: 12px; }
  .trangchu-main-dangkyhotline { grid-template-columns: 48px auto; column-gap: 16px; }
  .trangchu-main-dangkyhotline p:first-child { width: 48px; height: 48px; }
  .trangchu-main-formdau strong { font-size: 18px; line-height: 23px; }
  .trangchu-main-formdau p + p { font-size: 12px; }
  .trangchu-main-formluoi { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .trangchu-main-formkyhannut button { font-size: 14px; }

  /* Quy trình: dọc */
  .trangchu-main-quytrinh { padding: 40px 0; }
  .trangchu-main-quytrinhdau { display: block; }
  .trangchu-main-quytrinhmota { margin-top: 12px; font-size: 14px; line-height: 21px; }
  .trangchu-main-buoc { grid-template-columns: 1fr; row-gap: 24px; margin-top: 24px; }
  .trangchu-main-buocitem { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .trangchu-main-buocitem:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: -22px; border-left: 2px dotted var(--mau-chinh); }
  .trangchu-main-buocso p { width: 48px; height: 48px; font-size: 16px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
  .trangchu-main-buocso p::after { width: 12px; height: 12px; }
  .trangchu-main-buocchu { margin-top: 0; }
  .trangchu-main-buocchu strong { font-size: 16px; line-height: 20px; }
  .trangchu-main-buocchu p + p { margin-top: 6px; font-size: 14px; line-height: 21px; }
  .trangchu-main-dieukien { margin-top: 32px; padding: 24px 20px 24px 26px; gap: 16px; }
  .trangchu-main-dieukienchu strong { font-size: 18px; line-height: 23px; }
  .trangchu-main-dieukienchu p + p { margin-top: 6px; max-width: none; font-size: 12px; }
  .trangchu-main-dieukienluoi { grid-template-columns: 1fr; gap: 12px; }
  .trangchu-main-dieukienitem { grid-template-columns: 40px 1fr; column-gap: 12px; }
  .trangchu-main-dieukienitem p:first-child { width: 40px; height: 40px; }
  .trangchu-main-dieukienitem p:first-child img { max-width: 18px; max-height: 18px; }
  .trangchu-main-dieukienitem strong { font-size: 14px; }
  .trangchu-main-dieukienitem p:last-child { margin-top: 2px; font-size: 14px; }

  /* Vì sao chọn */
  .trangchu-main-visaochon { padding: 40px 0; }
  .trangchu-main-visaochonmota { margin-top: 12px; font-size: 14px; line-height: 21px; }
  .trangchu-main-visaochonanh { order: 0; margin-top: 20px; }
  .trangchu-main-visaochonanh img { aspect-ratio: 350 / 200; }
  .trangchu-main-lydo { gap: 10px; }
  .trangchu-main-lydoitem { flex-direction: column; gap: 16px; padding: 16px 12px 20px; min-height: 0; }
  .trangchu-main-lydoicon p { width: 40px; height: 40px; }
  .trangchu-main-lydoicon img { max-width: 18px; max-height: 19px; }
  .trangchu-main-lydochu strong { font-size: 14px; line-height: 18px; }
  .trangchu-main-lydochu p + p { margin-top: 6px; font-size: 12px; line-height: 18px; }

  /* Chính sách */
  .trangchu-main-chinhsach { padding: 40px 0; }
  .trangchu-main-chinhsach > .tccredit-chung-khung::after { display: none; }
  .trangchu-main-chinhsach h2 { max-width: 240px; }
  .trangchu-main-chinhsachluoi { gap: 16px; margin-top: 24px; }
  .trangchu-main-chinhsachitem { padding: 24px 20px; }
  .trangchu-main-chinhsachicon { display: flex; align-items: center; gap: 14px; }
  .trangchu-main-chinhsachicon strong { margin-top: 0; font-size: 18px; line-height: 23px; }
  .trangchu-main-chinhsachicon img { max-width: 24px; max-height: 26px; }
  .trangchu-main-chinhsachitem ul { margin-top: 18px; gap: 12px; }
  .trangchu-main-chinhsachitem li { font-size: 14px; line-height: 21px; }
  .trangchu-main-chinhsachitem li::before { top: 8px; }
  .trangchu-main-chinhsachghichu { margin-top: 20px; font-size: 12px; }

  /* Hình ảnh + đánh giá */
  .trangchu-main-hinhanh { padding: 40px 0; }
  .trangchu-main-hinhanhdau .trangchu-main-tieudelink { display: none; }
  .trangchu-main-thuvien { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .trangchu-main-thuvienitem:first-child { grid-row: auto; grid-column: 1 / -1; }
  .trangchu-main-thuvienitem:first-child img { aspect-ratio: 350 / 220; }
  .trangchu-main-thuvienitem:first-child p { clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px); }
  .trangchu-main-thuvienitem:nth-child(n + 4) { display: none; }
  .trangchu-main-thuvienitem img { aspect-ratio: 170 / 120; }
  .trangchu-main-xemthemlink { display: block; margin-top: 16px; }
  .trangchu-main-xemthemlink a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--mau-chinh); }
  .trangchu-main-xemthemlink img { width: 13px; height: auto; }
  .trangchu-main-danhgiadauslide { margin-top: 36px; }
  .trangchu-main-danhgiadauslide h2 { font-size: 18px; line-height: 23px; }
  .trangchu-main-danhgiamuiten { display: none; }
  .trangchu-main-danhgiaswiper { margin-top: 16px; overflow: visible; }
  .trangchu-main-danhgiaitem { height: 252px; padding: 8px 16px 16px; }
  .trangchu-main-danhgiadau p:first-child { font-size: 36px; line-height: 46px; }
  .trangchu-main-danhgiadau p:last-child { padding-top: 14px; }
  .trangchu-main-danhgiadau img { width: 14px; height: 13px; }
  .trangchu-main-danhgiachu { font-size: 14px; line-height: 21px; }
  .trangchu-main-danhgiaten { padding-top: 16px; grid-template-columns: 40px 1fr; column-gap: 12px; }
  .trangchu-main-danhgiaten p:first-child { width: 40px; height: 40px; font-size: 10px; }
  .trangchu-main-danhgiaten strong { font-size: 14px; }
  .trangchu-main-danhgiaten p:last-child { font-size: 12px; }
  .trangchu-main-danhgiacham { display: flex; gap: 6px; margin-top: 16px; }
  .trangchu-main-danhgiacham .swiper-pagination-bullet { width: 12px; height: 3px; margin: 0 !important; border-radius: 0; background: var(--mau-vien-dam); opacity: 1; transition: width var(--chuyen); }
  .trangchu-main-danhgiacham .swiper-pagination-bullet-active { width: 24px; background: var(--mau-chinh); }

  /* Tin tức */
  .trangchu-main-tintuc { padding: 40px 0 164px; background: #fff; }
  .trangchu-main-tintucnut { display: none; }
  .trangchu-main-tintucluoi { gap: 16px; margin-top: 20px; }
  .trangchu-main-tinnoibat { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); background: var(--mau-nen); }
  .trangchu-main-tinnoibatanh img { aspect-ratio: 350 / 196; }
  .trangchu-main-tinnoibatchu { padding: 16px; }
  .trangchu-main-tinnoibatchu > p:first-child, .trangchu-main-tinchu > p:first-child { gap: 8px; font-size: 12px; }
  .trangchu-main-tinnoibatchu span, .trangchu-main-tinchu span { height: 22px; padding: 0 8px; font-size: 11px; }
  .trangchu-main-tinnoibatchu h3 { margin-top: 12px; font-size: 18px; line-height: 27px; }
  .trangchu-main-tinnoibatmota { margin-top: 8px; font-size: 14px; line-height: 21px; }
  .trangchu-main-tinnoibatchu > p:last-child { margin-top: 12px; }
  .trangchu-main-tindanhsach { gap: 0; }
  .trangchu-main-tinitem { grid-template-columns: 80px 1fr; gap: 12px; min-height: 0; padding: 16px 0; border-bottom: 1px solid var(--mau-vien); }
  .trangchu-main-tinanh img { aspect-ratio: 1; height: auto; }
  .trangchu-main-tinchu { padding: 0; }
  .trangchu-main-tinchu h3 { margin-top: 8px; font-size: 14px; line-height: 20px; }
  .trangchu-main-tinchu > p:last-child { display: none; }
  .trangchu-main-tintuc .trangchu-main-xemthem { margin-top: 24px; }
}