/* PHỐ BÀI VIỆT - mẫu 1243 - phong cách nhà phố Sài Gòn xưa */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#26322a;background:#fefae0;line-height:1.6;}
img{max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}
ul,ol{margin:0;padding:0;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font:inherit;border:0;background:none;cursor:pointer;}
details summary{list-style:none;}

:root{
  --sa-green:#2d6a4f;
  --sa-yellow:#d4a017;
  --sa-cream:#fefae0;
  --sa-terra:#9c6644;
  --sa-ink:#1c2620;
  --sa-muted:#5f6d5f;
  --sa-line:#e7dcae;
  --sa-font-d:'Chivo','Be Vietnam Pro',sans-serif;
  --sa-shadow:0 20px 40px -18px rgba(28,38,32,.35);
}

.sa-shell{width:min(1200px,92%);margin:0 auto;}
.sa-skip{position:absolute;left:-9999px;top:0;}
.sa-skip:focus{left:16px;top:16px;z-index:300;background:#fff;padding:10px 16px;border:2px solid var(--sa-green);border-radius:10px;}

/* encaustic tile band */
.sa-band{height:14px;background:repeating-linear-gradient(45deg,var(--sa-green) 0 14px,var(--sa-yellow) 14px 28px,var(--sa-terra) 28px 42px,var(--sa-cream) 42px 56px);}
.sa-band-foot{margin-bottom:44px;}

/* header */
.sa-header{position:sticky;top:0;z-index:70;background:rgba(254,250,224,.97);border-bottom:3px solid var(--sa-green);}
.sa-header-in{display:flex;align-items:center;gap:28px;padding:13px 0;}
.sa-brand{display:inline-flex;align-items:center;}
.sa-brand-img{height:52px;width:auto;display:block;}
.sa-nav{margin-left:auto;}
.sa-nav-list{display:flex;gap:2px;list-style:none;}
.sa-nav-a{display:block;padding:10px 13px;font-weight:700;font-size:15px;color:var(--sa-ink);border-bottom:3px solid transparent;transition:all .25s;}
.sa-nav-a:hover{color:var(--sa-green);border-color:var(--sa-yellow);}
.sa-nav-a.is-active{color:var(--sa-green);border-color:var(--sa-green);}
.sa-burger{display:none;}

/* louvered shutter mobile menu */
.sa-scrim{position:fixed;inset:0;background:rgba(28,38,32,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:125;}
.sa-scrim.is-on{opacity:1;pointer-events:auto;}
.sa-volet{position:fixed;left:0;right:0;top:0;z-index:130;background:var(--sa-cream);border-bottom:5px solid var(--sa-green);border-radius:0 0 34px 34px;box-shadow:0 30px 60px -20px rgba(28,38,32,.5);transform:translateY(-104%);transition:transform .45s cubic-bezier(.22,.9,.26,1);max-height:88vh;overflow:auto;}
.sa-volet.is-open{transform:none;}
.sa-volet-slats{display:grid;gap:6px;background:var(--sa-green);padding:14px 0;}
.sa-volet-slats i{display:block;height:8px;margin:0 8%;background:var(--sa-yellow);border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,.25);}
.sa-volet-in{padding:20px 22px 30px;}
.sa-volet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sa-volet-title{font-family:var(--sa-font-d);font-weight:900;font-size:19px;color:var(--sa-green);text-transform:uppercase;letter-spacing:.05em;}
.sa-volet-close{width:40px;height:40px;border-radius:50%;background:var(--sa-terra);color:#fff;font-size:21px;line-height:1;flex:none;}
.sa-volet-list{list-style:none;display:grid;gap:9px;}
.sa-volet-list a{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#fff;border:2px solid var(--sa-green);border-radius:12px;color:var(--sa-ink);font-weight:700;font-size:15px;transition:all .25s;}
.sa-volet-list a:hover{background:var(--sa-cream);transform:translateX(4px);}
.sa-volet-no{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--sa-yellow);color:var(--sa-ink);font-size:12px;font-weight:900;flex:none;}
.sa-volet-note{margin-top:16px;color:var(--sa-muted);font-size:13px;}
@media(min-width:1024px){.sa-volet,.sa-scrim{display:none;}}
@media(max-width:1023px){
  .sa-nav{display:none;}
  .sa-burger{display:flex;margin-left:auto;width:46px;height:46px;border-radius:10px;background:var(--sa-green);flex-direction:column;align-items:center;justify-content:center;gap:5px;}
  .sa-burger span{width:20px;height:2px;background:var(--sa-cream);border-radius:2px;}
}

/* buttons */
.sa-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;font-weight:800;font-size:15px;border:2px solid var(--sa-ink);transition:all .25s;}
.sa-btn b{font-weight:900;}
.sa-btn:hover{transform:translateY(-2px);}
.sa-btn-green{background:var(--sa-green);color:#fefae0;border-color:var(--sa-green);box-shadow:0 12px 24px -12px rgba(45,106,79,.7);}
.sa-btn-yellow{background:var(--sa-yellow);color:var(--sa-ink);border-color:var(--sa-yellow);box-shadow:0 12px 24px -12px rgba(212,160,23,.7);}
.sa-btn-line{background:transparent;color:var(--sa-green);border-color:var(--sa-green);}
.sa-btn-line:hover{background:var(--sa-green);color:var(--sa-cream);}
.sa-btn-ghost{background:transparent;color:var(--sa-terra);border-style:dashed;border-color:var(--sa-terra);}

/* hero */
.sa-hero{background:#f2e3b3 radial-gradient(circle at 50% -40px,transparent 90px,rgba(45,106,79,.16) 91px,transparent 92px);background-size:180px 120px;padding:64px 0 84px;border-bottom:4px solid var(--sa-green);}
.sa-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.sa-hero-kicker{display:inline-flex;align-items:center;gap:8px;background:var(--sa-cream);border:2px solid var(--sa-green);border-radius:999px;padding:8px 16px;font-weight:700;color:var(--sa-green);font-size:14px;}
.sa-hero-title{font-family:var(--sa-font-d);font-weight:900;font-size:clamp(30px,4vw,50px);line-height:1.16;color:var(--sa-ink);margin:20px 0 16px;}
.sa-hero-desc{color:#4a564a;font-size:17px;line-height:1.65;max-width:56ch;}
.sa-hero-acts{display:flex;gap:14px;margin:26px 0 30px;flex-wrap:wrap;}
.sa-hero-stats{display:flex;gap:34px;list-style:none;flex-wrap:wrap;}
.sa-hero-stats strong{display:block;font-family:var(--sa-font-d);font-weight:900;font-size:31px;color:var(--sa-green);line-height:1.1;}
.sa-hero-stats span{color:#4a564a;font-size:14px;}
.sa-window{position:relative;margin:0;background:var(--sa-green);border:3px solid var(--sa-ink);border-radius:140px 140px 18px 18px;padding:16px 16px 0;box-shadow:var(--sa-shadow);}
.sa-window-arch{display:block;border-radius:124px 124px 10px 10px;overflow:hidden;border:3px solid var(--sa-cream);}
.sa-window-arch img{width:100%;display:block;}
.sa-window-slats{display:grid;gap:5px;padding:12px 8%;}
.sa-window-slats i{display:block;height:7px;background:var(--sa-yellow);border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.3);}
.sa-window-sign{position:absolute;top:22px;right:-14px;z-index:2;background:var(--sa-terra);color:#fff;font-weight:900;font-size:12px;letter-spacing:.08em;padding:9px 14px;border-radius:8px;border:2px solid var(--sa-ink);transform:rotate(4deg);box-shadow:4px 4px 0 rgba(28,38,32,.4);}
.sa-window-cap{padding:12px 6px;text-align:center;color:var(--sa-cream);font-weight:700;font-size:14px;}

/* section heads */
.sa-section{padding:74px 0;}
.sa-section-green{background:var(--sa-green) repeating-linear-gradient(0deg,rgba(254,250,224,.06) 0 10px,transparent 10px 24px);}
.sa-section-cream{background:#f7efd0;}
.sa-head{margin-bottom:42px;}
.sa-head-center{text-align:center;}
.sa-head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.sa-kicker{display:inline-block;font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--sa-terra);}
.sa-kicker-yellow{color:var(--sa-yellow);}
.sa-h2{font-family:var(--sa-font-d);font-weight:900;font-size:clamp(26px,3vw,38px);color:var(--sa-ink);margin:10px 0 12px;line-height:1.22;}
.sa-h2-cream{color:var(--sa-cream);}
.sa-head-desc{color:var(--sa-muted);max-width:64ch;line-height:1.65;}
.sa-head-center .sa-head-desc{margin:0 auto;}
.sa-head-desc-cream{color:#d8e6d4;}

/* category tiles */
.sa-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;}
.sa-tile{position:relative;display:block;background:#fff;border:2px solid var(--sa-green);border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.sa-tile::before{content:"";position:absolute;top:0;left:0;width:34px;height:34px;background:repeating-linear-gradient(45deg,var(--sa-yellow) 0 6px,var(--sa-terra) 6px 12px);border-radius:0 0 14px 0;border-right:2px solid var(--sa-green);border-bottom:2px solid var(--sa-green);z-index:2;}
.sa-tile:hover{transform:translateY(-6px);box-shadow:var(--sa-shadow);}
.sa-tile-media{display:block;margin:0;}
.sa-tile-media img{width:100%;height:146px;object-fit:cover;display:block;border-bottom:2px solid var(--sa-green);}
.sa-tile-body{display:block;padding:16px 18px 20px;}
.sa-no{display:inline-block;background:var(--sa-yellow);color:var(--sa-ink);font-weight:900;font-size:12px;letter-spacing:.08em;padding:5px 11px;border-radius:8px;border:2px solid var(--sa-ink);}
.sa-tile-name{display:block;font-family:var(--sa-font-d);font-weight:900;font-size:19px;color:var(--sa-ink);margin:12px 0 8px;}
.sa-tile-desc{display:block;color:var(--sa-muted);font-size:14px;line-height:1.55;}
.sa-tile-go{display:inline-block;margin-top:12px;color:var(--sa-green);font-weight:800;font-size:14px;}

/* louver spotlight */
.sa-louvre{display:grid;grid-template-columns:5fr 7fr;gap:26px;align-items:stretch;}
.sa-lead{background:var(--sa-cream);border-radius:16px;overflow:hidden;border:3px solid var(--sa-ink);box-shadow:8px 8px 0 rgba(28,38,32,.4);transition:transform .3s;}
.sa-lead:hover{transform:translateY(-5px);}
.sa-lead a{display:flex;flex-direction:column;height:100%;color:inherit;}
.sa-lead-media{display:block;}
.sa-lead-media img{width:100%;height:240px;object-fit:cover;display:block;border-bottom:3px solid var(--sa-ink);}
.sa-lead-body{display:block;padding:18px 20px 20px;}
.sa-chip{display:inline-block;background:var(--sa-terra);color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;padding:5px 12px;border-radius:8px;text-transform:uppercase;}
.sa-lead-title{display:block;font-family:var(--sa-font-d);font-weight:900;color:var(--sa-ink);font-size:22px;line-height:1.3;margin:12px 0 8px;}
.sa-lead-desc{color:var(--sa-muted);font-size:14px;line-height:1.6;}
.sa-lead-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--sa-muted);font-size:13px;}
.sa-more{color:var(--sa-green);font-weight:800;}
.sa-slats{display:grid;gap:14px;}
.sa-slat{background:var(--sa-cream);border:3px solid var(--sa-ink);border-radius:12px;box-shadow:0 8px 0 -3px rgba(28,38,32,.4);transition:transform .25s;}
.sa-slat:hover{transform:translateX(8px);}
.sa-slat a{display:flex;align-items:center;gap:16px;padding:16px 18px;color:inherit;}
.sa-slat-body{flex:1;display:grid;gap:6px;}
.sa-slat-title{display:block;font-weight:800;color:var(--sa-ink);font-size:16px;line-height:1.4;}
.sa-slat-meta{display:flex;gap:14px;color:var(--sa-muted);font-size:13px;}
.sa-slat-meta i{font-style:normal;color:var(--sa-terra);font-weight:800;}

/* cards grid */
.sa-grid{display:grid;gap:22px;}
.sa-grid-4{grid-template-columns:repeat(4,1fr);}
.sa-card{background:#fff;border:2px solid var(--sa-green);border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.sa-card:hover{transform:translateY(-5px);box-shadow:var(--sa-shadow);}
.sa-card-link{display:block;color:inherit;}
.sa-card-media{position:relative;display:block;}
.sa-card-media img{width:100%;height:150px;object-fit:cover;display:block;border-bottom:2px solid var(--sa-green);}
.sa-card-date{position:absolute;right:12px;bottom:-15px;min-width:54px;padding:7px 8px;text-align:center;border-radius:8px;background:var(--sa-terra);color:#fff;font-style:normal;font-weight:900;font-size:13px;border:2px solid var(--sa-ink);box-shadow:3px 3px 0 rgba(28,38,32,.4);}
.sa-card-body{display:block;padding:26px 18px 18px;}
.sa-card-cat{color:var(--sa-green);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.sa-card-title{display:block;font-weight:800;color:var(--sa-ink);font-size:16px;line-height:1.42;margin:8px 0 12px;min-height:45px;}
.sa-card-foot{display:flex;justify-content:space-between;align-items:center;color:var(--sa-muted);font-size:13px;}

/* faq */
.sa-faq{max-width:860px;margin:0 auto;display:grid;gap:14px;}
.sa-faq-item{background:#fff;border:2px solid var(--sa-green);border-radius:16px;overflow:hidden;}
.sa-faq-item summary{display:flex;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;background:linear-gradient(180deg,#fff, #fdf7dd);}
.sa-faq-item summary::-webkit-details-marker{display:none;}
.sa-faq-q{flex:1;font-weight:800;color:var(--sa-ink);font-size:16px;}
.sa-faq-ico{flex:none;width:30px;height:30px;border-radius:50% 50% 6px 6px;background:var(--sa-green);transition:transform .35s ease,background .35s ease;}
.sa-faq-item[open] .sa-faq-ico{transform:rotate(180deg);background:var(--sa-yellow);}
.sa-faq-a{padding:0 20px 20px 24px;color:var(--sa-muted);line-height:1.7;font-size:15px;}

/* about */
.sa-about{background:var(--sa-ink) radial-gradient(circle at 50% -40px,transparent 90px,rgba(212,160,23,.14) 91px,transparent 92px);background-size:180px 120px;padding:84px 0;}
.sa-about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.sa-about-title{font-family:var(--sa-font-d);font-weight:900;color:var(--sa-cream);font-size:clamp(26px,3vw,38px);margin:10px 0 16px;line-height:1.22;}
.sa-about-desc{color:#c8d4c4;line-height:1.7;font-size:16px;}
.sa-about-stats{display:flex;gap:32px;list-style:none;margin:26px 0 30px;flex-wrap:wrap;}
.sa-about-stats strong{display:block;font-family:var(--sa-font-d);font-weight:900;font-size:29px;color:var(--sa-yellow);line-height:1.1;}
.sa-about-stats span{color:#c8d4c4;font-size:14px;}
.sa-about-media .sa-window-cap{color:var(--sa-cream);}

/* friend links */
.sa-flink{background:#f7efd0;padding:56px 0;border-top:3px solid var(--sa-green);}
.sa-flink-head{text-align:center;margin-bottom:26px;}
.sa-flink-title{font-family:var(--sa-font-d);font-weight:900;font-size:25px;color:var(--sa-ink);}
.sa-flink-note{color:var(--sa-muted);font-size:14px;margin-top:6px;}
.sa-flink-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;list-style:none;}
.sa-flink-chip{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--sa-green);border-radius:999px;padding:9px 18px 9px 9px;font-weight:700;color:var(--sa-ink);transition:all .25s;}
.sa-flink-chip:hover{transform:translateY(-3px);border-color:var(--sa-yellow);}
.sa-flink-logo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--sa-terra);}

/* footer */
.sa-footer{background:var(--sa-ink);color:#e4e8d8;padding:0 0 30px;}
.sa-foot-top{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-bottom:38px;}
.sa-fbrand{display:inline-flex;}
.sa-fbrand-img{height:56px;width:auto;display:block;}
.sa-foot-slogan{color:#aebbaa;max-width:52ch;line-height:1.65;font-size:15px;}
.sa-foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(254,250,224,.16);}
.sa-foot-h{font-family:var(--sa-font-d);font-weight:900;color:var(--sa-yellow);font-size:18px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em;}
.sa-foot-list{list-style:none;display:grid;gap:10px;}
.sa-foot-cats{grid-template-columns:repeat(2,1fr);}
.sa-foot-list a{color:#e4e8d8;font-size:14px;transition:color .25s;}
.sa-foot-list a:hover{color:var(--sa-yellow);}
.sa-foot-info{list-style:none;display:grid;gap:12px;}
.sa-foot-key{display:block;color:#93a28e;font-size:12px;text-transform:uppercase;letter-spacing:.1em;}
.sa-foot-val{color:#e4e8d8;font-size:14px;}
.sa-foot-base{padding-top:22px;display:grid;gap:10px;}
.sa-foot-copy{color:#93a28e;font-size:13px;line-height:1.6;}
.sa-foot-meta{display:flex;gap:10px;flex-wrap:wrap;color:#93a28e;font-size:13px;}
.sa-foot-sitemap{color:var(--sa-yellow);font-weight:800;}
.sa-top-btn{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:10px;background:var(--sa-green);color:#fefae0;font-size:20px;border:2px solid var(--sa-ink);box-shadow:4px 4px 0 rgba(28,38,32,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;z-index:80;}
.sa-top-btn.is-show{opacity:1;pointer-events:auto;}
.sa-top-btn:hover{transform:translate(-2px,-2px);}

/* inner pages */
.sa-ibanner{background:#f2e3b3 radial-gradient(circle at 50% -40px,transparent 90px,rgba(45,106,79,.16) 91px,transparent 92px);background-size:180px 120px;padding:52px 0;border-bottom:4px solid var(--sa-green);}
.sa-ibanner-kicker{color:var(--sa-terra);font-weight:900;letter-spacing:.12em;font-size:13px;text-transform:uppercase;}
.sa-ibanner-title{font-family:var(--sa-font-d);font-weight:900;font-size:clamp(26px,3.4vw,40px);color:var(--sa-ink);margin:8px 0 10px;}
.sa-ibanner-desc{color:#4a564a;max-width:64ch;line-height:1.65;}
.sa-crumb{background:#fff;border-bottom:2px solid var(--sa-line);}
.sa-crumb-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;font-size:14px;}
.sa-crumb a{color:var(--sa-green);font-weight:700;}
.sa-crumb a:hover{text-decoration:underline;}
.sa-crumb-sep{color:var(--sa-yellow);font-weight:900;}
.sa-crumb-now{color:var(--sa-muted);font-weight:600;}
.sa-page{padding:60px 0;}
.sa-page-head{max-width:780px;margin-bottom:36px;}
.sa-page-h1{font-family:var(--sa-font-d);font-weight:900;font-size:clamp(26px,3vw,36px);color:var(--sa-ink);margin-bottom:14px;}
.sa-page-desc{color:var(--sa-muted);line-height:1.7;}
.sa-page-acts{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;}
.sa-other{margin-top:56px;}
.sa-block-h{font-family:var(--sa-font-d);font-weight:900;font-size:22px;color:var(--sa-ink);margin-bottom:20px;padding-left:16px;border-left:8px solid var(--sa-yellow);}
.sa-other-list{list-style:none;display:grid;gap:12px;}
.sa-other-list a{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid var(--sa-green);border-radius:14px;padding:14px 18px;transition:all .25s;}
.sa-other-list a:hover{transform:translateX(6px);border-color:var(--sa-yellow);}
.sa-other-body{flex:1;display:grid;gap:2px;}
.sa-other-body strong{color:var(--sa-ink);}
.sa-other-body span{color:var(--sa-muted);font-size:13px;}
.sa-other-go{color:var(--sa-terra);font-size:20px;font-weight:900;}

/* list page */
.sa-list-wrap{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;}
.sa-rows{display:grid;gap:18px;margin-top:24px;}
.sa-lrow{background:#fff;border:2px solid var(--sa-green);border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.sa-lrow:hover{transform:translateY(-3px);box-shadow:var(--sa-shadow);}
.sa-lrow-link{display:grid;grid-template-columns:200px 1fr 84px;gap:18px;align-items:center;padding:16px;color:inherit;}
.sa-lrow-media img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:2px solid var(--sa-line);display:block;}
.sa-lrow-meta i{font-style:normal;color:var(--sa-terra);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.sa-lrow-title{display:block;font-weight:800;color:var(--sa-ink);font-size:17px;line-height:1.4;margin:6px 0;}
.sa-lrow-desc{display:block;color:var(--sa-muted);font-size:14px;line-height:1.6;margin-bottom:8px;}
.sa-lrow-date{width:66px;height:66px;border-radius:10px;background:var(--sa-yellow);border:2px solid var(--sa-ink);display:grid;place-content:center;text-align:center;transform:rotate(3deg);box-shadow:3px 3px 0 rgba(28,38,32,.35);}
.sa-lrow-date b{display:block;font-family:var(--sa-font-d);font-weight:900;font-size:23px;color:var(--sa-ink);line-height:1.1;}
.sa-lrow-date i{font-style:normal;font-size:11px;color:#5a4a10;}
.sa-pagi{display:flex;gap:10px;margin-top:30px;justify-content:center;}
.sa-pagi a{min-width:42px;height:42px;padding:0 14px;display:grid;place-items:center;border-radius:10px;background:#fff;border:2px solid var(--sa-green);color:var(--sa-green);font-weight:800;transition:all .25s;}
.sa-pagi a:hover{transform:translateY(-2px);}
.sa-pagi a.is-cur{background:var(--sa-green);color:var(--sa-cream);}
.sa-pagi a.is-dis{opacity:.4;pointer-events:none;}

/* sidebar */
.sa-side{display:grid;gap:24px;}
.sa-side-box{background:#fff;border:2px solid var(--sa-green);border-radius:14px;padding:22px;}
.sa-side-h{font-family:var(--sa-font-d);font-weight:900;font-size:19px;color:var(--sa-ink);margin-bottom:16px;padding-bottom:12px;border-bottom:3px solid var(--sa-yellow);}
.sa-side-hot{list-style:none;display:grid;gap:14px;}
.sa-side-hot a{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;}
.sa-side-hot img{width:72px;height:56px;object-fit:cover;border-radius:8px;border:2px solid var(--sa-line);display:block;}
.sa-side-hot-body strong{display:block;color:var(--sa-ink);font-size:14px;line-height:1.4;font-weight:700;}
.sa-side-hot-body time{color:var(--sa-muted);font-size:12px;}
.sa-side-more{display:inline-block;margin-top:16px;color:var(--sa-green);font-weight:800;font-size:14px;}
.sa-side-list{list-style:none;display:grid;gap:12px;}
.sa-side-list a{display:flex;gap:10px;align-items:flex-start;color:var(--sa-ink);font-size:14px;line-height:1.5;}
.sa-side-list a:hover{color:var(--sa-green);}
.sa-dot{flex:none;width:24px;height:24px;border-radius:8px;background:var(--sa-terra);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;}
.sa-side-note{background:var(--sa-green);color:#e4e8d8;border-color:var(--sa-ink);}
.sa-side-note .sa-side-h{color:var(--sa-yellow);border-color:rgba(254,250,224,.3);}
.sa-side-note p{line-height:1.65;font-size:14px;margin-bottom:16px;}

/* show page */
.sa-article-wrap{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;}
.sa-article{background:#fff;border:2px solid var(--sa-green);border-radius:16px;padding:34px;}
.sa-article-h1{font-family:var(--sa-font-d);font-weight:900;font-size:clamp(24px,2.6vw,34px);color:var(--sa-ink);line-height:1.26;margin-bottom:18px;}
.sa-article-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding-bottom:18px;border-bottom:2px dashed var(--sa-line);margin-bottom:22px;}
.sa-meta-item{color:var(--sa-muted);font-size:14px;}
.sa-meta-item b{color:var(--sa-ink);}
.sa-article-figure{margin:0 0 22px;border:2px solid var(--sa-line);border-radius:12px;overflow:hidden;}
.sa-article-figure img{width:100%;display:block;}
.sa-article-body{color:#37423a;line-height:1.85;font-size:16px;}
.sa-article-body h2{font-family:var(--sa-font-d);font-weight:900;color:var(--sa-green);font-size:23px;margin:28px 0 12px;}
.sa-article-body h3{color:var(--sa-ink);font-size:18px;margin:22px 0 10px;font-weight:800;}
.sa-article-body p{margin:0 0 14px;}
.sa-article-body ul{margin:0 0 16px;padding-left:22px;}
.sa-article-body li{margin-bottom:8px;}
.sa-article-body strong{color:var(--sa-ink);}
.sa-article-body a{color:var(--sa-green);font-weight:700;text-decoration:underline;}
.sa-article-tags{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:20px;border-top:2px dashed var(--sa-line);}
.sa-tag-label{color:var(--sa-muted);font-size:13px;}
.sa-tag{background:var(--sa-cream);border:2px solid var(--sa-green);color:var(--sa-green);font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;}
.sa-switcher{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 40px;}
.sa-switcher-cell{background:#fff;border:2px solid var(--sa-green);border-radius:12px;padding:18px 20px;}
.sa-switcher-next{text-align:right;}
.sa-switcher-label{display:block;color:var(--sa-terra);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.sa-switcher-link{color:var(--sa-ink);font-weight:700;line-height:1.5;}
.sa-switcher-link:hover{color:var(--sa-green);}
.sa-switcher-empty{color:var(--sa-muted);font-size:14px;}

/* 404 */
.sa-404{min-height:72vh;display:grid;place-items:center;background:#f2e3b3 radial-gradient(circle at 50% -40px,transparent 90px,rgba(45,106,79,.16) 91px,transparent 92px);background-size:180px 120px;padding:90px 0;}
.sa-404-arch{text-align:center;max-width:660px;margin:0 20px;background:var(--sa-cream);border:4px solid var(--sa-ink);border-radius:170px 170px 22px 22px;box-shadow:var(--sa-shadow);padding:80px 40px 48px;}
.sa-404-code{display:inline-block;font-family:var(--sa-font-d);font-weight:900;font-size:clamp(72px,13vw,120px);color:var(--sa-green);line-height:1;}
.sa-404-kicker{color:var(--sa-terra);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin:20px 0 10px;}
.sa-404-title{font-family:var(--sa-font-d);font-weight:900;font-size:clamp(24px,3vw,34px);color:var(--sa-ink);}
.sa-404-desc{color:var(--sa-muted);line-height:1.7;margin:14px 0 26px;}
.sa-404-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* reveal */
html.sa-js .sa-reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;}
html.sa-js .sa-reveal.is-in{opacity:1;transform:none;}

/* responsive */
@media(max-width:1023px){
  .sa-hero-in{grid-template-columns:1fr;gap:48px;}
  .sa-tiles{grid-template-columns:repeat(2,1fr);}
  .sa-louvre{grid-template-columns:1fr;}
  .sa-grid-4{grid-template-columns:repeat(2,1fr);}
  .sa-about-wrap{grid-template-columns:1fr;gap:48px;}
  .sa-list-wrap,.sa-article-wrap{grid-template-columns:1fr;}
  .sa-foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .sa-tiles{grid-template-columns:1fr;}
  .sa-grid-4{grid-template-columns:1fr;}
  .sa-foot-grid{grid-template-columns:1fr;}
  .sa-lrow-link{grid-template-columns:1fr;}
  .sa-lrow-media{display:none;}
  .sa-lrow-date{width:auto;height:auto;padding:6px 12px;justify-self:start;display:inline-grid;}
  .sa-switcher{grid-template-columns:1fr;}
  .sa-article{padding:24px 20px;}
  .sa-404-arch{padding:64px 24px 40px;}
}
