/* Extracted from seamax-trang-chu-v02.html — Seamax home spine */

/* ============================================================
   SEAMAX — prototype trang chủ v0.1
   Hướng: hệ sơn & chống thấm cho nhà thầu + chủ sửa nhà/quán
   ============================================================ */

:root{
  /* Bảng màu: nền vôi vữa, mực navy lấy từ logo, xanh lá logo,
     rỉ sét dành riêng cho trạng thái hỏng. Màu cầu vồng của logo
     chỉ xuất hiện ở khối Bảng màu — màu là công cụ, không phải thông điệp. */
  --voi:        #E9EAE4;
  --voi-dam:    #DCDDD4;
  --giay:       #FBFBF9;
  --muc:        #1B2757;
  --muc-2:      #214286;
  --la:         #2C9942;
  --betong:     #6E747B;
  --betong-mo:  #9AA0A6;
  --gi:         #B4402A;
  --am:         #0F6E7A;

  --do-display: 'Archivo', system-ui, sans-serif;
  --do-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --do-so:      'IBM Plex Mono', ui-monospace, monospace;

  --khung: 1240px;
  --vien: 1px solid rgba(27,39,87,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--voi);
  color:var(--muc);
  font-family:var(--do-body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img,svg{ max-width:100%; }

:focus-visible{
  outline:2.5px solid var(--muc-2);
  outline-offset:3px;
}

.khung{
  width:100%;
  max-width:var(--khung);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- kiểu chữ dùng chung ---------- */
.h-lon{
  font-family:var(--do-display);
  font-variation-settings:'wdth' 108,'wght' 780;
  font-size:clamp(2.1rem,5.1vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.022em;
  margin:0;
}
.h-muc{
  font-family:var(--do-display);
  font-variation-settings:'wdth' 106,'wght' 700;
  font-size:clamp(1.55rem,3vw,2.3rem);
  line-height:1.12;
  letter-spacing:-.018em;
  margin:0 0 12px;
}
.nhan{
  font-family:var(--do-so);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--betong);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.nhan::before{
  content:"";
  width:26px; height:2px;
  background:var(--la);
  flex:none;
}
.dan{
  font-size:1.02rem;
  color:#3B4664;
  max-width:60ch;
}
.so{ font-family:var(--do-so); font-variation-settings:normal; }

/* ---------- nút ---------- */
.nut{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px;
  font-family:var(--do-body);
  font-size:.95rem; font-weight:500;
  text-decoration:none;
  border:1.5px solid var(--muc);
  border-radius:2px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.nut--chinh{ background:var(--muc); color:var(--giay); }
.nut--chinh:hover{ background:#111C42; transform:translateY(-1px); }
.nut--phu{ background:transparent; color:var(--muc); }
.nut--phu:hover{ background:rgba(27,39,87,.07); }

/* ============================================================
   ĐẦU TRANG
   ============================================================ */
.thanh-tren{
  background:var(--muc);
  color:#C9D0E8;
  font-size:.8rem;
}
.thanh-tren .noi{
  display:flex; flex-wrap:wrap; gap:8px 26px;
  align-items:center; justify-content:space-between;
  padding-block:9px;
}
.thanh-tren a{ color:#fff; text-decoration:none; font-weight:500; }
.thanh-tren a:hover{ text-decoration:underline; }
.duong-day{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.duong-day span{ color:#8D9AC4; }

.dau{
  position:sticky; top:0; z-index:60;
  background:rgba(233,234,228,.93);
  backdrop-filter:blur(9px);
  border-bottom:var(--vien);
}
.dau .noi{
  display:flex; align-items:center; gap:26px;
  padding-block:14px;
}
.brandmark{ height:38px; width:auto; display:block; }
.logo-lien{ display:block; flex:none; }

.menu{
  display:flex; gap:26px;
  margin-left:auto;
  font-size:.93rem; font-weight:500;
}
.menu a{ text-decoration:none; padding-block:4px; border-bottom:2px solid transparent; }
.menu a:hover{ border-bottom-color:var(--la); }
.dau .nut{ padding:11px 18px; font-size:.88rem; }

@media (max-width:940px){
  .menu{ display:none; }
}
@media (max-width:760px){
  .dau .nut{ display:none; }
  .dau .noi{ padding-block:11px; }
  .brandmark{ height:32px; }
  .thanh-tren{ font-size:.74rem; }
  .tuong{ height:262px; }
  .lop{ font-size:.56rem; }
  .lat-cat{ padding:16px 14px 18px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-block:clamp(48px,7vw,86px) clamp(40px,6vw,72px);
  position:relative;
  overflow:hidden;
}
/* vệt ố chân tường — mô-típ nền, rất mờ */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:190px;
  background:linear-gradient(to top,rgba(180,64,42,.09),transparent 78%);
  pointer-events:none;
}
.hero .noi{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(30px,4.5vw,64px);
  align-items:center;
  position:relative; z-index:1;
}
@media (max-width:980px){
  .hero .noi{ grid-template-columns:1fr; }
}
.hero .h-lon span{ color:var(--gi); }
.hero .dan{ margin:20px 0 28px; font-size:1.08rem; }
.hero-nut{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-thuoc{
  margin-top:30px; padding-top:18px;
  border-top:var(--vien);
  display:flex; flex-wrap:wrap; gap:10px 30px;
  font-family:var(--do-so); font-size:.78rem;
  color:var(--betong);
}
.hero-thuoc b{ color:var(--muc); font-weight:500; }

/* ============================================================
   CHỮ KÝ: LÁT CẮT TƯỜNG
   ============================================================ */
.lat-cat{
  background:var(--giay);
  border:var(--vien);
  border-radius:3px;
  padding:20px 20px 22px;
  box-shadow:0 18px 44px -30px rgba(27,39,87,.5);
}
.lat-dau{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-bottom:16px;
}
.lat-dau h3{
  font-family:var(--do-display);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:1rem; margin:0; letter-spacing:-.01em;
}
.cong-tac{
  display:inline-flex;
  border:1.5px solid var(--muc);
  border-radius:2px;
  overflow:hidden;
}
.cong-tac button{
  font-family:var(--do-body);
  font-size:.78rem; font-weight:500;
  padding:7px 13px;
  border:0; background:transparent; color:var(--muc);
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.cong-tac button[aria-pressed="true"]{ background:var(--muc); color:var(--giay); }
.cong-tac button:last-child[aria-pressed="true"]{ background:var(--gi); border-color:var(--gi); }

/* các lớp tường */
.tuong{
  display:flex;
  height:212px;
  border:1px solid rgba(27,39,87,.2);
  border-radius:2px;
  overflow:hidden;
  position:relative;
  background:var(--voi-dam);
}
.lop{
  position:relative;
  border:0; padding:0; margin:0;
  cursor:pointer;
  font-family:var(--do-so);
  font-size:.62rem;
  color:rgba(255,255,255,.9);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  display:flex; align-items:flex-end; justify-content:center;
  padding-block:10px;
  letter-spacing:.06em;
  transition:flex-basis .5s cubic-bezier(.4,0,.2,1), opacity .35s ease, filter .25s ease;
  border-right:1px solid rgba(255,255,255,.28);
}
.lop:last-child{ border-right:0; }
.lop:hover,.lop[aria-current="true"]{ filter:brightness(1.14); }
.lop[aria-current="true"]::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 2.5px var(--voi);
}
.lop--gach{
  flex:0 0 30%;
  color:rgba(255,255,255,.92);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 46px),
    #877E72;
}
.lop--tret{ flex:0 0 24%; background:#B9B4A6; color:#3A3A34; }
.lop--lot{  flex:0 0 16%; background:var(--am); }
.lop--phu{  flex:0 0 30%; background:var(--muc-2); }

/* trạng thái thiếu lót */
.tuong[data-hong="1"] .lop--lot{ flex-basis:0%; opacity:0; pointer-events:none; }
.tuong[data-hong="1"] .lop--tret{ flex-basis:32%; }
.tuong[data-hong="1"] .lop--phu{ flex-basis:38%; }
.o-tham{
  position:absolute; inset:auto 0 0 0; height:0;
  background:
    radial-gradient(60% 100% at 18% 100%,rgba(180,64,42,.55),transparent 70%),
    radial-gradient(52% 100% at 62% 100%,rgba(120,60,30,.5),transparent 72%),
    linear-gradient(to top,rgba(140,70,40,.55),transparent);
  transition:height .6s ease;
  pointer-events:none;
}
.tuong[data-hong="1"] .o-tham{ height:62%; }
.bong-rop{
  position:absolute; right:12%; bottom:26%;
  width:0; height:0; border-radius:50% 50% 46% 54%;
  background:rgba(233,234,228,.9);
  border:1px solid rgba(180,64,42,.6);
  transition:width .45s ease .2s, height .45s ease .2s;
  pointer-events:none;
}
.tuong[data-hong="1"] .bong-rop{ width:34px; height:22px; }

.mua{
  position:absolute; top:8px; right:8px;
  font-family:var(--do-so); font-size:.6rem;
  color:rgba(255,255,255,.85);
  letter-spacing:.08em;
}

/* bảng giải thích lớp */
.giai-thich{
  margin-top:16px;
  border-top:var(--vien);
  padding-top:14px;
  min-height:118px;
}
.giai-thich h4{
  font-family:var(--do-display);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:.98rem; margin:0 0 5px;
}
.giai-thich p{ margin:0 0 8px; font-size:.9rem; color:#3B4664; }
.giai-thich .canh{
  font-size:.85rem; color:var(--gi);
  display:flex; gap:8px; align-items:flex-start;
}
.giai-thich .canh b{ font-weight:600; }
.gt-so{
  font-family:var(--do-so); font-size:.75rem;
  color:var(--betong);
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-top:8px;
}

/* ============================================================
   KHỐI CHUNG
   ============================================================ */
.muc{ padding-block:clamp(52px,6.5vw,92px); }
.muc--giay{ background:var(--giay); border-block:var(--vien); }
.muc--muc{ background:var(--muc); color:#DCE2F2; }
.muc--muc .h-muc{ color:#fff; }
.muc--muc .nhan{ color:#8D9AC4; }
.muc--muc .dan{ color:#C2CBE4; }

.dau-muc{ max-width:66ch; margin-bottom:34px; }

/* ---------- 3 tình huống ---------- */
.luoi-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:18px;
}
.the{
  background:var(--giay);
  border:var(--vien);
  border-radius:3px;
  padding:26px 24px 24px;
  text-decoration:none;
  display:flex; flex-direction:column;
  min-height:230px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.the:hover{
  transform:translateY(-3px);
  border-color:rgba(27,39,87,.4);
  box-shadow:0 16px 34px -26px rgba(27,39,87,.65);
}
.the .ma{
  font-family:var(--do-so); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--la); margin-bottom:12px;
}
.the h3{
  font-family:var(--do-display);
  font-variation-settings:'wdth' 102,'wght' 700;
  font-size:1.28rem; margin:0 0 9px; letter-spacing:-.012em;
}
.the p{ margin:0; font-size:.93rem; color:#3B4664; }
.the .di{
  margin-top:auto; padding-top:16px;
  font-size:.85rem; font-weight:500; color:var(--muc-2);
}

/* ---------- hỗ trợ kỹ thuật ---------- */
.ky-thuat{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
@media (max-width:900px){ .ky-thuat{ grid-template-columns:1fr; } }
.the-goi{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:3px;
  padding:22px 22px 20px;
  margin-bottom:14px;
}
.the-goi .vai{
  font-family:var(--do-so); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:#8D9AC4; margin-bottom:6px;
}
.the-goi .so-dt{
  font-family:var(--do-display);
  font-variation-settings:'wdth' 96,'wght' 700;
  font-size:1.75rem; color:#fff;
  text-decoration:none; letter-spacing:-.01em;
  display:inline-block;
}
.the-goi .so-dt:hover{ color:#8FE3A6; }
.the-goi p{ margin:6px 0 0; font-size:.9rem; color:#B7C1DD; }

.buoc{ list-style:none; margin:0; padding:0; counter-reset:b; }
.buoc li{
  counter-increment:b;
  display:grid; grid-template-columns:34px 1fr; gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.94rem;
}
.buoc li::before{
  content:counter(b,decimal-leading-zero);
  font-family:var(--do-so); font-size:.78rem;
  color:#8FE3A6; padding-top:3px;
}
.buoc li b{ color:#fff; font-weight:600; }

/* ---------- catalog ---------- */
.luoi-sp{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:16px;
}
.sp{
  border:var(--vien);
  border-radius:3px;
  background:var(--giay);
  padding:20px;
  display:flex; flex-direction:column;
}
.sp .he{
  display:inline-block;
  font-family:var(--do-so); font-size:.63rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px;
  background:var(--voi-dam); color:var(--muc);
  margin-bottom:12px; align-self:flex-start;
}
.sp .he[data-he="tham"]{ background:rgba(15,110,122,.14); color:var(--am); }
.sp .he[data-he="lot"]{  background:rgba(44,153,66,.14);  color:#1F7431; }
.sp .he[data-he="phu"]{  background:rgba(33,66,134,.13);  color:var(--muc-2); }
.sp h3{
  font-family:var(--do-body);
  font-size:1.02rem; font-weight:600;
  margin:0 0 10px; line-height:1.32;
}
.sp dl{
  margin:0; padding-top:12px;
  border-top:1px dashed rgba(27,39,87,.22);
  display:grid; grid-template-columns:auto 1fr;
  gap:5px 14px;
  font-size:.82rem;
}
.sp dt{ color:var(--betong); }
.sp dd{ margin:0; font-family:var(--do-so); font-size:.78rem; }
.ghi-tds{
  margin-top:24px; font-size:.85rem; color:var(--betong);
  border-left:2px solid var(--la); padding-left:14px;
}

/* ---------- công trình (trạng thái rỗng thật thà) ---------- */
.luoi-ct{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.o-trong{
  aspect-ratio:4/3;
  border:1.5px dashed rgba(27,39,87,.3);
  border-radius:3px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:20px;
  color:var(--betong);
  background:
    repeating-linear-gradient(135deg,rgba(27,39,87,.03) 0 9px,transparent 9px 18px);
}
.o-trong .ten{ font-family:var(--do-so); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.o-trong .mo{ font-size:.85rem; max-width:24ch; }

/* ---------- màu ---------- */
.mau-hang{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.chip{
  width:54px; height:54px; border-radius:2px;
  border:1px solid rgba(27,39,87,.14);
  position:relative;
}
.chip span{
  position:absolute; left:0; bottom:-19px;
  font-family:var(--do-so); font-size:.6rem; color:var(--betong);
}

/* ---------- báo giá ---------- */
.bao-gia{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(28px,4vw,58px);
  align-items:start;
}
@media (max-width:900px){ .bao-gia{ grid-template-columns:1fr; } }
.form-o{ display:grid; gap:14px; }
.hang-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .hang-2{ grid-template-columns:1fr; } }
label{
  display:block;
  font-size:.8rem; font-weight:500;
  margin-bottom:5px; color:#3B4664;
}
input,select,textarea{
  width:100%;
  font-family:var(--do-body); font-size:.95rem;
  padding:11px 13px;
  border:1.5px solid rgba(27,39,87,.22);
  border-radius:2px;
  background:var(--giay);
  color:var(--muc);
}
input:focus,select:focus,textarea:focus{ border-color:var(--muc-2); outline:none; box-shadow:0 0 0 3px rgba(33,66,134,.16); }
textarea{ min-height:92px; resize:vertical; }
.ghi-form{ font-size:.8rem; color:var(--betong); }

/* ---------- chân trang ---------- */
.chan{
  background:var(--muc); color:#A9B4D4;
  padding-block:52px 26px;
  font-size:.9rem;
}
.chan-luoi{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:32px;
}
@media (max-width:820px){ .chan-luoi{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .chan-luoi{ grid-template-columns:1fr; } }
.chan h4{
  font-family:var(--do-so); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin:0 0 14px; font-weight:500;
}
.chan ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.chan a{ color:#A9B4D4; text-decoration:none; }
.chan a:hover{ color:#fff; }
.chan .brandmark{ height:44px; filter:brightness(0) invert(1); opacity:.94; }
.chan-duoi{
  margin-top:38px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between;
  font-size:.8rem; color:#7F8BAE;
}

/* ---------- thanh dính dưới (mobile) ---------- */
.thanh-duoi{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none;
  background:var(--muc);
  border-top:1px solid rgba(255,255,255,.16);
}
.thanh-duoi a{
  flex:1; text-align:center; padding:13px 6px;
  color:#fff; text-decoration:none;
  font-size:.85rem; font-weight:500;
  border-right:1px solid rgba(255,255,255,.16);
}
.thanh-duoi a:last-child{ border-right:0; background:var(--la); }
@media (max-width:760px){
  .thanh-duoi{ display:flex; }
  body{ padding-bottom:52px; }
}


/* ---------- thư viện công trình ---------- */
.thu-vien{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.ct{
  margin:0;
  grid-column:span 4;
  background:var(--voi);
  border:var(--vien);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.ct--rong{ grid-column:span 8; }
.ct--het{ grid-column:span 12; }
.ct .anh{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--voi-dam);
}
.ct--cao .anh{ aspect-ratio:3/4; }
.ct--ngang .anh{ aspect-ratio:16/7; }
.ct .anh img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.ct:hover .anh img{ transform:scale(1.035); }
.ct figcaption{ padding:16px 18px 18px; }
.ct h3{
  font-family:var(--do-body);
  font-size:1.02rem; font-weight:600;
  margin:0 0 4px; line-height:1.3;
}
.ct .noi-o{ font-size:.87rem; color:var(--betong); margin:0 0 12px; }
.ct dl{
  margin:0; display:grid;
  grid-template-columns:auto 1fr; gap:4px 12px;
  font-size:.78rem;
  border-top:1px dashed rgba(27,39,87,.22);
  padding-top:11px;
}
.ct dt{ color:var(--betong); }
.ct dd{ margin:0; font-family:var(--do-so); font-size:.74rem; }
.ct dd.thieu{ color:var(--gi); }
@media (max-width:900px){
  .ct,.ct--rong{ grid-column:span 6; }
  .ct--het{ grid-column:span 12; }
}
@media (max-width:600px){
  .ct,.ct--rong,.ct--het{ grid-column:span 12; }
}

/* ---------- trước / sau ---------- */
.ts{
  position:relative;
  aspect-ratio:3/4;
  max-width:440px;
  overflow:hidden;
  border:var(--vien);
  border-radius:3px;
  background:var(--voi-dam);
  touch-action:none;
  cursor:ew-resize;
}
.ts img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
}
.ts .sau{ clip-path:inset(0 0 0 var(--cat,52%)); }
.ts-thanh{
  position:absolute; top:0; bottom:0;
  left:var(--cat,52%);
  width:2px; background:var(--voi);
  box-shadow:0 0 0 1px rgba(27,39,87,.35);
  pointer-events:none;
}
.ts-nut{
  position:absolute; top:50%; left:var(--cat,52%);
  transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--voi); border:2px solid var(--muc);
  display:grid; place-items:center;
  font-size:.9rem; color:var(--muc);
  pointer-events:none;
}
.ts-nhan{
  position:absolute; bottom:12px;
  font-family:var(--do-so); font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:2px;
  background:rgba(27,39,87,.82); color:#fff;
  pointer-events:none;
}
.ts-nhan.t{ left:12px; }
.ts-nhan.s{ right:12px; }
.ts-hang{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,48px); align-items:center;
}
@media (max-width:820px){ .ts-hang{ grid-template-columns:1fr; } .ts{ max-width:100%; } }

/* ---------- ảnh phối màu ---------- */
.phoi{
  display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(22px,3.5vw,44px); align-items:center;
}
@media (max-width:820px){ .phoi{ grid-template-columns:1fr; } }
.phoi img{
  width:100%; display:block;
  border:var(--vien); border-radius:3px;
}

/* ---------- ảnh thi công trong khối tối ---------- */
.anh-tc{
  border:1px solid rgba(255,255,255,.2);
  border-radius:3px; overflow:hidden;
  margin-bottom:14px;
}
.anh-tc img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.anh-tc figcaption{
  padding:10px 14px; font-size:.82rem; color:#B7C1DD;
  background:rgba(255,255,255,.05);
}

/* ---------- ghi chú prototype ---------- */
.ghi-proto{
  background:#FFF6D8;
  border-bottom:1px solid #E4CF84;
  color:#6B551A;
  font-family:var(--do-so); font-size:.72rem;
  padding:7px 0;
}