/* ==========================================================================
   TỈ LỆ VÀNG – hệ thống cỡ chữ & khoảng cách cho mọi trang Mỹ Thuật KAN
   φ = 1.618. Mỗi bậc = bậc trước × φ.
   Cỡ chữ (desktop):  16 · 20 · 32 · 52 · 84 · 136 px  (gốc 20px × φ)
   Khoảng cách:       8 · 13 · 21 · 34 · 55 · 89 · 144 px (dãy Fibonacci)
   Chiều rộng nội dung 1240px; cột đôi chia 1.618 : 1; dòng chữ tối đa ~62 ký tự.
   File này nạp SAU cùng nên ghi đè kiểu riêng của từng trang.
   ========================================================================== */
:root{
  --phi:1.618;
  --c-0:16px;
  --c-1:20px;
  --c-2:clamp(24px,2.3vw,32px);
  --c-3:clamp(32px,3.6vw,52px);
  --c-4:clamp(44px,5.8vw,84px);
  --c-5:clamp(56px,9.4vw,136px);
  --k-1:8px;--k-2:13px;--k-3:21px;--k-4:34px;--k-5:55px;--k-6:89px;--k-7:144px;
  --rong:1240px;
  --chu-dai:62ch;
}
@media(max-width:820px){:root{--k-6:55px;--k-7:89px}}

/* Nền chữ */
body{font-size:var(--c-1);line-height:1.618;letter-spacing:-.003em;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}
p{max-width:var(--chu-dai)}

/* Tiêu đề: dòng sát (1.0–1.1), giãn chữ âm theo độ lớn */
.man h1,.bst .ten-lon,.bst h2{font-size:var(--c-5);line-height:1;letter-spacing:-.045em}
.noibat h2,.ct h2,.nl h2,.muc h2,.chot h2{font-size:var(--c-4);line-height:1.06;letter-spacing:-.04em}
.luoi h3,.goi h3{font-size:var(--c-3);line-height:1.1;letter-spacing:-.03em}
.vi b,.buoc b,.hoi summary,.mau h3,.ct-luoi figcaption b{font-size:var(--c-2);line-height:1.25;letter-spacing:-.02em}
.vi b,.mau h3,.ct-luoi figcaption b{font-size:clamp(21px,1.8vw,26px)}

/* Chữ phụ đầu mục: bậc 2, xám ấm, căn giữa giới hạn độ dài */
.man .phu,.bst-mo,.ct>p,.muc>p,.noibat>p,.nl p{font-size:clamp(21px,1.9vw,26px);line-height:1.55;margin-left:auto;margin-right:auto}
.nl p,.bst-mo{margin-left:0}
.luoi p,.vi span,.buoc span,.hoi p,.mau p,.goi ul,.ct-luoi figcaption span{font-size:var(--c-1);line-height:1.618}
.nho,.bst-nhan,.nl-nhan,.bst-tt dt,.lich b,.chan-lk,footer{font-size:var(--c-0)}
/* Thanh menu: chữ 17px dễ đọc, nút 16px */
.thanh .w{height:80px;font-size:19px}
.thanh nav{gap:26px;font-size:19px;font-weight:500}
.thanh nav a{white-space:nowrap}
.thanh .ten-tt b{font-size:22px}
.thanh img{height:36px}
.thanh a.nho,.thanh .nho{font-size:18px;padding:13px 26px}
@media(max-width:1200px){.thanh nav a[data-tel]{display:none}}
@media(max-width:1024px){.thanh nav{display:none}}

/* Nhãn chữ hoa: giãn rộng kiểu tạp chí */
.bst-nhan,.nl-nhan,.bst-tt dt,.lich b{letter-spacing:.24em}

/* Nhịp khoảng cách theo Fibonacci */
.noibat,.ct,.nl,.muc,section.muc,.chot{padding:var(--k-7) var(--k-3)}
.bst{padding:var(--k-7) var(--k-3)}
.man{padding-top:var(--k-6)}
.man h1{margin:0 0 var(--k-3)}
.man .phu{margin-top:0;margin-bottom:var(--k-4)}
.noibat h2+*,.ct h2+p,.muc h2+p{margin-top:var(--k-3)}
.luoi,.ct-luoi,.vi,.goi,.mau,.buoc,.bon,.hoi,.lich{margin-top:var(--k-5)}
.luoi,.ct-luoi,.vi,.goi,.mau{gap:var(--k-3)}
.luoi{padding:var(--k-3)}
.luoi a{padding:var(--k-5) var(--k-4) 0}
.vi div,.goi>div{padding:var(--k-4)}
.goi ul{gap:var(--k-2);margin-bottom:var(--k-4)}
.hoi details{padding:var(--k-3) var(--k-1)}
.buoc div{padding:var(--k-3) 0}
.bst-tt{margin:var(--k-4) 0 var(--k-5)}

/* Bố cục cột đôi theo tỉ lệ vàng (1.618 : 1) */
.bst-w{max-width:var(--rong);grid-template-columns:1.618fr 1fr;gap:var(--k-6)}
.bst .ten-lon,.bst h2{font-size:clamp(56px,7.4vw,112px);white-space:nowrap}
.bst-tt dd{font-size:22px}
.nl-w{max-width:var(--rong);grid-template-columns:1.618fr 1fr;gap:var(--k-6)}
.luoi,.ct-luoi,.vi,.goi,.mau,.thanh .w{max-width:var(--rong)}
@media(max-width:900px){.bst-w,.nl-w{grid-template-columns:1fr;gap:var(--k-5)}}

/* Khung ảnh theo hình chữ nhật vàng */
.trinh-chieu{aspect-ratio:1.618/1}
.ct-luoi .khung,.mau .t{aspect-ratio:1.618/1}
@media(max-width:820px){.trinh-chieu{aspect-ratio:4/3}}

/* Bo góc theo bậc: 13 · 21 · 34 */
.vi div,.goi>div,.mau a,.ct-luoi .khung{border-radius:var(--k-3)}
.trinh-chieu,.bst-khung{border-radius:var(--k-4)}

/* Nút: chiều cao 55px, chữ đậm vừa */
.bst-nut a,.chot a,.goi a.nut,form button,button[type=submit]{min-height:55px;padding:0 var(--k-4);display:inline-flex;align-items:center;justify-content:center;font-size:18px;letter-spacing:.01em}
.goi a.nut{min-height:47px}

/* Ô nhập: 55px, chữ 17px */
input,select,textarea{font-size:18px;padding:var(--k-2) var(--k-3)}
input,select{min-height:55px}

/* Số liệu lớn */
.bon b,.nl-so b{font-size:var(--c-4);letter-spacing:-.045em}
.bon{gap:var(--k-4)}

/* Điện thoại: thu thang chữ */
@media(max-width:560px){
  :root{--c-1:18px;--c-0:15px}
  .bst .ten-lon,.bst h2{white-space:normal}
  .thanh .w{height:64px;gap:var(--k-2)}.thanh .ten-tt b{font-size:17px}.thanh img{height:28px}
  .thanh a.nho,.thanh .nho{font-size:14px;padding:9px 16px}
  .man .lk{flex-wrap:wrap;gap:var(--k-2) var(--k-3);font-size:18px}
  .noibat,.ct,.nl,.muc,section.muc,.chot,.bst{padding:var(--k-6) var(--k-3)}
  .luoi a{padding:var(--k-4) var(--k-3) 0}
}

/* Chữ phụ dưới tiêu đề luôn căn giữa */
.noibat>p,.muc>p,.ct>p{margin-left:auto!important;margin-right:auto!important}

/* Ba nút đầu trang có icon */
.lk-icon{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--k-2);margin-top:var(--k-3)}
.lk-icon a{display:inline-flex;align-items:center;gap:var(--k-2);min-height:55px;padding:0 var(--k-3) 0 var(--k-1);border-radius:999px;background:#fff;border:1px solid var(--ke);color:var(--chu)!important;font-size:18px;font-weight:600;text-decoration:none!important;box-shadow:0 6px 18px rgba(120,60,20,.08);transition:transform .25s,box-shadow .25s,background .25s}
.lk-icon a:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(120,60,20,.16)}
.lk-icon .ic{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#FBE3D3;color:var(--cam);flex:none;transition:.25s}
.lk-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lk-icon .mui{color:var(--cam);font-size:20px;transition:transform .25s}
.lk-icon a:hover .mui{transform:translateX(4px)}
.lk-icon a.chinh{background:var(--cam);border-color:var(--cam);color:#fff!important}
.lk-icon a.chinh .ic{background:rgba(255,255,255,.2);color:#fff}
.lk-icon a.chinh .mui{color:#fff}
.lk-icon a.zalo .ic{background:#E5F0FF;color:#0068FF}
.lk-icon a:not(.chinh):hover .ic{background:var(--cam);color:#fff}
.lk-icon a.zalo:hover .ic{background:#0068FF}
@media(max-width:560px){.lk-icon{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}.lk-icon a{font-size:17px}.lk-icon .mui{margin-left:auto}}
/* Sửa sau kiểm tra thiết bị */
.chon-yc label{position:relative;display:block}
.chon-yc input{inset:0;width:100%;height:100%;margin:0}
.thanh a,.thanh .ten-tt{min-height:44px;display:inline-flex;align-items:center}
.ct .lk,.noibat p a,.bst-nut a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:400px){.thanh .ten-tt b{display:none}}html,body{overflow-x:clip}
img{max-width:100%;height:auto}
.trinh-chieu img,.bst-khung img,.mau .t img,.ct-luoi .khung img,.luoi .anh-sp{height:100%}

/* Máy tính bảng: sản phẩm 2 cột cho gọn */
@media(min-width:561px) and (max-width:820px){.luoi{grid-template-columns:1fr 1fr}.luoi a{min-height:380px;padding:var(--k-4) var(--k-3) 0}.luoi .e{font-size:120px}.luoi h3{font-size:30px}.luoi .anh-sp{height:200px}}

/* Logo menu giữ đúng tỉ lệ (thẻ ảnh có width/height để Google đo, nên phải để width:auto) */
.thanh img{width:auto!important;aspect-ratio:240/114}

/* Danh mục 11 dòng sản phẩm trên trang chủ */
.dm-luoi{max-width:var(--rong);margin:var(--k-5) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--k-2);text-align:left}
.dm-luoi a{display:flex;align-items:center;gap:var(--k-3);padding:var(--k-3);background:#fff;border:1px solid var(--ke);border-radius:var(--k-3);color:var(--chu);transition:.25s}
.dm-luoi a:hover{border-color:var(--cam);transform:translateY(-3px);box-shadow:0 14px 28px rgba(120,60,20,.1)}
.dm-e{flex:none;width:68px;height:68px;border-radius:var(--k-2);display:grid;place-items:center;font-size:36px}
.dm-c{flex:1;min-width:0}
.dm-c b{display:block;font-size:19px;line-height:1.3}
.dm-c small{color:var(--mo);font-size:15px}
.dm-m{color:var(--cam);font-size:24px;transition:transform .25s}
.dm-luoi a:hover .dm-m{transform:translateX(4px)}
@media(max-width:1024px){.dm-luoi{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dm-luoi{grid-template-columns:1fr}.dm-e{width:55px;height:55px;font-size:30px}}
/* Tiêu đề nhóm danh mục */
.dm-nhom{max-width:var(--rong);margin:var(--k-5) auto 0;text-align:left;font-size:var(--c-0);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cam);display:flex;align-items:center;gap:var(--k-2)}
.dm-nhom:after{content:'';flex:1;height:1px;background:var(--ke)}
.dm-nhom+.dm-luoi{margin-top:var(--k-3)}

/* Menu 7 mục: không bao giờ chồng chữ */
.thanh .ten-tt,.thanh a.nho{flex:none}
.thanh nav{flex:1 1 auto;min-width:0;justify-content:center;gap:clamp(14px,1.6vw,26px)}
.thanh nav a[data-tel]{display:none}
.thanh .ten-tt b{display:inline-block!important}
@media(max-width:1240px){.thanh nav{gap:14px;font-size:17px}}
@media(max-width:400px){.thanh .ten-tt b{font-size:15px}.thanh .ten-tt img{height:26px}.thanh a.nho{padding:0 14px;font-size:14px}}
@media(max-width:374px){.thanh .ten-tt b{display:none!important}}
@media(max-width:1100px){.thanh nav{display:none}}

@media(max-width:1300px){.thanh nav{gap:12px;font-size:16px}.thanh .ten-tt b{font-size:18px}}

/* Khối liên hệ */
.neo{display:block;position:relative;top:-90px;visibility:hidden}
.lh-luoi{max-width:var(--rong);margin:var(--k-5) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--k-2);text-align:left}
.lh-o{display:flex;gap:var(--k-2);align-items:flex-start;background:#fff;border:1px solid var(--ke);border-radius:var(--k-3);padding:var(--k-3);color:var(--chu);transition:.25s;min-height:44px}
.lh-o:hover{border-color:var(--cam);transform:translateY(-3px);box-shadow:0 14px 28px rgba(120,60,20,.1)}
.lh-ic{flex:none;width:47px;height:47px;border-radius:50%;background:#FBE3D3;color:var(--cam);display:grid;place-items:center;font-size:22px}
.lh-o b{display:block;font-size:17px;margin-bottom:2px}
.lh-o span span{display:block;font-size:16px;line-height:1.45;word-break:break-word}
.lh-o small{display:block;margin-top:6px;color:var(--cam);font-weight:600;font-size:15px}
.lh-ban-do{max-width:var(--rong);margin:var(--k-3) auto 0;border-radius:var(--k-3);overflow:hidden;border:1px solid var(--ke);aspect-ratio:3/1;background:#EFE4D6}
.lh-ban-do iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:1024px){.lh-luoi{grid-template-columns:1fr 1fr}.lh-ban-do{aspect-ratio:16/9}}
@media(max-width:560px){.lh-luoi{grid-template-columns:1fr}.lh-ban-do{aspect-ratio:4/3}}
.thanh nav a{padding-left:0!important;padding-right:0!important;white-space:nowrap}

.lh-gio{display:block;font-style:normal;font-size:15px;color:var(--chu);margin-top:6px;font-weight:600}

/* Nút Nhận báo giá luôn hiện trên mọi trang, mọi màn hình */
.thanh a.nho{display:none!important}
@media(max-width:1100px){.thanh a.nho{display:inline-flex!important;align-items:center;min-height:44px}}

/* Menu 7 mục: khoảng cách vừa đủ */
.thanh nav{gap:clamp(12px,1.3vw,20px);font-size:18px}
@media(max-width:1300px){.thanh nav{gap:12px;font-size:16px}}

/* Máy tính: menu trải đều, mục Liên hệ nổi bật màu cam */
@media(min-width:1101px){.thanh nav{justify-content:flex-end;gap:clamp(16px,1.6vw,28px)}.thanh nav a[href$='#lien-he']{color:var(--cam);font-weight:700}}

/* Máy tính: logo + menu gom giữa, khoảng cách cân đối 55px */
@media(min-width:1101px){.thanh .w{justify-content:center;gap:var(--k-5)}.thanh nav{flex:0 1 auto;justify-content:flex-start}}

.nl-so{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.nl-so span{display:block;line-height:1.4;margin-top:6px}

/* Hình minh họa riêng KAN thay biểu tượng */
.luoi a img.mh{width:min(86%,420px);height:auto;margin:auto auto 0;display:block;border-radius:24px 24px 0 0;transition:transform .6s}
.luoi a:hover img.mh{transform:scale(1.04)}
.trinh-chieu .slide img.mh{position:absolute;inset:6% 0 12%;width:100%;height:82%;object-fit:contain}
.ct-luoi .khung img.mh{width:100%;height:100%;object-fit:cover}
.dm-e img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dm-e{overflow:hidden;padding:0!important}
.bst-khung img{object-fit:cover}
/* Bộ icon nét mảnh KAN */
.ic-net{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
.vi i .ic-net,.cn-luoi i .ic-net{width:44px;height:44px;color:var(--cam);stroke-width:1.5}
.vi i,.cn-luoi i{display:grid;place-items:center;width:68px;height:68px;border-radius:18px;background:#FBE3D3;margin-bottom:var(--k-3)}
.cn-luoi i{background:rgba(226,98,44,.16)}
.lh-ic .ic-net{width:22px;height:22px}
.ic-tem{color:var(--cam);width:18px;height:18px}
.ic-chu{width:1.05em;height:1.05em}
.ic-noi{width:26px;height:26px;color:#fff;stroke-width:2}
.lh-gio{display:flex!important;align-items:center;gap:6px}

/* Mục mùa đang nhận đặt trên menu: nhấp nháy phát sáng (tự đổi chữ theo tháng) */
#menuMua{position:relative;color:var(--cam)!important;font-weight:700;animation:mua-nhay 1.6s ease-in-out infinite}
#menuMua:before{content:"";position:absolute;right:-9px;top:2px;width:7px;height:7px;border-radius:50%;background:var(--cam);box-shadow:0 0 0 0 rgba(226,98,44,.6);animation:mua-cham 1.6s ease-out infinite}
@keyframes mua-nhay{0%,100%{opacity:1;text-shadow:0 0 0 rgba(226,98,44,0)}50%{opacity:.55;text-shadow:0 0 12px rgba(226,98,44,.65)}}
@keyframes mua-cham{0%{box-shadow:0 0 0 0 rgba(226,98,44,.6)}100%{box-shadow:0 0 0 9px rgba(226,98,44,0)}}
@media(prefers-reduced-motion:reduce){#menuMua,#menuMua:before{animation:none}}

/* Độ tương phản chuẩn WCAG AA (≥ 4.5:1): chữ trắng trên nền cam và chữ cam trên nền sáng dùng cam đậm hơn một chút */
:root{--cam-chu:#C24E1C;--xanh:#B9471A}
.thanh a.nho,.thanh .nho,.lk-icon a.chinh{background:var(--cam-chu)!important;border-color:var(--cam-chu)!important}
.thanh a.nho:hover,.thanh .nho:hover,.lk-icon a.chinh:hover{background:#A63F15!important}
.chot{background:var(--cam-chu)!important}
.chot p,.chot p span{color:#fff!important;opacity:1!important}
.chot .trang{color:var(--cam-chu)!important}
.chan-lk a,footer .chan-lk a{color:#B9471A!important}

/* Chấm chuyển ảnh: vùng bấm 24px cho dễ chạm trên điện thoại, chấm nhìn thấy vẫn nhỏ gọn */
.trinh-chieu .cham{gap:0!important}
.trinh-chieu .cham button{width:24px!important;height:24px!important;background:none!important;display:grid;place-items:center}
.trinh-chieu .cham button:after{content:"";width:9px;height:9px;border-radius:9px;background:rgba(255,255,255,.6);transition:.3s}
.trinh-chieu .cham button.on:after{width:24px;background:#fff}

/* Khối Cẩm nang trên trang danh mục: liên kết bài viết Tin tức cùng chủ đề */
.cam-nang{background:#fff;padding:var(--k-6) var(--k-3);border-top:1px solid #E2D6C8}
.cam-nang .cn-w{max-width:1240px;margin:0 auto}
.cam-nang .cn-nhan{color:#B9471A;font-size:var(--c-0);font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.cam-nang h2{font-size:var(--c-3);font-weight:800;letter-spacing:-.03em;margin:var(--k-1) 0 var(--k-4)}
.cam-nang .cn-ds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--k-2)}
.cam-nang .cn-ds a{display:block;border:1px solid #E2D6C8;border-radius:13px;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.45;color:#1E1A17;background:#FCF4EC}
.cam-nang .cn-ds a:hover{border-color:var(--cam);color:#B9471A}
.cam-nang .cn-tat{display:inline-block;margin-top:var(--k-3);color:#B9471A;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.cam-nang .cn-ds{grid-template-columns:1fr}}

/* Ô Liên hệ có 2 số điện thoại: mỗi số 1 link gọi, vùng bấm đủ lớn */
.lh-o a.sdt{display:block;padding:4px 0;color:var(--chu);font-weight:600}.lh-o a.sdt:hover{color:#B9471A}
footer a[href^='tel:']{color:inherit}

/* Bảng chọn 2 số khi bấm nút gọi tròn ở góc màn hình */
.chon-so{position:fixed;right:20px;bottom:150px;z-index:60;width:250px;background:#fff;border:1px solid #E2D6C8;border-radius:21px;box-shadow:0 18px 40px rgba(60,30,10,.22);padding:18px;display:grid;gap:10px}
.chon-so[hidden]{display:none}
.chon-so b{font-size:16px;color:#1E1A17;padding-right:30px}
.chon-so a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:#C24E1C;color:#fff!important;font-weight:700;font-size:18px;letter-spacing:.02em}
.chon-so a+a{background:#fff;color:#B9471A!important;border:2px solid #C24E1C}
.chon-so button{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;background:none;font-size:24px;line-height:1;color:#6B6057;cursor:pointer}

/* Mục Ảnh thực tế công trình trên trang danh mục */
.thuc-te{background:#fff;padding:var(--k-6) var(--k-3)}
.thuc-te .tt-w{max-width:1240px;margin:0 auto}
.thuc-te .tt-nhan{color:#B9471A;font-size:var(--c-0);font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.thuc-te h2{font-size:var(--c-3);font-weight:800;letter-spacing:-.03em;margin:var(--k-1) 0 var(--k-4)}
.tt-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-3)}
.tt-luoi figure{margin:0;border-radius:var(--k-3);overflow:hidden;background:#F4EFE9;border:1px solid #E2D6C8}
.tt-luoi a{display:block;aspect-ratio:4/3;overflow:hidden}
.tt-luoi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.tt-luoi a:hover img{transform:scale(1.04)}
.tt-luoi figcaption{padding:12px 16px;font-size:16px;line-height:1.45;color:#3A332D;font-weight:600}
.tt-ghi{margin:var(--k-3) 0 0;color:#6B6057;font-size:15px}
@media(max-width:1100px){.tt-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.tt-luoi{grid-template-columns:1fr}}

/* chu-dong-dau: ảnh có 2 dòng MỸ THUẬT KAN.COM + số điện thoại ở mép dưới – khung cắt ảnh thì giữ mép dưới, chú thích slide dời lên trên */
.mau .t img,.ct-luoi .khung img,.luoi .anh-sp{object-position:50% 100%}
.trinh-chieu .chu-thich{bottom:auto;top:44px}
@media(max-width:820px){.trinh-chieu .chu-thich{top:30px}}
.tt-luoi a.doc img{object-fit:contain;background:#1E1814}