/* tru-cot-giao-dien (T4 KE-HOACH-TRU-COT.md, 09/11/2026): trang danh mục trụ + bài tin, theo mẫu cam-nang-danh-muc/mau-v3.html.
   Lớp body.tc-dm / body.tc-tin do /js/tc-*.js đặt; thẻ sản phẩm và nút nhanh do js/sx/sx-dm.js dựng. */
:root{--tc-xanh:#1e428a;--tc-xanh2:#163267;--tc-vien:#e3e8f1;--tc-chu:#1f2733;--tc-phu:#5b6576;--tc-do:#d0021b}
/* ===== khung 1.320px ===== */
body.tc-dm #category .container,body.tc-dm .breadcrumbs .container,body.tc-dm .bgW,body.tc-dm .bgW+*{box-sizing:border-box}
body.tc-dm .breadcrumbs>.container,body.tc-dm #category>.container,body.tc-dm .container:has(>.bgW){width:auto!important;max-width:1320px;padding-left:16px;padding-right:16px}
/* ===== đầu danh mục: H1 + Báo giá, câu giới thiệu, hàng nút ===== */
body.tc-dm #category.tc-cat>.container>.row{display:none}
body.tc-dm #category.tc-cat{padding:4px 0 16px;background:#fff;border-bottom:1px solid var(--tc-vien)}
.tc-dau{text-align:left}
.tc-h1-hang{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.tc-h1-hang h1.tc-h1{margin:0 0 6px!important;padding:0!important;font-size:28px!important;line-height:1.25!important;color:var(--tc-xanh)!important;text-align:left!important;background:none!important;text-transform:none!important;font-weight:700}
.tc-h1-hang h1.tc-h1:before,.tc-h1-hang h1.tc-h1:after{display:none!important}
.tc-bao-gia{display:inline-flex;align-items:center;gap:6px;color:var(--tc-xanh)!important;font-weight:600;font-size:14px;white-space:nowrap;border-bottom:1px solid transparent;text-decoration:none!important}
.tc-bao-gia:hover{border-bottom-color:var(--tc-xanh)}
.tc-bao-gia svg{width:16px;height:16px;flex:none}
body.tc-dm #category .tc-dau .sx-gt{margin:0 0 12px!important;max-width:none!important;color:var(--tc-phu);font-size:14px;line-height:1.6;text-align:justify;text-align-last:left;hyphens:none}
body.tc-dm #category .tc-dau .sx-gt p{margin:0 0 4px;text-align:justify;text-align-last:left;hyphens:none}
body.tc-dm #category .tc-dau .sx-gt a{color:var(--tc-xanh)}
.tc-nut{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:0;margin:0 0 -8px;padding:0;list-style:none}
.tc-nut li{flex:none;margin:0 0 8px;padding:0}
.tc-nut li:before{display:none}
.tc-nut a{display:inline-flex;align-items:center;gap:7px;height:36px;color:var(--tc-xanh);background:#f3f6fb;border:1px solid #dbe3f0;border-radius:999px;padding:0 16px;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none!important;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s}
.tc-nut a:not(.on):hover{background:#fff;border-color:var(--tc-do);color:var(--tc-do);box-shadow:0 4px 12px rgba(208,2,27,.18);transform:translateY(-2px)}
.tc-nut a:focus-visible{outline:2px solid var(--tc-xanh);outline-offset:2px}
.tc-nut a.on{background:var(--tc-xanh);border-color:var(--tc-xanh);color:#fff;box-shadow:0 2px 6px rgba(30,66,138,.3)}
.tc-nut a.on:hover{background:var(--tc-xanh2);border-color:var(--tc-xanh2);color:#fff}
.tc-nut a.on:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.tc-nut .tc-ngan{flex-basis:100%;height:0;margin:0}
@media(hover:none){.tc-nut a:not(.on):hover{transform:none;box-shadow:none}}
/* ===== thanh "Mẫu …" + sắp xếp ===== */
body.tc-dm .bgW{background:none}
body.tc-dm .orderby{margin:20px 0 14px!important;background:#fff;border:1px solid var(--tc-vien);border-radius:10px;padding:8px 14px}
/* ===== lưới 5 / 4 / 3 / 2 cột ===== */
body.tc-dm .orderby + .row.row-sm{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0!important}
body.tc-dm .orderby + .row.row-sm:before,body.tc-dm .orderby + .row.row-sm:after{display:none!important}
body.tc-dm .orderby + .row.row-sm>.col-sm-3{width:auto!important;max-width:none!important;flex:none!important;float:none!important;padding:0!important;margin:0!important;display:flex}
body.tc-dm .orderby + .row.row-sm>.col-sm-3.tc-cho{display:none!important}
body.tc-dm .orderby + .row.row-sm>.col-sm-3>.product{margin:0!important}
body.tc-dm .orderby + .row.row-sm>.tc-moi-nap{animation:tcHien .35s ease both}
@keyframes tcHien{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1279px){body.tc-dm .orderby + .row.row-sm{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:991px){body.tc-dm .orderby + .row.row-sm{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){body.tc-dm .orderby + .row.row-sm{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* bỏ "Đã gồm VAT 8%" trên thẻ (master đã bỏ; lớp này chặn bản cũ còn trong bộ nhớ đệm) */
body.tc-dm .product .row-price small.dm-vat,#pnSearch .product .row-price small.dm-vat{display:none!important}
/* ===== nút nhanh trên ảnh thẻ (sx-dm.js: .sx-anh-k > a.thumb + .sx-nut) ===== */
.sx-bo .orderby + .row.row-sm .product .sx-anh-k{position:relative}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>a.thumb{margin-bottom:10px}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut{position:absolute!important;left:8px;right:8px;bottom:8px;top:auto;width:auto!important;margin:0!important;z-index:2;display:flex!important;justify-content:center;align-items:center;gap:8px;height:40px;padding:0 12px!important;border:0!important;border-radius:999px!important;font-size:14px!important;font-weight:600;line-height:1!important;cursor:pointer;color:#fff!important;background:var(--tc-xanh)!important;box-shadow:0 6px 16px rgba(30,66,138,.35);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s,background-color .15s;text-decoration:none!important;white-space:nowrap}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut:hover{background:var(--tc-xanh2)!important}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut-zl{background:#0068ff!important}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut-zl:hover{background:#0057d6!important}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut-chon{background:#fff!important;color:var(--tc-xanh)!important;border:1.5px solid var(--tc-xanh)!important}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut-chon:hover{background:#f3f6fb!important}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut.sx-xong{background:#1a8f4a!important}
.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut[disabled]{opacity:1;cursor:default}
.sx-bo .orderby + .row.row-sm .product:hover .sx-anh-k>.sx-nut,.sx-bo .orderby + .row.row-sm .product:focus-within .sx-anh-k>.sx-nut,.sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut.sx-xong{opacity:1;transform:none}
.sx-bo .orderby + .row.row-sm .product .sx-nut svg{width:18px;height:18px;flex:none}
.sx-bo .orderby + .row.row-sm .product .sx-nut .dai{overflow:hidden;text-overflow:ellipsis}
/* màn cảm ứng: không rê chuột được -> nút tròn luôn hiện ở góc ảnh */
@media(hover:none){
 .sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut{opacity:1;transform:none;left:auto;right:6px;bottom:6px;width:40px!important;height:40px;padding:0!important;border-radius:50%!important}
 .sx-bo .orderby + .row.row-sm .product .sx-anh-k>.sx-nut .dai{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* ===== khối dưới lưới: Xem thêm, số trang, xem các mẫu trước ===== */
.tc-them{display:flex;flex-direction:column;align-items:center;gap:10px;margin:24px 0 6px}
.tc-them[hidden],.tc-truoc[hidden],.tc-nut-them[hidden],.tc-thanh[hidden]{display:none!important}
.tc-da-xem{margin:0!important;font-size:13px;color:var(--tc-phu)}
.tc-thanh{width:220px;height:4px;border-radius:4px;background:var(--tc-vien);overflow:hidden}
.tc-thanh span{display:block;height:100%;background:var(--tc-xanh);transition:width .3s}
.tc-nut-them{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--tc-xanh)!important;border:1.5px solid var(--tc-xanh);border-radius:999px;padding:11px 26px;font-weight:600;font-size:15px;text-decoration:none!important;transition:.15s}
.tc-nut-them:hover{background:var(--tc-xanh);color:#fff!important}
.tc-nut-them small{font-weight:400;opacity:.75;font-size:13px}
.tc-nut-them[aria-busy=true]{opacity:.6;pointer-events:none}
.tc-truoc{display:flex;justify-content:center;margin:0 0 14px}
.tc-so-trang{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font-size:13px;color:var(--tc-phu);align-items:center}
.tc-so-trang a{min-width:30px;height:30px;display:grid;place-items:center;border-radius:6px;padding:0 6px;color:var(--tc-phu);text-decoration:none!important}
.tc-so-trang a:hover{background:#eef2f8;color:var(--tc-xanh)}
.tc-so-trang a.on{background:#eaf0fa;color:var(--tc-xanh);font-weight:700}
#lblPage.tc-an{display:none!important}
/* ===== bài trụ "Cẩm nang" (ô mô tả 2 của danh mục) ===== */
body.tc-dm .bgW>.area_article.tc-tru{padding:24px 28px!important;margin:28px 0!important;border:1px solid var(--tc-vien)!important;border-radius:14px}
body.tc-dm .bgW>.area_article.tc-tru>div[style*="absolute"]{display:none}
body.tc-dm .bgW>.area_article .content-post{max-width:none!important}
.tc-tru-dau{font-size:13px;font-weight:600;color:var(--tc-phu);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.tc-tru .content-post{position:relative}
.tc-tru .content-post.tc-gon{max-height:560px;overflow:hidden}
.tc-tru .content-post.tc-gon:after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.tc-mo-them{display:flex;justify-content:center;margin-top:10px}
.tc-mo-them button{font:600 14px "Be Vietnam Pro",sans-serif;color:var(--tc-xanh);background:#fff;border:1.5px solid var(--tc-xanh);border-radius:999px;padding:9px 22px;cursor:pointer}
.tc-mo-them button:hover{background:#f3f6fb}
/* khung "Xem thêm:" cuối mục của bài */
.content-post .xem-them{margin:10px 0 14px;padding:10px 14px;background:#f7f9fd;border-radius:8px}
.content-post .xem-them ul{margin:4px 0 0;padding-left:18px}
.content-post .xem-them li{margin:2px 0}
.content-post .tc-neo{scroll-margin-top:84px}
/* ===== mục lục "Nội dung chính" ===== */
.tc-ml{background:#f3f7fd;border:1px solid #dbe5f4;border-radius:12px;margin:14px 0 18px;max-width:640px;font-size:15px;line-height:1.55}
.tc-ml summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-weight:700;color:var(--tc-chu)}
.tc-ml summary::-webkit-details-marker{display:none}
.tc-ml summary:after{content:"";width:9px;height:9px;border:solid var(--tc-xanh);border-width:0 2px 2px 0;transform:rotate(-135deg);transition:.2s;margin-right:4px}
.tc-ml:not([open]) summary:after{transform:rotate(45deg)}
.tc-ml ol{margin:0;padding:0 16px 14px 34px}
.tc-ml li{margin:4px 0;text-align:left!important}
.tc-ml li a{color:var(--tc-xanh)!important;font-weight:500;text-decoration:none!important}
.tc-ml li a:hover{text-decoration:underline!important}
.tc-ml ul{margin:4px 0 6px;padding-left:18px;list-style:disc}
.tc-ml ul li{font-size:14px}
/* ===== bài tin ===== */
.tc-phut{display:inline-block;color:var(--tc-phu);font-size:13px;margin:0 0 6px}
#newsdt .ptt .bgnp p{display:none!important}  /* giá cũ trong khối thẻ SP của bài tin cũ (chủ site 09/11) */
#newsdt .ptt{height:auto!important;min-height:240px}
.tc-dan{clear:both;margin:26px 0 6px;border:1px solid #cddaf0;background:linear-gradient(135deg,#f3f7fd,#fff);border-radius:14px;padding:18px}
.tc-dan-dau{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.tc-dan-dau h2{margin:0!important;font-size:18px!important;line-height:1.35;color:var(--tc-xanh)!important;text-transform:none!important}
.tc-dan-nut{background:var(--tc-xanh);color:#fff!important;border-radius:999px;padding:8px 18px;font-weight:600;font-size:14px;text-decoration:none!important}
.tc-dan-nut:hover{background:var(--tc-xanh2)}
.tc-dan-ds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tc-dan-ds:empty{display:none}
.tc-dan-ds a{display:block;background:#fff;border:1px solid var(--tc-vien);border-radius:10px;padding:8px;font-size:13px;line-height:1.35;font-weight:500;color:var(--tc-chu)!important;text-decoration:none!important}
.tc-dan-ds a:hover{border-color:#c9d5ea;box-shadow:0 6px 16px rgba(30,66,138,.1)}
.tc-dan-ds img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;margin-bottom:6px}
/* ===== điện thoại ===== */
@media(max-width:767px){
 .tc-h1-hang h1.tc-h1{font-size:22px!important}
 body.tc-dm #category .tc-dau .sx-gt{display:none}
 .tc-nut{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px;-webkit-overflow-scrolling:touch}
 .tc-nut::-webkit-scrollbar{display:none}
 .tc-nut a{font-size:13px;padding:0 13px;height:34px}
 .tc-nut .tc-ngan{flex-basis:auto;width:1px;height:22px;background:#d5ddea;align-self:center;margin:0 4px 8px}
 .tc-nut-them .tc-ten-dm{display:none}
 .tc-nut-them{padding:10px 20px;font-size:14px}
 body.tc-dm .bgW>.area_article.tc-tru{padding:18px 16px!important;margin:20px -16px!important;border-radius:0;border-left:0!important;border-right:0!important}
 .tc-dan-ds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.tc-nut a,.sx-bo .sx-nut,.tc-thanh span,body.tc-dm .orderby + .row.row-sm>.tc-moi-nap{transition:none!important;animation:none!important}}
/* tru-cot 2 cột (mẫu v1, 09/11/2026): bài trụ hai cột trên màn ≥ 1100px – cột bài ~760px + cột phải dính (mục lục + bài viết liên quan).
   < 1100px: giữ nguyên như bản đang chạy (một cột, mục lục đầu bài, thu gọn 560px). */
.tc-ben{display:none}
@media (min-width:1100px){
 .tc-tru{overflow:visible!important}                     /* khung cũ overflow:hidden chặn position:sticky */
 .tc-tru-than{display:grid;grid-template-columns:minmax(0,760px) 320px;justify-content:space-between;gap:48px;align-items:start}
 .tc-tru-bai{min-width:0}
 .tc-tru-bai>.tc-ml{display:none}                       /* mục lục chuyển sang cột phải */
 .tc-tru .tc-tru-bai .content-post{max-width:none!important;margin:0!important}
 .tc-tru .content-post.tc-gon{max-height:none;overflow:visible}  /* máy tính: bài mở sẵn (cột phải mới có ích) */
 .tc-tru .content-post.tc-gon:after,.tc-tru .tc-mo-them{display:none}
 .tc-tru .tc-tru-bai .content-post p,.tc-tru .tc-tru-bai .content-post li{font-size:16.5px;line-height:1.75}
 .tc-ben{display:block;position:sticky;top:var(--tc-ben-top,80px);max-height:calc(100vh - var(--tc-ben-top,80px) - 96px);overflow:auto;
  overscroll-behavior:contain;scrollbar-width:thin;font-size:14.5px;line-height:1.45;padding-bottom:4px}
 .tc-ben-hop{border:1px solid #e3e9f3;border-radius:12px;background:#fff;margin-bottom:14px}
 .tc-ben-tieu{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5b6b85;padding:12px 16px 6px}
 .tc-ben-ml ol{list-style:none;margin:0;padding:0 8px 10px}
 .tc-ben-ml li{margin:0;text-align:left!important}
 .tc-ben-ml a{display:block;padding:6px 8px 6px 12px;border-left:3px solid transparent;border-radius:0 6px 6px 0;color:#24324a!important;text-decoration:none!important}
 .tc-ben-ml a:hover{background:#f3f7fd}
 .tc-ben-ml li.dang>a{border-left-color:#1d4f9c;background:#eef4fc;color:#1d4f9c!important;font-weight:600}
 .tc-ben-ml ul{list-style:none;margin:0 0 4px;padding:0 0 0 12px;display:none}
 .tc-ben-ml li.dang>ul{display:block}
 .tc-ben-ml ul a{font-size:13.5px;padding:4px 8px 4px 12px;color:#4a5872!important}
 .tc-ben-ml ul li.dang>a{font-weight:600;color:#1d4f9c!important;background:none;border-left-color:#9db8e2}
 .tc-ben-lq ul{list-style:none;margin:0;padding:2px 8px 8px;transition:opacity .2s}
 .tc-ben-lq ul.doi{opacity:.25}
 .tc-ben-lq li{margin:0;text-align:left!important}
 .tc-ben-lq a{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;padding:7px 8px;border-radius:8px;color:#24324a!important;text-decoration:none!important}
 .tc-ben-lq a:hover{background:#f3f7fd;color:#1d4f9c!important}
 .tc-ben-lq img{width:76px;height:54px;object-fit:cover;border-radius:6px;background:#eef2f7;display:block}
 .tc-ben-lq span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:500}
 .tc-ben-lq .tc-ben-muc{padding:0 16px 4px;font-size:12.5px;color:#7a879c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:768px) and (max-width:1099px){body.tc-dm .bgW>.area_article.tc-tru .content-post,body.tc-dm .tc-tru .tc-ml{max-width:760px!important;margin-left:auto!important;margin-right:auto!important}}
.tc-tru .content-post a:not(.tc-nut-them){color:#1d4f9c!important;text-decoration:underline!important;text-decoration-color:rgba(29,79,156,.35)!important;text-underline-offset:3px}
.tc-tru .content-post a:not(.tc-nut-them):hover{text-decoration-color:#1d4f9c!important}
/* mẫu v2: hàng nút tầng 2 (cấp 3) */
.tc-nut.tc-nut-2{margin-top:12px!important;padding-top:12px;border-top:1px dashed #d5ddea}
.tc-nut.tc-nut-2 a{height:32px;font-size:13.5px;font-weight:500;background:#fff}
.tc-nut.tc-nut-2 a.on{background:#eaf0fa;color:var(--tc-xanh,#1e428a);border-color:var(--tc-xanh,#1e428a);box-shadow:none}
.tc-nut.tc-nut-2 a.on:before{background:var(--tc-xanh,#1e428a)}
@media (max-width:767px){.tc-nut.tc-nut-2{margin-top:6px!important;padding-top:8px}.tc-nut.tc-nut-2 a{height:30px;font-size:12.5px}}
/* mẫu v2: thanh sắp xếp dạng chữ (khác hàng nút danh mục) */
body.tc-dm .orderby{display:flex!important;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:6px}
body.tc-dm .orderby .sx-dem{margin-right:auto!important}
body.tc-dm .orderby strong.sx-an{display:inline!important;margin:0 -8px 0 0!important;font-size:13.5px;font-weight:400;color:#7a879c}
body.tc-dm .orderby strong.sx-an:after{content:":"}
body.tc-dm .orderby>a{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;height:auto!important;
 padding:6px 0 4px!important;margin:0!important;font-size:14px!important;font-weight:500!important;color:#4a5872!important;border-bottom:2px solid transparent!important;text-decoration:none!important}
body.tc-dm .orderby>a:hover{color:var(--tc-xanh,#1e428a)!important}
body.tc-dm .orderby>a.check{color:var(--tc-xanh,#1e428a)!important;font-weight:700!important;border-bottom-color:var(--tc-xanh,#1e428a)!important}
body.tc-dm .orderby>a.check:before,body.tc-dm .orderby>a:before{display:none!important}
body.tc-dm .orderby .sx-dem span{white-space:nowrap}
@media (max-width:767px){body.tc-dm .orderby{column-gap:16px;row-gap:2px}body.tc-dm .orderby .sx-dem{flex-basis:100%}body.tc-dm .orderby strong.sx-an{display:none!important}body.tc-dm .orderby>a{font-size:13px!important;white-space:nowrap}}
/* v3: bài liên quan không ảnh, khối ẩn */
.tc-ben-lq a.kh-anh{grid-template-columns:1fr!important}
.tc-ben-lq[hidden]{display:none!important}
/* the-dm-csdl (10/11/2026, chủ site: "đóng khung viền, nổi bật để thu hút khách click"): link Báo giá cạnh H1 thành nút viền */
.tc-bao-gia{padding:8px 16px;border:1.5px solid var(--tc-xanh);border-radius:999px;background:#eef3fc;box-shadow:0 1px 3px rgba(30,66,138,.12);transition:background .15s,color .15s,box-shadow .15s}
.tc-bao-gia:hover,.tc-bao-gia:focus-visible{background:var(--tc-xanh);color:#fff!important;border-bottom-color:var(--tc-xanh);box-shadow:0 3px 8px rgba(30,66,138,.25)}
.tc-bao-gia:focus-visible{outline:2px solid var(--tc-xanh);outline-offset:2px}
@media (max-width:767px){.tc-bao-gia{padding:7px 12px;font-size:13px}}