:root{
      --llg-primary:#1e7e34;
      --llg-primary-dark:#166534;
      --llg-primary-soft:#e6f4ea;
      --bg:#f6fbf7;
      --bg-grad-end:#e8f5e9;
      --text:#14231a;
      --muted:#5c6b62;
      --line:#d4e8da;
      --line-focus:var(--llg-primary);
      --pill:#e8f5e9;
      --shadow:0 4px 24px rgba(30,126,52,.1);
      --shadow-hover:0 8px 32px rgba(30,126,52,.16);
    }
    *{ box-sizing:border-box; }
    html, body{
      margin:0;
      min-height:100%;
      height:100%;
      font-family: Arial, system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
      color:var(--text);
      background:var(--bg);
    }
    body{
      display:flex;
      flex-direction:column;
      min-height:100vh;
      min-height:100dvh;
      position:relative;
      overflow-x:hidden;
    }
    .page-bg{
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:linear-gradient(165deg, #fbfffc 0%, #f3faf5 35%, #eaf6ee 68%, #e2f0e6 100%);
      overflow:hidden;
    }
    .page-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(ellipse 80% 55% at 50% -5%, rgba(34,197,94,.1) 0%, transparent 58%),
        radial-gradient(ellipse 45% 35% at 92% 18%, rgba(30,126,52,.07) 0%, transparent 52%);
    }
    .page-city{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:min(44vh, 400px);
      mask-image:linear-gradient(to top, #000 42%, transparent 100%);
      -webkit-mask-image:linear-gradient(to top, #000 42%, transparent 100%);
    }
    .page-city svg{
      display:block;
      width:100%;
      height:100%;
    }
    .top{
      position:relative;
      z-index:100;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:16px 24px;
      flex-shrink:0;
      background:transparent;
    }
    .top-brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:var(--text);
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:-.02em;
      flex-shrink:0;
    }
    .top-brand-ico{
      width:34px;
      height:34px;
      border-radius:10px;
      background:linear-gradient(145deg, #22c55e, #15803d);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:15px;
      font-weight:900;
      box-shadow:0 4px 14px rgba(30,126,52,.32);
    }
    .top-brand:hover{ background:transparent; }
    .top-actions{
      display:flex;
      align-items:center;
      gap:6px;
      margin-left:auto;
    }
    .top a{
      font-size:13px;
      font-weight:500;
      color:var(--text);
      text-decoration:none;
      padding:8px 12px;
      border-radius:4px;
      line-height:1.2;
    }
    .top a:hover,
    .top button:hover:not(.btn-register):not(.primary){
      background:var(--pill);
    }
    .top button{
      font:inherit;
      font-size:13px;
      font-weight:500;
      color:var(--text);
      border:none;
      background:transparent;
      padding:8px 12px;
      border-radius:4px;
      cursor:pointer;
      line-height:1.2;
      position:relative;
      z-index:2;
    }
    .top .primary,
    .top .btn-register{
      background:var(--llg-primary);
      color:#fff;
    }
    .top .btn-register{
      border-radius:999px;
      padding:9px 18px;
    }
    .top .primary:hover,
    .top .btn-register:hover{
      background:var(--llg-primary-dark);
      color:#fff;
    }
    .top .user-name{
      font-size:13px;
      color:var(--muted);
      padding:8px 4px;
      max-width:140px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .top-auth-guest,
    .top-auth-user-menu{
      display:flex;
      align-items:center;
      gap:4px;
    }
    .top-auth-user-menu{ display:none; }
    .top-profile-link{ display:none; }
    body.is-logged-in .top-auth-guest{ display:none; }
    body.is-logged-in .top-auth-user-menu{ display:flex; }
    body.is-logged-in .top-profile-link{ display:inline-flex; }
    .top-auth-menu{
      position:relative;
      display:flex;
      align-items:center;
    }
    .top-lang-slot{
      display:flex;
      align-items:center;
      flex-shrink:0;
    }
    .top-lang-slot .pd-lang-wrap{
      display:flex;
      align-items:center;
    }
    .top-lang-slot select,
    .top-lang-slot #LandLinkGoLangSelect,
    .llg-lang-select{
      border:1px solid var(--line);
      background:#fff;
      border-radius:10px;
      padding:7px 10px;
      font:inherit;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      min-width:108px;
      max-width:none;
      text-align:left;
      text-align-last:left;
    }
    .top-lang-slot .pd-lang-wrap{
      position:relative;
    }
    .top-lang-slot .llg-lang-menu{
      min-width:100%;
    }
    .top-auth-menu-btn{
      display:none;
      align-items:center;
      gap:8px;
      height:auto;
      width:auto;
      padding:5px 10px 5px 5px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      cursor:pointer;
      flex-shrink:0;
      color:var(--text);
      box-shadow:0 1px 4px rgba(30,126,52,.06);
    }
    .top-auth-menu-btn-ico{
      width:32px;
      height:32px;
      border-radius:50%;
      background:var(--llg-primary-soft);
      color:var(--llg-primary);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .top-auth-menu-btn-ico svg{
      width:18px;
      height:18px;
    }
    .top-auth-menu-btn-label{
      font-size:13px;
      font-weight:700;
      line-height:1.2;
      white-space:nowrap;
    }
    .top-auth-menu-btn-chevron{
      display:flex;
      align-items:center;
      color:var(--muted);
      transition:transform .18s ease;
    }
    .top-auth-menu-btn-chevron svg{
      width:16px;
      height:16px;
    }
    .top-auth-menu.is-open .top-auth-menu-btn-chevron{
      transform:rotate(180deg);
    }
    .top-auth-drop-item,
    .top-auth-drop-register{
      display:flex;
      align-items:center;
      gap:10px;
      width:100%;
      font:inherit;
      cursor:pointer;
      border:none;
    }
    .top-auth-drop-item{
      padding:11px 12px;
      border-radius:10px;
      background:#fff;
      color:var(--text);
      font-size:14px;
      font-weight:600;
      text-align:left;
    }
    .top-auth-drop-item:hover{
      background:var(--pill);
    }
    .top-auth-drop-ico{
      display:flex;
      align-items:center;
      justify-content:center;
      width:20px;
      height:20px;
      flex-shrink:0;
      color:var(--text);
    }
    .top-auth-drop-ico svg{
      width:18px;
      height:18px;
    }
    .top-auth-drop-register{
      justify-content:center;
      margin-top:2px;
      padding:12px 14px;
      border-radius:10px;
      background:var(--llg-primary);
      color:#fff;
      font-size:14px;
      font-weight:700;
    }
    .top-auth-drop-register:hover{
      background:var(--llg-primary-dark);
      color:#fff;
    }
    .top-auth-drop-register .top-auth-drop-ico{
      color:#fff;
    }
    .top-auth-menu-panel{
      display:flex;
      align-items:center;
      gap:6px;
    }
    .auth-overlay{
      display:none;
      position:fixed;
      inset:0;
      z-index:10000;
      background:rgba(32,33,36,.45);
      padding:16px;
      pointer-events:none;
      visibility:hidden;
    }
    .auth-overlay:not(.show) .auth-dialog{
      display:none;
    }
    .auth-overlay.show{
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:auto;
      visibility:visible;
    }
    .auth-dialog{ pointer-events:auto; }
    .auth-dialog{
      width:min(440px, 100%);
      background:var(--bg);
      border-radius:12px;
      box-shadow:0 8px 32px rgba(0,0,0,.2);
      overflow:hidden;
    }
    .auth-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 20px;
      border-bottom:1px solid #f1f3f4;
    }
    .auth-head h2{
      margin:0;
      font-size:18px;
      font-weight:500;
    }
    .auth-close{
      border:none;
      background:transparent;
      font-size:22px;
      line-height:1;
      color:var(--muted);
      cursor:pointer;
      padding:4px 8px;
      border-radius:4px;
    }
    .auth-close:hover{ background:var(--pill); }
    .auth-body{ padding:20px; display:grid; gap:14px; }
    .auth-field label{
      display:block;
      font-size:12px;
      font-weight:500;
      color:var(--muted);
      margin-bottom:6px;
    }
    .auth-field input{
      width:100%;
      padding:12px 14px;
      border:1px solid var(--line);
      border-radius:8px;
      font:inherit;
      font-size:15px;
      outline:none;
    }
    .auth-field input:focus{
      border-color:var(--llg-primary);
      box-shadow:0 0 0 2px rgba(30,126,52,.18);
    }
    .auth-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:4px;
    }
    .auth-actions .btn-auth{
      font:inherit;
      font-size:14px;
      font-weight:500;
      padding:10px 20px;
      border-radius:4px;
      cursor:pointer;
      border:1px solid transparent;
    }
    .auth-actions .btn-auth-primary{
      background:var(--llg-primary);
      color:#fff;
      border-color:var(--llg-primary);
    }
    .auth-actions .btn-auth-primary:hover{ background:var(--llg-primary-dark); }
    .auth-actions .btn-auth-link{
      background:var(--pill);
      color:var(--text);
    }
    .auth-actions .btn-auth-link:hover{ background:#e8eaed; }
    .auth-error{
      display:none;
      font-size:13px;
      color:#c5221f;
      font-weight:500;
    }
    .auth-error.show{ display:block; }
    .auth-hint{
      display:none;
      font-size:13px;
      color:#1e40af;
      font-weight:800;
      line-height:1.45;
      margin:0;
      padding:10px 12px;
      border-radius:12px;
      background:#eff6ff;
      border:1px solid #bfdbfe;
    }
    .auth-hint.show{ display:block; }
    .auth-register{
      display:none;
      border-top:1px solid #f1f3f4;
      padding-top:16px;
      margin-top:4px;
      gap:14px;
    }
    .auth-register.show{ display:grid; }
    .auth-tabs{
      display:flex;
      gap:0;
      padding:4px;
      background:#f1f3f4;
      border:1px solid #e5e7eb;
      border-radius:14px;
    }
    .auth-overlay.show .auth-tabs{
      border-bottom:none;
    }
    .auth-tab{
      flex:1;
      padding:10px 12px;
      border:none;
      background:transparent;
      font:inherit;
      font-size:14px;
      font-weight:900;
      color:var(--muted);
      cursor:pointer;
      border-radius:10px;
      transition:background .15s ease, color .15s ease, transform .12s ease;
    }
    .auth-tab:hover{
      background:rgba(17,24,39,.06);
    }
    .auth-tab.active{
      background:var(--llg-primary);
      color:#fff;
    }
    .hero{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:20px 24px 32px;
      position:relative;
      z-index:1;
    }
    .logo{
      margin:0 0 20px;
      font-size:clamp(3.2rem, 13vw, 6rem);
      font-weight:800;
      letter-spacing:-0.045em;
      line-height:1;
      color:var(--text);
      user-select:none;
      text-align:center;
    }
    .logo .land{ color:#1a1625; }
    .logo .go{ color:var(--llg-primary); }
    .tagline{
      margin:-8px 0 36px;
      font-size:clamp(1.1rem, 3.4vw, 1.55rem);
      color:var(--llg-primary);
      font-weight:700;
      letter-spacing:.01em;
    }
    .search-form{
      width:100%;
      max-width:640px;
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .search-box{
      display:flex;
      align-items:center;
      width:100%;
      height:54px;
      padding:0 8px 0 20px;
      border:1px solid rgba(30,126,52,.14);
      border-radius:999px;
      background:#fff;
      box-shadow:var(--shadow);
      transition:box-shadow .2s ease, border-color .2s ease;
    }
    .search-box:hover{
      box-shadow:var(--shadow-hover);
      border-color:rgba(30,126,52,.24);
    }
    .search-box:focus-within{
      border-color:rgba(30,126,52,.38);
      box-shadow:0 8px 32px rgba(30,126,52,.14);
    }
    .search-box svg.search-ico{
      width:20px;
      height:20px;
      color:#9aa0a6;
      flex-shrink:0;
      margin-right:12px;
    }
    .search-box input{
      flex:1;
      min-width:0;
      border:none;
      outline:none;
      font:inherit;
      font-size:16px;
      background:transparent;
      color:var(--text);
    }
    .search-box input::placeholder{ color:#9aa0a6; }
    .search-box .go{
      flex-shrink:0;
      width:42px;
      height:42px;
      margin-right:2px;
      border:none;
      border-radius:50%;
      background:var(--llg-primary);
      color:#fff;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background .15s ease, transform .15s ease;
      box-shadow:0 4px 14px rgba(30,126,52,.32);
    }
    .search-box .go:hover{
      background:var(--llg-primary-dark);
      transform:scale(1.04);
    }
    .search-box .go svg{ width:20px; height:20px; }
    .shortcuts{
      margin-top:36px;
      width:100%;
      max-width:min(820px, 100%);
      display:flex;
      flex-wrap:nowrap;
      justify-content:flex-start;
      align-items:flex-start;
      gap:clamp(8px, 1.6vw, 18px);
      overflow-x:auto;
      overflow-y:visible;
      padding:18px clamp(18px, 4vw, 32px) 14px;
      scroll-padding-inline:clamp(18px, 4vw, 32px);
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    @media (min-width:800px){
      .shortcuts{
        justify-content:center;
        overflow-x:visible;
      }
    }
    .shortcuts::-webkit-scrollbar{ display:none; }
    .shortcut{
      flex:0 0 auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      width:clamp(76px, 11.5vw, 104px);
      text-decoration:none;
      color:var(--text);
      transition:transform .2s ease;
    }
    .shortcut:hover{ transform:translateY(-2px); }
    .shortcut-icon{
      --ring:clamp(68px, 10vw, 88px);
      width:var(--ring);
      height:var(--ring);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      line-height:1;
      border:1px solid rgba(0,0,0,.06);
      box-shadow:0 4px 14px rgba(0,0,0,.08);
      transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, filter .22s ease;
    }
    .shortcut-glyph{
      width:60%;
      height:60%;
      flex-shrink:0;
      display:block;
      color:#1a1a1a;
    }
    .shortcut:hover .shortcut-icon{
      transform:scale(1.08) translateY(-4px);
      box-shadow:0 14px 32px rgba(0,0,0,.14);
      filter:saturate(1.08);
    }
    .shortcut--market .shortcut-icon{
      background:linear-gradient(145deg,#e8f2ff 0%,#c7dcff 100%);
    }
    .shortcut--sell .shortcut-icon{
      background:linear-gradient(145deg,#e8f8ef 0%,#c8efd4 100%);
    }
    .shortcut--rent .shortcut-icon{
      background:linear-gradient(145deg,#f3ecff 0%,#ddd0ff 100%);
    }
    .shortcut--mortgage .shortcut-icon{
      background:linear-gradient(145deg,#ffe8e0 0%,#ffc4b0 100%);
    }
    .shortcut--agent .shortcut-icon{
      background:linear-gradient(145deg,#eef1f8 0%,#d4dbe8 100%);
    }
    .shortcut--survey .shortcut-icon{
      background:linear-gradient(145deg,#fff6e8 0%,#ffe2b8 100%);
    }
    .shortcut--craftsmen .shortcut-icon{
      background:linear-gradient(145deg,#ede9fe 0%,#c4b5fd 100%);
    }
    .shortcut span:not(.shortcut-icon){
      font-size:12px;
      font-weight:600;
      color:#3c4043;
      text-align:center;
      line-height:1.3;
      max-width:104px;
      white-space:normal;
    }
    .shortcut:hover span:not(.shortcut-icon){ color:var(--text); }
    .bottom{
      flex-shrink:0;
      position:relative;
      z-index:1;
      padding:14px 24px 22px;
      border-top:1px solid rgba(30,126,52,.12);
      display:flex;
      flex-wrap:wrap;
      gap:8px 24px;
      justify-content:center;
      font-size:13px;
      color:var(--muted);
      background:rgba(255,255,255,.35);
      backdrop-filter:blur(8px);
    }
    .bottom a{
      color:var(--muted);
      text-decoration:none;
    }
    .bottom a:hover{ text-decoration:underline; }
    @media (min-width:1025px){
      .shortcut-label br{ display:none; }
      .top-auth-menu-btn{ display:none !important; }
      .top-auth-menu-panel{
        display:flex !important;
        position:static;
        flex-direction:row;
        gap:6px;
        padding:0;
        background:transparent;
        border:none;
        box-shadow:none;
        min-width:0;
      }
      .top-auth-guest,
      .top-auth-user-menu{
        flex-direction:row;
        gap:6px;
      }
      .top-auth-drop-item,
      .top-auth-drop-register{
        width:auto;
        padding:8px 12px;
        margin-top:0;
        gap:0;
      }
      .top-auth-drop-ico{ display:none; }
      .top-auth-drop-register{
        border-radius:999px;
        padding:9px 18px;
      }
      body.is-logged-in .top-auth-guest{ display:none !important; }
      body:not(.is-logged-in) .top-auth-user-menu{ display:none !important; }
    }
    @media (max-width:1024px){
      .page-city{ height:min(36vh, 280px); }
      .top{
        flex-wrap:nowrap;
        align-items:center;
        padding:10px 12px;
        gap:8px;
      }
      .top-actions{
        width:auto;
        margin-left:auto;
        flex-wrap:nowrap;
        gap:6px;
      }
      .user-name{ display:none; }
      .top-auth-menu-btn{ display:flex; }
      .top-auth-menu-panel{
        display:none;
        position:absolute;
        right:0;
        top:calc(100% + 8px);
        min-width:min(240px, calc(100vw - 24px));
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        padding:8px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:14px;
        box-shadow:var(--shadow-hover);
        z-index:200;
      }
      .top-auth-menu.is-open .top-auth-menu-panel{
        display:flex;
      }
      .top-auth-guest,
      .top-auth-user-menu{
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        width:100%;
      }
      body.is-logged-in .top-auth-guest{ display:none; }
      body:not(.is-logged-in) .top-auth-user-menu{ display:none; }
      .top-auth-menu-panel .btn-register{
        width:100%;
      }
      @media (max-width:400px){
        .top-auth-menu-btn-label{ display:none; }
        .top-auth-menu-btn{ padding:4px; }
      }
      .search-box{
        margin:0 12px;
      }
      .logo{
        font-size:clamp(2.2rem, 10vw, 2.75rem);
      }
      .shortcuts{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:flex-start;
        gap:16px 12px;
        overflow-x:visible;
        overflow-y:visible;
        padding:18px 12px 24px;
        margin-inline:auto;
        max-width:min(100%, 400px);
        scroll-padding-inline:0;
      }
      .shortcut{
        flex:0 0 calc(25% - 12px);
        width:calc(25% - 12px);
        max-width:78px;
        min-width:64px;
        gap:8px;
      }
      .shortcut-icon{
        --ring:64px;
      }
      .shortcut-label,
      .shortcut span:not(.shortcut-icon){
        display:block;
        width:100%;
        max-width:76px;
        min-height:2.6em;
        font-size:11px;
        line-height:1.28;
        text-align:center;
        text-wrap:balance;
        word-break:break-word;
      }
    }
    @media (max-width:380px){
      .shortcuts{
        gap:14px 8px;
        padding:16px 8px 20px;
      }
      .shortcut{
        flex:0 0 calc(25% - 8px);
        width:calc(25% - 8px);
        max-width:72px;
        min-width:58px;
      }
      .shortcut-icon{
        --ring:58px;
      }
    }
    @media (max-width:480px){
      .hero{ margin-top:0; padding-top:8px; }
      .logo{ font-size:2.75rem; margin-bottom:22px; }
      .tagline{ margin-top:-8px; margin-bottom:26px; font-size:1.1rem; }
    }