/* ===================================================================
   Nhà Sạch Phú Thọ — Xanh & Sạch
   Ngôn ngữ thiết kế: kem · xanh rêu · đồng — mảnh, tĩnh, nhiều khoảng thở
   =================================================================== */

:root{
  /* màu */
  --nen:#FBFAF7;
  --nen-2:#F4F1E9;
  --trang:#FFFFFF;
  --rung:#1E3A31;
  --rung-2:#2C5245;
  --rung-3:#426B59;
  --dong:#A0783F;
  --dong-sang:#C4A268;
  --muc:#16211C;
  --muc-2:#4A554F;
  --muc-3:#78827C;
  --vien:#E5DFD2;
  --vien-dam:#D2C9B6;

  /* chữ */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;

  /* nhịp */
  --r:2px;
  --r-to:3px;
  --chuyen:.35s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nen);color:var(--muc);
  font-family:var(--sans);font-size:16.5px;font-weight:350;line-height:1.78;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--rung-2);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--dong)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.18;letter-spacing:-.005em;margin:0 0 .55em;color:var(--muc)}
h1{font-size:clamp(2.1rem,1.25rem + 3.3vw,3.55rem)}
h2{font-size:clamp(1.55rem,1.15rem + 1.7vw,2.35rem)}
h3{font-size:1.28rem}
p{margin:0 0 1.15em}

.bao{width:min(1180px,100% - 3rem);margin-inline:auto}
.bao--hep{width:min(880px,100% - 3rem);margin-inline:auto}
.an{display:none}
.giua{text-align:center}

/* nhãn nhỏ chữ giãn — chi tiết đặc trưng của bộ nhận diện */
.chu-nho{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--dong);
}
.gach-nho{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.gach-nho::after{content:"";flex:0 0 46px;height:1px;background:var(--vien-dam)}
.khoi__dau--giua .gach-nho{justify-content:center}
.khoi__dau--giua .gach-nho::before{content:"";flex:0 0 46px;height:1px;background:var(--vien-dam)}

.bo-qua{position:absolute;left:-999px;top:0;background:var(--rung);color:#fff;padding:.8rem 1.1rem;z-index:99}
.bo-qua:focus{left:10px;top:10px}
:focus-visible{outline:1.5px solid var(--dong);outline-offset:3px}
::selection{background:var(--rung);color:#fff}

/* ---------------------------------------------------------- nút */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.85rem;border-radius:var(--r);border:1px solid var(--rung);
  background:var(--rung);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  transition:background var(--chuyen),color var(--chuyen),border-color var(--chuyen);
  white-space:nowrap;
}
.nut:hover{background:var(--muc);border-color:var(--muc);color:#fff}
.nut--vien{background:transparent;color:var(--rung);border-color:var(--vien-dam)}
.nut--vien:hover{background:transparent;border-color:var(--rung);color:var(--rung)}
.nut--dong{background:var(--dong);border-color:var(--dong);color:#fff}
.nut--dong:hover{background:#8C6733;border-color:#8C6733}
.nut--nho{padding:.62rem 1.25rem;font-size:.76rem}
.nut--rong{display:flex;width:100%;margin-bottom:.55rem}
.nut svg{width:15px;height:15px;stroke-width:1.5}

/* liên kết có mũi tên */
.lien-mui{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-size:.83rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--rung-2);
}
.lien-mui::after{content:"";width:22px;height:1px;background:currentColor;transition:width var(--chuyen)}
.lien-mui:hover::after{width:34px}

/* ------------------------------------------------------- đỉnh */
.dinh{
  position:sticky;top:0;z-index:50;background:rgba(251,250,247,.93);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--vien);
}
.dinh__trong{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:86px}
.hieu{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--muc)}
.hieu__dau{flex:0 0 auto;width:38px;height:38px}
.hieu__ten{font-family:var(--serif);font-size:1.16rem;line-height:1.15;letter-spacing:.01em}
.hieu__ten em{font-style:normal;color:var(--rung-2)}
.hieu__phu{display:block;font-family:var(--sans);font-size:.62rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muc-3);margin-top:.3rem}
.dieu-huong{display:flex;align-items:center;gap:.3rem}
.dieu-huong a{
  padding:.55rem .95rem;text-decoration:none;color:var(--muc-2);
  font-size:.9rem;font-weight:400;position:relative;transition:color var(--chuyen);
}
.dieu-huong a::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.32rem;height:1px;
  background:var(--dong);transform:scaleX(0);transform-origin:left;transition:transform var(--chuyen);
}
.dieu-huong a:hover{color:var(--muc)}
.dieu-huong a:hover::after{transform:scaleX(1)}
.dieu-huong a.nut{color:#fff;margin-left:.7rem}
.dieu-huong a.nut::after{display:none}
.dieu-huong a.nut.nut--vien{color:var(--rung)}
.nut-menu{display:none}

/* ------------------------------------------------------ banner */
.banner{position:relative;overflow:hidden;background:var(--nen);
  padding:clamp(3.6rem,8vw,7rem) 0 clamp(3rem,6vw,5rem)}
.banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 460px at 82% 8%, rgba(66,107,89,.10), transparent 68%),
    radial-gradient(520px 380px at 6% 92%, rgba(160,120,63,.07), transparent 70%);
}
.banner__trong{position:relative;max-width:900px}
.banner h1{margin-bottom:.6em}
.banner h1 em{font-style:italic;color:var(--rung-2)}
.banner__mo{font-size:1.09rem;color:var(--muc-2);max-width:60ch;font-weight:300}
.banner__nut{display:flex;flex-wrap:wrap;gap:.9rem;margin:2.2rem 0 0}

.cot-diem{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2.4rem;margin-top:clamp(3rem,6vw,4.5rem);padding-top:2.6rem;border-top:1px solid var(--vien);
}
.cot-diem div{display:flex;gap:1rem;align-items:flex-start}
.cot-diem span.so{font-family:var(--serif);font-size:.95rem;color:var(--dong);padding-top:.15rem}
.cot-diem p{margin:0;font-size:.95rem;color:var(--muc-2)}
.cot-diem strong{display:block;font-weight:500;color:var(--muc);margin-bottom:.15rem}

/* ------------------------------------------------------ khối */
.khoi{padding:clamp(3.4rem,7vw,6rem) 0}
.khoi__dau{max-width:640px;margin-bottom:3rem}
.khoi__dau--giua{margin-inline:auto;text-align:center}
.khoi__dau p{color:var(--muc-2);margin:0;font-weight:300}
.luoi{display:grid;gap:0}
.luoi--3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.luoi--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.luoi--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ------------------------------------------------- thẻ dịch vụ */
.the--dv{
  display:block;position:relative;padding:2.4rem 2.1rem 2.6rem;text-decoration:none;color:inherit;
  border-right:1px solid var(--vien);border-bottom:1px solid var(--vien);
  transition:background var(--chuyen);
}
.the--dv:hover{background:var(--trang)}
.the--dv .so-tt{
  position:absolute;top:1.7rem;right:1.9rem;font-family:var(--serif);font-size:.9rem;
  color:var(--vien-dam);letter-spacing:.05em;
}
.the--dv .bt{width:30px;height:30px;stroke:var(--rung-3);stroke-width:1.15;fill:none;margin-bottom:1.4rem}
.the--dv h3{font-size:1.24rem;margin-bottom:.5rem;transition:color var(--chuyen)}
.the--dv:hover h3{color:var(--rung-2)}
.the--dv p{color:var(--muc-2);font-size:.94rem;font-weight:300;margin:0}
.the--dv .lien-mui{margin-top:1.5rem}

/* ----------------------------------------------------- thẻ bài */
.the--bai{border-top:1px solid var(--vien);transition:background var(--chuyen)}
.the--bai:hover{background:var(--trang)}
.the--bai a{display:block;padding:2rem 1.9rem 2.2rem;text-decoration:none;color:inherit;height:100%}
.the--bai h3{font-size:1.2rem;margin:.9rem 0 .55rem;transition:color var(--chuyen)}
.the--bai:hover h3{color:var(--rung-2)}
.the--bai p{color:var(--muc-2);font-size:.92rem;font-weight:300;margin:0}
.the__meta{display:block;margin-top:1.3rem;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muc-3)}
.nhan{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--dong);font-weight:500}

/* ------------------------------------------------- dải tương phản */
.dai-toi{background:var(--rung);color:#EFEAE0;padding:clamp(3.6rem,7vw,6rem) 0}
.dai-toi h2,.dai-toi h3{color:#fff}
.dai-toi .chu-nho{color:var(--dong-sang)}
.dai-toi .gach-nho::before,.dai-toi .gach-nho::after{background:rgba(255,255,255,.26)}
.dai-toi p{color:rgba(239,234,224,.8);font-weight:300}
.tru{padding:2.2rem 2rem;border-left:1px solid rgba(255,255,255,.16)}
.tru:first-child{border-left:0;padding-left:0}
.tru .bt{width:28px;height:28px;stroke:var(--dong-sang);stroke-width:1.15;fill:none;margin-bottom:1.3rem}
.tru h3{font-size:1.18rem;margin-bottom:.5rem}
.tru p{font-size:.93rem;margin:0}

.dai-so{background:var(--nen-2);padding:clamp(2.8rem,5vw,4rem) 0}
.so-lieu div{text-align:center;padding:1.2rem .8rem;border-left:1px solid var(--vien-dam)}
.so-lieu div:first-child{border-left:0}
.so-lieu strong{display:block;font-family:var(--serif);font-size:2.5rem;font-weight:500;color:var(--rung-2);line-height:1}
.so-lieu span{display:block;margin-top:.7rem;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muc-3)}

/* ------------------------------------------------------ bài viết */
.bai{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4.5rem;
  padding:2.5rem 0 5rem;align-items:start}
.bai--rong{grid-template-columns:minmax(0,1fr)}
.bai--rong .bai__than{max-width:760px}
.bai__than{min-width:0;max-width:74ch}
.bai__than h1{margin-bottom:.45em}
.bai__meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muc-3);margin-bottom:1.6rem}
.bai__mo{font-family:var(--serif);font-size:1.25rem;line-height:1.62;color:var(--muc-2);
  font-weight:400;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--vien)}
.bai__than h2{margin-top:2.8rem;font-size:1.62rem}
.bai__than h3{margin-top:1.9rem;font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:0}
.bai__than ul,.bai__than ol{padding-left:1.15rem;margin-bottom:1.3rem}
.bai__than li{margin-bottom:.5rem}
.bai__than li::marker{color:var(--dong)}
.bai__than blockquote{
  margin:2rem 0;padding:.2rem 0 .2rem 1.8rem;border-left:2px solid var(--dong);
  font-family:var(--serif);font-size:1.16rem;line-height:1.62;color:var(--muc-2);font-style:italic;
}
.bai__than blockquote p:last-child{margin:0}
.bai__than hr{border:0;height:1px;background:var(--vien);margin:2.8rem 0}
.bai__than code{background:var(--nen-2);padding:.12em .45em;border-radius:var(--r);font-size:.9em}
.bai__than strong{font-weight:600}

.bang-boc{overflow-x:auto;margin:1.9rem 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:440px}
th,td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--vien)}
th{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muc-2);border-bottom:1px solid var(--vien-dam)}
td{font-weight:300;color:var(--muc-2)}
td:first-child{color:var(--muc);font-weight:400}
tbody tr:last-child td{border-bottom:1px solid var(--vien)}

.muc-luc{border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);
  padding:1.6rem 0;margin:2rem 0 2.6rem}
.muc-luc p{margin:0 0 .9rem}
.muc-luc ol{margin:0;padding:0;list-style:none;counter-reset:ml;
  columns:2;column-gap:2.4rem}
.muc-luc li{counter-increment:ml;margin-bottom:.45rem;font-size:.9rem;break-inside:avoid}
.muc-luc li::before{content:counter(ml,decimal-leading-zero);color:var(--dong);
  font-family:var(--serif);font-size:.78rem;margin-right:.6rem}
.muc-luc a{text-decoration:none;color:var(--muc-2)}
.muc-luc a:hover{color:var(--dong)}

/* hộp ghi chú */
.hop{margin:2rem 0;padding:1.6rem 1.9rem;background:var(--nen-2);border-left:2px solid var(--rung-3)}
.hop--luuy{border-left-color:var(--dong)}
.hop--tien{border-left-color:var(--dong)}
.hop__ten{display:block;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dong);font-weight:500;margin-bottom:.7rem}
.hop p{margin-bottom:.7rem;font-size:.96rem}
.hop p:last-child{margin:0}
.hop ul,.hop ol{margin:0;font-size:.96rem}

/* cột bên */
.bai__ben{position:sticky;top:110px;display:grid;gap:2.4rem}
.hop-lien-he{background:var(--rung);color:#EFEAE0;padding:2rem 1.8rem}
.hop-lien-he .chu-nho{color:var(--dong-sang)}
.hop-lien-he h2{font-size:1.28rem;color:#fff;margin:.7rem 0 .5rem}
.hop-lien-he p{font-size:.92rem;color:rgba(239,234,224,.78);font-weight:300;margin-bottom:1.4rem}
.hop-lien-he .nut{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.hop-lien-he .nut:hover{background:#fff;border-color:#fff;color:var(--rung)}
.hop-khac h2{font-size:.72rem;font-family:var(--sans);font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dong);margin-bottom:1.1rem}
.hop-khac ul{list-style:none;margin:0;padding:0}
.hop-khac li{border-top:1px solid var(--vien);padding:.85rem 0}
.hop-khac li:last-child{border-bottom:1px solid var(--vien)}
.hop-khac a{text-decoration:none;font-size:.93rem;color:var(--muc-2);font-weight:300;
  display:block;transition:color var(--chuyen)}
.hop-khac a:hover{color:var(--dong)}

/* vụn đường & lọc */
.vun ol{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:0 0 2rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muc-3)}
.vun li+li::before{content:"—";margin-right:.55rem;color:var(--vien-dam)}
.vun a{text-decoration:none;color:var(--muc-3)}
.vun a:hover{color:var(--dong)}

.loc{display:flex;flex-wrap:wrap;gap:2rem;margin:0 0 .5rem;padding-bottom:1.4rem}
.loc__nut{
  background:none;border:0;padding:0 0 .4rem;font:inherit;font-size:.8rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muc-3);cursor:pointer;
  border-bottom:1px solid transparent;transition:color var(--chuyen),border-color var(--chuyen);
}
.loc__nut:hover{color:var(--muc)}
.loc__nut.dang-chon{color:var(--rung-2);border-bottom-color:var(--dong)}

/* --------------------------------------------------- gọi cuối */
.goi-cuoi{background:var(--rung);color:#EFEAE0;padding:clamp(3.4rem,6vw,5rem) 0}
.goi-cuoi__trong{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;justify-content:space-between}
.goi-cuoi .chu-nho{color:var(--dong-sang)}
.goi-cuoi h2{color:#fff;margin:.9rem 0 .5rem;max-width:18ch}
.goi-cuoi p{max-width:48ch;color:rgba(239,234,224,.8);font-weight:300;margin:0}
.goi-cuoi__nut{display:flex;flex-wrap:wrap;gap:.9rem}
.goi-cuoi .nut{background:#fff;border-color:#fff;color:var(--rung)}
.goi-cuoi .nut:hover{background:var(--dong-sang);border-color:var(--dong-sang);color:var(--rung)}
.goi-cuoi .nut--vien{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.goi-cuoi .nut--vien:hover{background:transparent;border-color:#fff;color:#fff}

/* ------------------------------------------------------- chân */
.chan{background:var(--muc);color:rgba(239,234,224,.72);padding:clamp(3rem,5vw,4.4rem) 0 1.6rem;
  font-size:.9rem;font-weight:300}
.chan__luoi{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:3.5rem}
.chan h3{font-size:.7rem;font-family:var(--sans);font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dong-sang);margin-bottom:1.2rem}
.chan__hieu{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.chan__hieu span{font-family:var(--serif);font-size:1.15rem;color:#fff}
.chan__nho{font-size:.8rem;color:rgba(239,234,224,.5);margin-top:1.1rem}
.chan__ds{list-style:none;margin:0;padding:0}
.chan__ds li{margin-bottom:.6rem}
.chan__ds a{color:rgba(239,234,224,.72);text-decoration:none;transition:color var(--chuyen)}
.chan__ds a:hover{color:var(--dong-sang)}
.chan__day{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;
  border-top:1px solid rgba(255,255,255,.11);margin-top:3rem;padding-top:1.5rem;
  font-size:.76rem;letter-spacing:.08em;color:rgba(239,234,224,.45)}
.chan__day p{margin:0}
.chan__day a{color:rgba(239,234,224,.45);text-decoration:none}
.chan__day a:hover{color:var(--dong-sang)}

/* ------------------------------------------- thanh gọi (mobile) */
.goi-noi{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:center;gap:.6rem;
  background:var(--rung);color:#fff;text-decoration:none;padding:1rem;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
}
.goi-noi svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ------------------------------------------------- responsive */
@media (max-width:1080px){
  .bai{grid-template-columns:minmax(0,1fr) 270px;gap:3rem}
}
@media (max-width:920px){
  .bai{grid-template-columns:1fr;gap:2.5rem}
  .bai__ben{position:static;grid-template-columns:1fr 1fr;display:grid;gap:2rem}
  .chan__luoi{grid-template-columns:1fr 1fr;gap:2.5rem}
  .tru{border-left:0;padding:1.6rem 0;border-top:1px solid rgba(255,255,255,.16)}
  .tru:first-child{border-top:0;padding-top:0}
  .so-lieu div{border-left:0}
}
@media (max-width:760px){
  body{font-size:16px;padding-bottom:3.4rem}
  .bao,.bao--hep{width:min(100% - 2.2rem,1180px)}
  .muc-luc ol{columns:1}
  .bai__ben{grid-template-columns:1fr}
  .chan__luoi{grid-template-columns:1fr}
  .goi-noi{display:flex}
  .the--dv,.the--bai a{padding-inline:0}
  .the--dv{border-right:0}
  .the--dv .so-tt{right:0}
  .goi-cuoi__trong{flex-direction:column;align-items:flex-start}
  .nut-menu{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0 8px;border:1px solid var(--vien-dam);cursor:pointer;background:none;
  }
  .nut-menu span{display:block;height:1px;background:var(--muc);transition:var(--chuyen)}
  .nut-menu span:nth-child(2){width:70%}
  .dieu-huong{
    display:none;position:absolute;left:0;right:0;top:100%;background:var(--nen);
    border-bottom:1px solid var(--vien);flex-direction:column;align-items:stretch;
    padding:1rem 1.1rem 1.6rem;gap:0;
  }
  #mo-menu:checked ~ .dieu-huong{display:flex}
  .dieu-huong a{padding:.95rem .3rem;border-bottom:1px solid var(--vien);font-size:1rem}
  .dieu-huong a::after{display:none}
  .dieu-huong a.nut{margin:1.1rem 0 0;justify-content:center;border-bottom:1px solid var(--rung)}
  .cot-diem{gap:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
@media print{.dinh,.goi-cuoi,.goi-noi,.bai__ben,.loc,.chan{display:none}}

/* ô mời liên hệ khép lưới dịch vụ */
.the--dv-cta{background:var(--nen-2)}
.the--dv-cta:hover{background:var(--rung);color:#EFEAE0}
.the--dv-cta:hover h3{color:#fff}
.the--dv-cta:hover p{color:rgba(239,234,224,.78)}
.the--dv-cta:hover .so-tt{color:rgba(255,255,255,.3)}
.the--dv-cta h3{margin-top:3.2rem}