.catalog-hero{margin-top:80px;padding:100px 24px 78px;background:linear-gradient(135deg,#003c62,#0077be);color:#fff;text-align:center}.catalog-hero>div{max-width:820px;margin:auto}.catalog-hero h1{font:800 clamp(42px,7vw,72px)/1.15 "Be Vietnam Pro","Noto Sans Thai";margin:8px 0 14px}.catalog-hero p{font-size:18px;color:#dceffc;max-width:650px;margin:0 auto 28px}.catalog-search{max-width:620px;margin:auto;background:#fff;border-radius:18px;padding:8px 16px;display:flex;align-items:center;gap:10px;color:var(--blue);box-shadow:0 16px 38px rgba(0,20,40,.2)}.catalog-search span{font-size:25px}.catalog-search input{min-width:0;flex:1;border:0;outline:0;padding:11px 5px;font:500 16px "Noto Sans Thai"}.catalog-shell{max-width:1280px;margin:auto;padding:48px 48px 96px}.filter-bar{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}.filter-bar button{white-space:nowrap;border:1px solid #d9e0e5;background:#fff;border-radius:999px;padding:10px 17px;color:#4d5861;font:600 14px "Noto Sans Thai";cursor:pointer}.filter-bar button.active{background:var(--blue);border-color:var(--blue);color:#fff}.catalog-status{display:flex;justify-content:space-between;align-items:center;margin:28px 0 20px}.catalog-status span{font-size:13px;color:#6d757c}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.directory-card{background:#fff;border-radius:22px;overflow:hidden;border:1px solid #e3e6e8;box-shadow:0 10px 30px rgba(0,94,151,.07);display:flex;flex-direction:column}.directory-visual{height:150px;padding:20px;display:flex;align-items:flex-start;justify-content:space-between;background:linear-gradient(135deg,#d7f0ff,#8bcfff)}.directory-visual>span{font-size:55px;align-self:center;margin-left:12px}.directory-visual b{background:rgba(255,255,255,.7);padding:5px 10px;border-radius:999px;font-size:12px}.tone-sunset .directory-visual{background:linear-gradient(135deg,#ffd9c8,#ff8b6d)}.tone-wood .directory-visual{background:linear-gradient(135deg,#f1d7b9,#b47b47)}.tone-coral .directory-visual{background:linear-gradient(135deg,#ffe6dc,#ff9b7d)}.tone-aqua .directory-visual{background:linear-gradient(135deg,#c8f5f2,#52c9d4)}.tone-green .directory-visual{background:linear-gradient(135deg,#dff0ce,#80bd67)}.tone-sea .directory-visual{background:linear-gradient(135deg,#d9f8ff,#56bddd)}.tone-sand .directory-visual{background:linear-gradient(135deg,#fff0c9,#eac67d)}.tone-night .directory-visual{background:linear-gradient(135deg,#49417b,#101528);color:#fff}.tone-food .directory-visual{background:linear-gradient(135deg,#ffe3cc,#ef9361)}.directory-body{padding:22px;display:flex;flex:1;flex-direction:column}.directory-body>small{color:var(--blue);font-weight:700}.directory-body h2{font:700 21px/1.45 "Be Vietnam Pro","Noto Sans Thai";margin:7px 0}.directory-body p{color:var(--muted);font-size:14px;margin:0 0 16px}.directory-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.directory-tags span{background:#f0f4f6;color:#55616a;font-size:11px;padding:4px 8px;border-radius:999px}.directory-body>a{margin-top:17px;color:var(--blue);font-weight:700;font-size:14px}.catalog-empty{text-align:center;padding:80px 20px}.catalog-empty span{font-size:52px}.catalog-empty h2{margin-bottom:4px}@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.catalog-hero{margin-top:68px;padding:72px 16px 56px}.catalog-shell{padding:32px 16px 76px}.catalog-grid{grid-template-columns:1fr}.catalog-status{align-items:flex-start;gap:6px;flex-direction:column}.directory-visual{height:135px}}