.t-home{–bg:#f5efe4;–paper:#fffaf2;–ink:#2d2219;–muted:#6f5b4a;–red:#cf342d;–gold:#e6b24c;–green:#59724c;font-family:Georgia,Times New Roman,serif;color:var(–ink)}
.t-home *{box-sizing:border-box}
.t-wrap{width:min(1180px,calc(100% – 32px));margin:0 auto}
.t-nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:rgba(245,239,228,.72);border-bottom:1px solid rgba(45,34,25,.08)}
.t-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.t-brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.t-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#d85a46,#e9bf66);color:#fff;box-shadow:0 20px 60px rgba(56,34,16,.12);font-size:18px}
.t-links{display:flex;flex-wrap:wrap;gap:16px;color:var(–muted);font:600 14px/1.2 system-ui,sans-serif}
.t-links a{text-decoration:none;color:inherit}
.t-hero{padding:28px 0 18px}
.t-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:stretch}
.t-card{border-radius:28px;overflow:hidden;background:var(–paper);box-shadow:0 20px 60px rgba(56,34,16,.12);border:1px solid rgba(45,34,25,.08)}
.t-media{position:relative;min-height:760px;background:url(‘https://tuommm.com/wp-content/uploads/2026/05/banner-tuommm.jpg’) center/cover no-repeat}
.t-media:after{content:”;position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,16,10,.08),rgba(24,16,10,.42) 70%,rgba(24,16,10,.62))}
.t-copy{position:absolute;inset:auto 0 0 0;z-index:1;color:#fff;padding:28px;display:grid;gap:14px}
.t-eyebrow{display:inline-flex;width:fit-content;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2);letter-spacing:.14em;text-transform:uppercase;font:700 12px/1 system-ui,sans-serif}
.t-copy h1{margin:0;font-size:clamp(42px,6vw,78px);line-height:.92;letter-spacing:-.05em;text-shadow:0 10px 30px rgba(0,0,0,.35)}
.t-copy p{margin:0;max-width:620px;font:400 18px/1.75 system-ui,sans-serif;color:rgba(255,255,255,.9)}
.t-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:999px;font:700 14px/1 system-ui,sans-serif;border:1px solid transparent;text-decoration:none}
.t-btn.primary{background:var(–gold);color:#39240d}
.t-btn.secondary{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);color:#fff}
.t-aside{display:grid;grid-template-rows:auto auto 1fr;gap:18px}
.t-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.t-stat{background:rgba(255,255,255,.55);border:1px solid rgba(45,34,25,.08);border-radius:22px;padding:16px;min-height:110px}
.t-stat strong{display:block;font-size:30px;line-height:1;margin-bottom:8px}
.t-stat span{display:block;color:var(–muted);font:600 13px/1.5 system-ui,sans-serif}
.t-story{padding:22px;background:var(–paper);border-radius:28px;border:1px solid rgba(45,34,25,.08)}
.t-section{padding:14px 0 28px}
.t-section h2{margin:0 0 10px;font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.04em}
.t-desc{margin:0;color:var(–muted);font:400 16px/1.8 system-ui,sans-serif}
.t-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.t-mini{min-height:220px;border-radius:24px;overflow:hidden;position:relative;border:1px solid rgba(45,34,25,.08);background-size:cover;background-position:center}
.t-mini:after{content:”;position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.35))}
.t-mini b{position:absolute;left:14px;bottom:14px;z-index:1;color:#fff;font:700 14px/1.5 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.28);padding:8px 10px;border-radius:999px}
.t-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.t-shot{position:relative;overflow:hidden;border-radius:24px;min-height:220px;background-size:cover;background-position:center;border:1px solid rgba(45,34,25,.08);box-shadow:0 14px 35px rgba(45,34,25,.08)}
.t-shot:after{content:”;position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.35))}
.t-shot span{position:absolute;left:14px;bottom:14px;z-index:1;color:#fff;font:700 13px/1.4 system-ui,sans-serif;padding:8px 10px;border-radius:999px;background:rgba(0,0,0,.28)}
.t-span-7{grid-column:span 7}.t-span-5{grid-column:span 5}.t-span-4{grid-column:span 4}.t-span-8{grid-column:span 8}
.t-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.t-item{padding:20px;background:rgba(255,250,242,.9);border-radius:24px;border:1px solid rgba(45,34,25,.08)}
.t-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.t-price{font:800 18px/1 system-ui,sans-serif;color:var(–red)}
.t-tag{display:inline-flex;padding:6px 10px;border-radius:999px;margin-top:14px;background:rgba(89,114,76,.12);color:var(–green);font:700 12px/1 system-ui,sans-serif}
.t-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:14px;align-items:stretch}
.t-invite{padding:26px;background:linear-gradient(145deg,rgba(207,52,45,.96),rgba(227,181,82,.96));color:#fff;border-radius:28px;border:1px solid rgba(255,255,255,.15)}
.t-invite p{color:rgba(255,255,255,.9)}
.t-invite ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;font:600 14px/1.6 system-ui,sans-serif}
.t-invite li:before{content:’• ‘;margin-right:4px}
.t-contact{padding:26px;background:var(–paper);border-radius:28px;border:1px solid rgba(45,34,25,.08)}
.t-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.t-box{border-radius:20px;padding:16px;background:#fff;border:1px solid rgba(45,34,25,.08)}
.t-box strong{display:block;margin-bottom:6px}
.t-footer{padding:18px 0 34px;color:var(–muted);font:600 13px/1.6 system-ui,sans-serif}
@media (max-width:980px){.t-grid,.t-split,.t-menu{grid-template-columns:1fr}.t-stats{grid-template-columns:1fr 1fr}.t-gallery{grid-template-columns:1fr 1fr}.t-span-7,.t-span-5,.t-span-4,.t-span-8{grid-column:auto}.t-media{min-height:640px}}
@media (max-width:720px){.t-links{display:none}.t-stats,.t-mini-grid,.t-contact-grid{grid-template-columns:1fr}.t-gallery{grid-template-columns:1fr}.t-media{min-height:620px}.t-copy{padding:18px}.t-wrap{width:min(100% – 20px,1180px)}}
Một khoảng sân cũ
được thắp sáng bằng cây xanh, đèn lồng và chong chóng.
Tươmmm là homepage mang cảm giác của một quán cà phê trong khu tập thể: cũ vừa đủ, ấm vừa đủ, và lúc nào cũng có nắng len qua dây điện, ô vàng, mái tôn và những chiếc bàn nhỏ đang chờ một cuộc trò chuyện.
Không gian & bầu không khí
Một gallery rộng, có nhịp điệu rõ ràng: gần hơn, xa hơn, đầy cây, rồi thoáng ra với ánh nắng.
Những buổi ngồi cùng nhau, pha matcha và kể chuyện sân cũ.
Phần này được thiết kế như một hoạt động nhỏ cuối tuần: ít người, ánh sáng đẹp, và đủ không gian để thấy Tươmmm không chỉ là một quán mà là một bối cảnh sống động.
- Chasen, bột matcha, sữa oat và cách đánh cho mịn.
- Gợi ý set chụp ảnh theo mùa: nắng đầu hạ, trung thu, Tết.
- Góc decor thay đổi theo ngày, giống một sân nhà luôn có chuyện mới.
Liên hệ & ghé quán
Bố cục này để dành cho thông tin thật của bạn sau này. Hiện tại mình đang dựng phần khung, nên có thể thay tên, địa chỉ, giờ mở cửa, và nút đặt bàn theo nhu cầu của bạn.
