/* Six language choices remain visible at every screen size. */
.lang-switcher { flex-shrink: 0; }
.lang-switcher a { white-space: nowrap; }
.sold-category .sold-mark {
  display: inline-block;
  color: #78848d;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  padding: 3px 6px;
  border: 3px double currentColor;
  transform: none;
}
.sold-category.active .sold-mark { color: #fff; }
@media (max-width: 640px) {
  .sold-category .sold-mark { font-size: 15px; }
}
html[lang="vi"] body, html[lang="th"] body {
  font-family: Arial, "Noto Sans Thai", "Noto Sans", sans-serif;
}
html[lang="vi"] .hero h1, html[lang="th"] .hero h1 {
  line-height: 1.3; letter-spacing: 0; overflow-wrap: break-word;
}
html[lang="th"] .eyebrow, html[lang="th"] .hero-kicker {
  letter-spacing: 0; line-height: 1.8;
}
html[lang="vi"] .hero h1 { font-size: clamp(30px, 4.8vw, 66px); }
html[lang="th"] .hero h1 { font-size: clamp(30px, 4.6vw, 62px); }
html[lang="vi"] .section-title, html[lang="th"] .section-title,
html[lang="vi"] .about h2, html[lang="th"] .about h2 {
  line-height: 1.35; overflow-wrap: break-word;
}
@media (min-width: 768px) {
  html[lang="vi"] #main > .hero,
  html[lang="th"] #main > .hero {
    height: auto;
    min-height: 660px;
    max-height: none;
  }
  html[lang="vi"] #main > .hero > .wrap,
  html[lang="th"] #main > .hero > .wrap {
    flex-shrink: 0;
    padding-bottom: 80px;
  }
}
@media (max-width: 1320px) {
  .header .nav { gap: 16px; }
  .header .nav-phone { display: none; }
  .header .nav-links, .header .links { gap: 16px; }
}
@media (min-width: 768px) {
  .header .nav-links, .header .links { display: flex; }
  .header .menu, .header .menu-btn { display: none; }
  .mobile-menu, .header .mobile-menu.open { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .header { height: 108px; }
  .header .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 32px;
    min-height: 0;
    height: 108px;
    gap: 8px 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .header .nav > a:first-child { grid-column: 1; grid-row: 1; }
  .header .lang-switcher { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; }
  .header .nav-links, .header .links {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
  }
  .header .nav-links a, .header .links a { padding: 4px 0; }
  .header .nav-links a::after { bottom: 0; }
  #main > .hero > .wrap { padding-top: 144px; }
}
@media (max-width: 767px) {
  .header .nav-links, .header .links { display: none; }
  .header .menu, .header .menu-btn { display: block; }
  .header { height: auto; }
  .header .nav { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
  .header .logo { width: 140px; }
  .header .lang-switcher { order: 3; margin-left: 0; }
  .header .menu, .header .menu-btn { margin-left: auto; }
  .header .mobile-menu { top: 100%; }
  .header .mobile-menu.open {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 18px 24px;
    gap: 16px;
    background: #0d100e;
    color: #fff;
  }
  .header .nav > .mobile-menu { width: 100%; }
  .header:has(.nav-links) { height: 108px; }
  .header:has(.nav-links) .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 32px;
    height: auto;
    gap: 8px 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .header:has(.nav-links) .lang-switcher {
    grid-column: 1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    margin: 0;
  }
  .header:has(.nav-links) .menu {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin: 0;
  }
  .header:has(.nav-links) .nav > a:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #main > .hero > .wrap { padding-top: 136px; }
  body:has(.header .nav-links) > .mobile-menu { top: 108px; }
  html[lang="vi"] .hero, html[lang="th"] .hero { height: auto; min-height: 520px; max-height: none; }
  html[lang="vi"] .hero h1, html[lang="th"] .hero h1 { font-size: clamp(28px, 8vw, 40px); }
  .head > nav .lang-switcher a { display: grid !important; }
}

/* Sales archive: small thumbnails, two desktop columns, one mobile column. */
#grid.sold-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; background:#fff; }
.sold-grid .sold-row { min-width:0; border-bottom:1px solid #dce2de; }
.sold-grid .sold-row>a { display:grid; grid-template-columns:70px minmax(0,1fr) auto 12px; align-items:center; gap:12px; min-height:64px; padding:8px 10px; color:#18231c; }
.sold-grid .sold-row>a:hover { background:#f1f6f3; }
.sold-grid .sold-row>a:focus-visible { outline:2px solid #087d3d; outline-offset:-2px; }
.sold-grid .sold-thumb { display:block; width:70px; height:48px; object-fit:cover; background:#edf1ee; }
.sold-grid .sold-summary { min-width:0; }
.sold-grid .sold-maker { margin:0 0 2px; color:#68756e; font-size:10px; line-height:1.3; overflow-wrap:anywhere; }
.sold-grid .sold-row h3 { margin:0; color:#18231c; font-size:14px; line-height:1.35; font-weight:700; overflow-wrap:anywhere; }
.sold-grid .sold-status { max-width:82px; color:#737e77; font-size:11px; line-height:1.35; text-align:end; }
.sold-grid .sold-arrow { color:#737e77; font-size:20px; }
.sold-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:22px; }
.sold-pagination[hidden] { display:none; }
.sold-pagination button { min-width:36px; min-height:40px; padding:6px 10px; border:1px solid #cbd4ce; background:#fff; color:#28382e; font:inherit; font-size:12px; cursor:pointer; }
.sold-pagination button[aria-current="page"] { background:#087d3d; color:#fff; border-color:#087d3d; }
.sold-pagination button:disabled { opacity:.4; cursor:default; }
.sold-pagination button:focus-visible { outline:2px solid #087d3d; outline-offset:2px; }
@media(max-width:767px) {
  #grid.sold-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .sold-grid .sold-row>a { grid-template-columns:56px minmax(0,1fr) auto 10px; gap:8px; min-height:58px; padding:8px; }
  .sold-grid .sold-thumb { width:56px; height:40px; }
  .sold-grid .sold-row h3 { font-size:13px; }
  .sold-grid .sold-status { max-width:64px; font-size:10px; }
}