/* ---------------------------------------------------------------
   An Nông Land
   Layout copied from taynamland.net and htland.vn, the two brokers
   selling the same land plots in the same district, plus guland.vn
   for card geometry. Measured 21 Aug 2026.

   The pattern those sites actually use, and this follows:
     - one solid colour nav bar, full width
     - section headings are solid colour BARS, not text with a rule
     - borderless photo cards, caption CENTRED underneath
     - plain white page, generous gaps between rows
   No dark hero band, no stat row, no boxed-and-shadowed card grid.
   --------------------------------------------------------------- */

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

:root{
  --wrap:1220px;              /* taynamland container */
  --pad:15px;                 /* its padding */
  --bar:90px;                 /* its header height */
  --bar-stuck:70px;           /* shrinks to this on scroll */
  --gutter:30px;              /* its card gutter */
  --row-gap:52px;             /* the big gap between its card rows */
  --radius:6px;
  --rule:#ececec;             /* its spec-table row rule */
  --ring:#e4e4e4;

  --font:Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  --body:16px; --body-lh:25.6px;
  --h1:22px;   --h1-lh:28.6px;
  --h2:25.6px; --h2-lh:33.28px;
  --h3:19px;   --h3-lh:28.5px;
  --small:14px;
  --spec:14.4px;              /* its spec cell */
  --tick:url('/assets/ic-tick.png');
}

html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--body);line-height:var(--body-lh);
  color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- nav: one solid brand band ---------- */
.site-hdr{background:var(--bar-bg)}
.site-hdr .bar{height:var(--bar);display:flex;align-items:center;gap:30px}
.site-hdr.stuck{position:fixed;top:0;left:0;right:0;z-index:900;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.site-hdr.stuck .bar{height:var(--bar-stuck)}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{height:52px;width:auto}
.site-hdr.stuck .brand img{height:40px}
.brand b{font-size:26px;font-weight:700;color:var(--bar-ink);letter-spacing:.6px;
  line-height:1.05;white-space:nowrap;text-transform:uppercase}
.brand span{display:block;font-size:10px;font-weight:500;letter-spacing:1.6px;
  color:var(--bar-sub);text-transform:uppercase;margin-top:3px}
.site-hdr.stuck .brand b{font-size:21px}

.nav{display:flex;gap:26px;margin-left:auto;align-items:center;padding:0;margin-bottom:0}
.nav > li{list-style:none;position:relative}
.nav a{font-size:14.5px;font-weight:700;color:var(--bar-ink);text-transform:uppercase;
  letter-spacing:.3px;white-space:nowrap}
.nav a:hover,.nav .on > a{color:var(--bar-hi);text-decoration:none}
.nav ul{position:absolute;top:100%;left:-14px;min-width:238px;background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.18);padding:5px 0;margin:0;
  opacity:0;visibility:hidden;transition:opacity .12s}
.nav li:hover > ul,.nav li:focus-within > ul{opacity:1;visibility:visible}
.nav ul li{list-style:none}
.nav ul a{display:block;padding:10px 18px;text-transform:none;font-weight:400;
  font-size:14.5px;color:var(--ink)}
.nav ul a:hover{background:#f6f6f6;color:var(--head)}

.hotline{font-size:15px;font-weight:700;color:var(--bar-ink);white-space:nowrap}
.hotline span{display:block;font-size:10px;font-weight:400;letter-spacing:1px;
  color:var(--bar-sub);text-transform:uppercase}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger i{display:block;width:24px;height:2.5px;background:var(--bar-ink);margin:5px 0}

.crumb .wrap{padding:12px var(--pad);font-size:var(--small);color:#5c5c5c}
.crumb a{color:var(--accent);font-weight:500}

h1,h2,h3,h4{font-family:var(--font);margin:0;color:var(--head)}
h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:700}
h2{font-size:var(--h2);line-height:var(--h2-lh);font-weight:700}
h3{font-size:var(--h3);line-height:var(--h3-lh);font-weight:700;color:var(--head-2)}
h4{font-size:16px;line-height:24px;font-weight:700}

/* ---------- solid section bar ---------- */
.barhead{background:var(--sec-bg);margin:0 0 26px}
.barhead .in{max-width:var(--wrap);margin:0 auto;padding:11px var(--pad);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.barhead h2{color:#fff;font-size:19px;line-height:26px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px}
.barhead .count,.barhead .count a{color:rgba(255,255,255,.9);font-size:13.5px;
  white-space:nowrap;font-weight:500}
.barhead .count a:hover{color:#fff}

.page-head{padding:6px 0 22px;text-align:center}
.page-head h1{font-size:27px;line-height:35px;color:var(--head-2);
  text-transform:uppercase;margin-bottom:11px}
.page-head .where{font-size:var(--small);color:#555;justify-content:center;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-head .price-line{justify-content:center;margin-top:9px}
.page-head .chips{justify-content:center}
.page-head .badge{margin-bottom:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.chip{font-size:12.5px;font-weight:500;color:#555;background:#f6f4f0;
  border:1px solid var(--ring);padding:5px 12px;border-radius:20px}
.badge{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--open);
  padding:5px 11px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}

.sec{padding:0 0 24px}
.sec > h2{display:flex;align-items:center;gap:11px;margin-bottom:14px;color:var(--head-2);
  text-transform:uppercase;font-size:21px;line-height:29px}
.sec > h2 .ic{flex:0 0 auto;width:30px;height:30px;object-fit:contain}
.sec p{margin:0 0 14px}
.sec ul,.sec ol{margin:0 0 16px;padding-left:22px}
.sec li{margin-bottom:7px}
.sec img{margin:8px auto 18px;border-radius:var(--radius)}
.sec strong{font-weight:700;color:var(--head)}

.spine{display:flex;overflow-x:auto;background:#f7f5f1;border-radius:var(--radius);
  margin:0 0 26px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.spine::-webkit-scrollbar{display:none}
.spine a{flex:0 0 auto;padding:12px 18px;font-size:13.5px;font-weight:700;
  color:var(--head-2);text-transform:uppercase;white-space:nowrap}
.spine a:hover{background:var(--sec-bg);color:#fff;text-decoration:none}

table{border-collapse:collapse;width:100%;background:transparent;margin:0 0 20px}
table td{font-size:var(--spec);font-weight:400;color:#666;
  border-bottom:1px solid var(--rule);vertical-align:top}
table td:first-child{width:35%;padding:7.2px 7.2px 7.2px 0}
table td:last-child{padding:7.2px 0 7.2px 7.2px;color:#333}
table th{font-size:var(--spec);text-align:left;padding:7.2px 7.2px 7.2px 0;
  border-bottom:1px solid var(--rule);color:var(--head)}
main table,main table tbody,main table tr{border:0 !important}
main table td{border-left:0 !important;border-right:0 !important;border-top:0 !important}

.price{color:var(--price);font-weight:700}
.price-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:var(--small)}
.price-line .price{font-size:18px}

/* ---------- borderless photo card, caption centred ---------- */
.grid,.grid.rest{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--row-gap) var(--gutter);margin:0 0 34px}
.card{display:flex;flex-direction:column;gap:11px;text-align:center}
.card .thumb{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);
  background:#f4f2ee}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .badge{position:absolute;top:10px;left:10px}
.card .name{font-size:16px;line-height:23px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.2px}
.card .name:hover{color:var(--head-2);text-decoration:none}
.card .where{font-size:13.5px;line-height:20px;color:#666}
.card .price-line{justify-content:center;margin-top:-2px}
.card .price-line .price{font-size:15.5px}
.card .blurb{font-size:14px;line-height:22px;color:#666;margin:0;text-align:left}
.card .more{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;
  letter-spacing:.4px}
.card.no-photo{padding-top:4px}
.card.no-photo .badge{align-self:center}
.card .chips{justify-content:center}

/* ---------- one featured project ---------- */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:0 36px;align-items:center;
  margin:0 0 42px}
.feature .shot{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);
  background:#f4f2ee}
.feature .shot img{width:100%;height:100%;object-fit:cover}
.feature .shot .badge{position:absolute;top:12px;left:12px;z-index:2}
.feature .txt{display:flex;flex-direction:column;gap:11px;text-align:center}
.feature .txt .name{font-size:25px;line-height:33px;font-weight:700;color:var(--accent);
  text-transform:uppercase}
.feature .txt .where{font-size:var(--small);color:#666}
.feature .txt .price-line{justify-content:center}
.feature .txt .blurb{font-size:15px;line-height:24px;color:#666;margin:0;text-align:left}
.feature .txt .btn{align-self:center;margin-top:4px}
.feature.no-photo{grid-template-columns:1fr}

.btn{display:inline-block;font-size:14px;font-weight:700;padding:11px 26px;border-radius:24px;
  border:0;cursor:pointer;text-align:center;text-transform:uppercase;letter-spacing:.4px}
.btn-primary{background:var(--open);color:#fff}
.btn-primary:hover{filter:brightness(.93);text-decoration:none}
.btn-ghost{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}
.btn-ghost:hover{background:var(--accent);color:#fff;text-decoration:none}
.mid{text-align:center;margin:0 0 42px}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin:0 0 32px}
.value{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.value img{width:82px;height:82px;object-fit:contain}
.value h3{color:var(--accent);text-transform:uppercase;font-size:17px;margin:0}

/* ---------- footer: htland's contents, no dark slab ---------- */
.site-ftr{background:#faf8f4;border-top:3px solid var(--bar-bg);margin-top:44px;
  color:#555;font-size:14px;line-height:23px}
.site-ftr .wrap{padding:30px var(--pad) 22px}
.site-ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.site-ftr h4{color:var(--head-2);font-size:15px;margin-bottom:12px;text-transform:uppercase;
  letter-spacing:.4px}
.site-ftr p,.site-ftr li{margin:0 0 7px;list-style:none}
.site-ftr ul{padding:0;margin:0}
.site-ftr a{color:#555}
.site-ftr a:hover{color:var(--accent)}
.site-ftr .hot{font-size:21px;font-weight:700;color:var(--price);line-height:28px}
.site-ftr .legal{border-top:1px solid var(--ring);margin-top:22px;padding-top:15px;
  font-size:13px;color:#5c5c5c;text-align:center}

.pin{position:fixed;right:18px;bottom:18px;z-index:800;background:var(--open);color:#fff;
  font-size:14px;font-weight:700;padding:13px 20px;border-radius:26px;
  box-shadow:0 5px 16px rgba(0,0,0,.24)}
.pin:hover{text-decoration:none;filter:brightness(.94)}
.mbar{display:none}

/* ---------- per-section shapes ---------- */
.sec.k-location ul{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.sec.k-location li{padding:8px 0;border-bottom:1px dotted var(--ring);display:flex;
  justify-content:space-between;gap:14px;margin:0}
.sec.k-amenities ul{columns:2;column-gap:36px}
.sec.k-amenities li{break-inside:avoid}
.sec.k-legal{background:#faf8f4;border-left:4px solid var(--accent);padding:18px 22px 4px;
  margin:0 0 26px;border-radius:0 var(--radius) var(--radius) 0}
.sec.k-price{background:#fdf7f6;border-left:4px solid var(--price);padding:18px 22px 4px;
  margin:0 0 26px;border-radius:0 var(--radius) var(--radius) 0}
.sec.k-price strong{color:var(--price)}
.sec.k-promo ul{list-style:none;padding:0}
.sec.k-promo li{position:relative;padding-left:29px;margin-bottom:9px}
.sec.k-promo li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;
  background:var(--tick) center/contain no-repeat}
.sec.k-photos .shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}
.sec.k-photos .shots img{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0}
.sec.k-siteplan img{width:100%;margin:4px 0 20px}

/* =====================  mobile  ===================== */
@media (max-width:900px){
  :root{--gutter:16px;--row-gap:28px}
  .nav{display:none}
  .burger{display:block}
  .site-hdr{position:sticky;top:0;z-index:900}
  .site-hdr .bar{height:62px;gap:12px}
  .brand img{height:40px}
  .brand b{font-size:19px}
  .brand span{font-size:8.5px;letter-spacing:1.1px}
  .hotline{display:none}
  .grid,.grid.rest{grid-template-columns:1fr}
  .card .thumb,.feature .shot{aspect-ratio:2/1}
  .feature{grid-template-columns:1fr;gap:14px}
  .feature .txt .name{font-size:20px;line-height:27px}
  .page-head h1{font-size:21px;line-height:28px}
  .sec > h2{font-size:17px;line-height:24px;gap:9px}
  .sec > h2 .ic{width:23px;height:23px}
  .values{grid-template-columns:repeat(3,1fr);gap:10px}
  .value img{width:48px;height:48px}
  .value h3{font-size:12.5px;line-height:17px}
  .site-ftr .cols{grid-template-columns:1fr;gap:24px}
  .pin{display:none}
  .sec.k-location ul{grid-template-columns:1fr}
  .sec.k-amenities ul{columns:1}
  .sec.k-photos .shots{grid-template-columns:1fr;gap:10px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:900;
    background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.16)}
  .mbar a{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;
    font-weight:700;color:var(--head-2);border-right:1px solid var(--ring)}
  .mbar a:last-child{border-right:0}
  .mbar a.main{background:var(--open);color:#fff;flex:1.4}
  body{padding-bottom:56px}
  .nav.open{display:block;position:fixed;top:62px;left:0;right:0;bottom:0;background:#fff;
    overflow-y:auto;padding:6px 0;z-index:899}
  .nav.open > li{border-bottom:1px solid var(--rule)}
  .nav.open > li > a{display:block;padding:14px 20px;color:var(--head-2)}
  .nav.open ul{position:static;opacity:1;visibility:visible;box-shadow:none;
    background:#f7f5f1;padding:0}
  .nav.open ul a{padding:11px 32px}
}

/* ---------- project list: for the projects with no archived photo ---------- */
.plist{list-style:none;padding:0;margin:0 0 34px;
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.plist li{display:flex;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--rule)}
.plist li > a{flex:1;font-size:15px;line-height:22px;font-weight:700;color:var(--head-2);
  text-transform:uppercase}
.plist li > a:hover{color:var(--accent);text-decoration:none}
.plist .loc{flex:1.1;font-size:13px;line-height:20px;color:#5c5c5c}
.plist .price{font-size:14.5px;white-space:nowrap}
@media (max-width:900px){
  .plist{grid-template-columns:1fr;gap:0}
  .plist li{flex-wrap:wrap;gap:3px 10px;padding:11px 0}
  .plist li > a,.plist .loc{flex:1 1 100%}
}

/* the section image rule uses margin:auto to centre photos; that auto also
   lands on the heading icon and pushes it away from its own text */
.sec > h2 .ic{margin:0 !important}

/* archive listing: full width, one column of rows */
.plist.wide{grid-template-columns:1fr;gap:0}
.plist.wide li{padding:14px 0}
.plist .gone{flex:1;font-size:15px;line-height:22px;font-weight:700;color:#999;
  text-transform:uppercase}

/* =================================================================
   Below the fold. Two problems this fixes:
     1. prose was running the full 1220px container, which is roughly
        150 characters a line. cafeland.vn runs an 860px main column
        beside a sidebar, htland.vn a 1000px container. So the reading
        column is constrained and the space beside it does real work.
     2. the archived contact forms carried no styling once the theme's
        classes were stripped, so they rendered as raw browser widgets.
   ================================================================= */

.layout{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:0 44px;
  align-items:start}
.layout > .col-main{min-width:0}
.layout > .col-side{position:sticky;top:88px}

/* keep long prose to a readable measure even inside the main column */
.col-main .sec > p,
.col-main .sec > ul,
.col-main .sec > ol,
.col-main .sec > h3,
.col-main .sec > h4{max-width:70ch}
.col-main .sec.k-amenities > ul,
.col-main .sec.k-location > ul{max-width:none}

/* section images: fill the column instead of sitting at their native size */
.col-main .sec > img,
.col-main .sec > p > img,
.col-main .sec > a > img{width:100%;height:auto;margin:8px 0 18px}

/* ---------- sidebar cards ---------- */
.side{background:#faf8f4;border:1px solid var(--ring);border-radius:var(--radius);
  padding:18px 18px 16px;margin:0 0 18px}
.side h4{font-size:14px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--head-2);margin:0 0 12px;padding-bottom:9px;
  border-bottom:2px solid var(--bar-bg)}
.side .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--rule);font-size:13.5px;line-height:20px}
.side .row:last-of-type{border-bottom:0}
.side .row dt{color:#5c5c5c;flex:0 0 40%;margin:0}
.side .row dd{margin:0;color:#333;text-align:right;flex:1;font-weight:500}
.side dl{margin:0}
.side .hot{display:block;font-size:24px;line-height:32px;font-weight:700;
  color:var(--price);margin:2px 0 4px}
.side .hot-label{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:#888}
.side .btn{display:block;width:100%;margin-top:12px}
.side ul{list-style:none;padding:0;margin:0}
.side ul li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:20px}
.side ul li:last-child{border-bottom:0}
.side ul a{font-weight:500;color:var(--head-2)}
.side ul a:hover{color:var(--accent);text-decoration:none}
.side .loc{display:block;font-size:12.5px;color:#5c5c5c;margin-top:2px}
.side .price{display:block;font-size:13.5px;margin-top:2px}

/* ---------- contact section: restore the band treatment ---------- */
.sec.k-contact{background:#faf8f4;border-top:3px solid var(--bar-bg);
  padding:24px 24px 10px;margin:14px 0 0;border-radius:var(--radius)}
.sec.k-contact > h2{color:var(--head-2)}

/* ---------- the archived forms ---------- */
form{max-width:560px}
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input:not([type]),select,textarea{
  width:100%;max-width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid #d9d4cc;border-radius:var(--radius);
  padding:11px 13px;margin:0 0 11px;display:block;box-sizing:border-box;
  -webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--head-2) 50%),
  linear-gradient(135deg,var(--head-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 18px,calc(100% - 14px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea{min-height:118px;resize:vertical;line-height:23px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--bar-bg);
  box-shadow:0 0 0 3px rgba(208,154,27,.18)}
input::placeholder,textarea::placeholder{color:#a49c90;opacity:1}
input[type=submit],button[type=submit],.wpcf7-submit{
  width:auto;display:inline-block;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--open);
  border:0;border-radius:24px;padding:12px 30px;margin:3px 0 0;cursor:pointer}
input[type=submit]:hover,button[type=submit]:hover,.wpcf7-submit:hover{filter:brightness(.93)}
input[type=hidden]{display:none !important;margin:0}
label{display:block;font-size:13.5px;font-weight:500;color:#555;margin:0 0 5px}
/* the archived forms wrap every field in a <p>; drop its stray spacing */
form p{margin:0 0 2px}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:0}
  .layout > .col-side{position:static;margin-top:26px}
  .col-main .sec > p,.col-main .sec > ul,.col-main .sec > ol{max-width:none}
  .sec.k-contact{padding:18px 15px 6px}
  form{max-width:none}
}

/* footer and sidebar card labels are h3 so the heading outline does not skip
   a level; they keep the smaller label styling they had as h4 */
.site-ftr h3.ft-h,.side h3{font-size:15px;line-height:22px;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--head-2)}
.side h3{font-size:14px;padding-bottom:9px;border-bottom:2px solid var(--bar-bg);margin:0 0 12px}

/* A link inside a paragraph must be distinguishable by more than colour, so
   content links are underlined. Navigation, buttons, chips and card titles
   are not in a text block and keep their clean look. */
.sec p a,.sec li a,.sec td a,.card .blurb a,.feature .blurb a{
  text-decoration:underline;text-underline-offset:2px}
.sec p a:hover,.sec li a:hover,.sec td a:hover{text-decoration-thickness:2px}