@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root{--cream:#f6f0e4;--ink:#3c281e;--muted:#847563;--orange:#a8492d;--line:#dfd3c0;--green:#536349}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-size:14px}
body:has(dialog[open]){overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:relative;z-index:5;border-bottom:1px solid var(--line);background:var(--cream)}
.brand{display:flex;gap:12px;align-items:center;font-family:'Playfair Display',Georgia,serif;font-size:31px;font-weight:600}
.brand-mark{font-size:38px;color:var(--orange)}
.brand small{font:8px 'Be Vietnam Pro',sans-serif;display:block;letter-spacing:3px;margin-top:5px}
nav{display:flex;align-items:center;gap:36px;font-size:11px}
nav>a{transition:color .2s}
nav>a:hover{color:var(--orange)}
.nav-contact{background:var(--ink);color:var(--cream);padding:14px 22px;border-radius:30px}
.nav-contact:hover{color:var(--cream);background:var(--orange)}
.nav-contact span{margin-left:24px}
.hero{position:relative;overflow:hidden;min-height:780px;padding-top:407px;text-align:center;background:radial-gradient(ellipse at 50% 0%,#dfc7a853,transparent 65%)}
.turntable{--table-size:1040px;--table-top:-670px;--dish-size:304px;--dish-radius:340px;position:absolute;inset:0 0 auto;height:380px;pointer-events:none;touch-action:pan-y}
.turntable::before,.turntable::after{content:'';position:absolute;width:var(--table-size);height:var(--table-size);left:calc(50% - var(--table-size)/2);top:var(--table-top);border-radius:50%;pointer-events:none}
.turntable::before{transform:translateY(13px) scale(.995);background:linear-gradient(180deg,#65422b 0%,#352015 34%,#26160f 100%);box-shadow:0 13px 0 #2b1a12,0 28px 42px #3b241b38}
.turntable::after{z-index:2;background:radial-gradient(ellipse at 30% 24%,#ffe6bc12,transparent 60%),linear-gradient(145deg,#fff0d80a,transparent 48%,#150a0714)}
.orbit{position:absolute;width:var(--table-size);height:var(--table-size);left:calc(50% - var(--table-size)/2);top:var(--table-top);border-radius:50%;will-change:transform;pointer-events:auto;z-index:1}
.wood{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 48% 42%,#94654326,transparent 63%),repeating-linear-gradient(88deg,transparent 0 23px,#1b0d0717 24px,#d3a16a0b 26px,transparent 29px),linear-gradient(118deg,#6c492f 0%,#50331f 48%,#704d32 72%,#412819 100%);border:10px solid #3a2115;box-shadow:inset 0 0 0 2px #b184535e,inset 0 8px 18px #f4cf9b12,inset 0 -26px 38px #1409058c,0 3px 5px #1409054d}
.wood::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 48% 46%,transparent 0 43px,#d7ac7418 45px,#160a0622 48px,transparent 52px),radial-gradient(ellipse 92% 28% at 19% 38%,transparent 34%,#d7ac7430 35%,transparent 36.2%,#160a0620 38%,transparent 39%,#e1b57815 42%,transparent 43%),linear-gradient(115deg,#fff3d00b,transparent 43%,#10070425);mix-blend-mode:soft-light}
.wood-ring{position:absolute;inset:25px;border-radius:50%;border:1px solid #d2ad7655;box-shadow:inset 0 0 0 2px #26130925,0 0 0 5px #24150d40}
.table-engraving{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);color:#e3bf8c66;font:italic 40px 'Playfair Display',Georgia,serif;text-shadow:0 1px 1px #130905}
.table-engraving small{display:block;font:8px 'Be Vietnam Pro',sans-serif;letter-spacing:5px;margin-top:12px}
.table-mark{position:absolute;color:#caa16d80;font-size:11px;letter-spacing:3px}
.mark-one{bottom:22px;left:49%}.mark-two{top:25%;left:9%;transform:rotate(120deg)}.mark-three{top:25%;right:9%;transform:rotate(240deg)}
.dish{position:absolute;left:50%;top:50%;width:var(--dish-size);height:var(--dish-size);margin:calc(var(--dish-size)/-2);background:none;padding:0;border:0;border-radius:50%;pointer-events:none;filter:drop-shadow(9px 18px 12px #160a0766)}
.dish.active{pointer-events:auto}
.dish img{width:100%;height:100%;object-fit:contain;display:block;user-select:none}
.dish-hint{display:none}
.dish.active:hover img{filter:brightness(1.08)}
.dish.is-opening{z-index:3}
.dish.is-opening img{will-change:transform;filter:brightness(1.06)}
.menu-card.is-opening .card-art{overflow:visible}
.menu-card.is-opening img{will-change:transform}
.dish-flight{position:fixed;z-index:5;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 14px 14px #35201555);will-change:left,top,width,height,transform}
.hero-side{position:absolute;top:180px;text-align:left;z-index:2;pointer-events:none}
.left{left:7%}.right{right:7%;text-align:center}
.eyebrow{font-size:9px;letter-spacing:2.6px;font-weight:500}
.hero-side p:not(.tiny){font-family:'Playfair Display',Georgia,serif;font-size:38px;line-height:1.2;margin:18px 0}
.hero-side em,h2 em{font-weight:400;color:var(--orange)}
.tiny{font-size:10px;line-height:1.8;color:var(--muted)}
.stamp{display:inline-block;border:1px solid #a78b65;border-radius:50%;padding:21px 14px;transform:rotate(12deg);font-size:8px;letter-spacing:2px;line-height:2}
.stamp b{font-family:'Playfair Display',Georgia,serif;font-size:19px;letter-spacing:0;font-weight:400}
.dish-heading{position:relative;z-index:3}
.dish-heading .eyebrow{color:var(--orange);font-size:9px}
h1{font:500 clamp(30px,3.4vw,48px)/1.2 'Playfair Display',Georgia,serif;margin:12px auto}
.dish-heading p{color:#75624f;font-size:14px;line-height:1.7}
.dish-actions{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:20px}
#dish-price{color:var(--orange);font-size:11px}
.text-button{display:inline-flex;gap:24px;align-items:center;background:none;border:0;border-bottom:1px solid #b29b7a;padding:9px 0;font-size:11px}
.text-button:hover{color:var(--orange);border-color:var(--orange)}
.selector{display:flex;align-items:center;justify-content:center;gap:22px;margin:30px auto 25px;max-width:830px;padding:0 16px}
.round{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:18px;transition:background .2s}
.round:hover{background:var(--ink);color:var(--cream)}
.menu-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin}
.tab{min-width:182px;text-align:left;padding:12px 17px 12px 10px;border:1px solid var(--line);border-radius:10px;background:#fff8;display:flex;align-items:center;gap:10px;transition:background .2s,border-color .2s}
.tab img{width:53px;height:53px;object-fit:contain}
.tab small{font-size:7px;color:var(--muted);display:block;margin-bottom:5px;letter-spacing:1px}
.tab strong{font-size:12px;font-weight:500}
.tab[aria-pressed=true]{background:#e6d8bd;border-color:#b39770}
.hero-foot{display:flex;justify-content:space-between;margin:28px 6% 0;border-top:1px solid var(--line);padding:20px 0;font-size:8px;letter-spacing:1.2px;color:var(--muted)}
.flavor-strip{background:var(--orange);color:#fff0d8;display:flex;justify-content:space-around;gap:20px;align-items:center;padding:24px 5%;font:italic 22px 'Playfair Display',Georgia,serif;overflow:hidden;white-space:nowrap}
.flavor-strip i{font:20px Georgia,serif;color:#e1b58b}
.menu-section{padding:85px 8% 65px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:35px;gap:30px}
.menu-section .section-heading .eyebrow{display:inline-block;font-size:clamp(14px,.85vw,20px);font-weight:600;line-height:1.5;letter-spacing:2px;color:var(--orange)}
h2{font:400 47px/1.22 'Playfair Display',Georgia,serif;margin:16px 0}
.section-heading p{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:18px}
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.menu-card{border:0;background:none;text-align:left;padding:0;display:flex;flex-direction:column}
.card-art{width:100%;height:285px;position:relative;display:flex;justify-content:center;align-items:center;border-radius:160px 160px 14px 14px;background:#e8dcc5;overflow:hidden}
.menu-card:nth-child(2) .card-art{background:#dfe1cf}.menu-card:nth-child(3) .card-art{background:#e8cfbc}
.card-art img{width:78%;height:85%;object-fit:contain;filter:drop-shadow(0 10px 9px #49281626);transition:transform .5s}
.menu-card:hover .card-art img{transform:rotate(-7deg) scale(1.05)}
.card-index{position:absolute;top:30px;left:30px;font:italic 16px 'Playfair Display',Georgia,serif;color:#8a735d}
.card-body{padding:22px 0;width:100%}
.card-body h3{font:500 25px/1.25 'Playfair Display',Georgia,serif;margin:0 0 10px}
.card-body p{font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 18px}
.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:10px;color:var(--orange)}
.card-arrow{font-size:20px;color:var(--ink)}
.image-note{font-size:9px;letter-spacing:.4px;color:var(--muted);text-align:center;margin-top:20px}
.story{padding:75px 8% 95px;display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid var(--line)}
.story-art{align-self:center;position:relative}.story-arch{background:var(--green);border-radius:50% 50% 8px 8px;position:relative;padding:45px 20px 70px;min-height:400px;display:flex;align-items:center}
.story-arch img{width:100%;filter:drop-shadow(0 16px 15px #13200e50);transform:rotate(-12deg)}
.story-seal{position:absolute;bottom:25px;left:28px;color:#efe6d2;font:23px/1.3 'Playfair Display',Georgia,serif}.story-seal em{font-size:18px}
.handwritten{position:absolute;right:-25px;bottom:15px;transform:rotate(-8deg);background:#f4dfbb;border:1px solid #dac19a;padding:13px 17px;font:italic 17px 'Playfair Display',Georgia,serif;box-shadow:3px 6px 12px #48301b14}
.story-copy{align-self:center;line-height:1.9;color:var(--muted);font-size:12px}.story-copy h2{color:var(--ink);font-size:42px}.story-copy .eyebrow{color:var(--orange)}
.story-copy .text-button{color:var(--ink);margin-top:15px}
.visit{background:var(--ink);color:var(--cream);padding:70px 10%;display:grid;grid-template-columns:1.2fr 1fr;gap:12%;position:relative;overflow:hidden}
.visit::after{content:'Má Thảo';position:absolute;bottom:-70px;left:4%;font:italic 170px 'Playfair Display',Georgia,serif;color:#ffffff04;pointer-events:none;white-space:nowrap}
.visit h2{font-size:55px}.visit h2 em{color:#deb787}
.visit-info{padding-top:12px}.visit-info>div{border-bottom:1px solid #ffffff25;padding:14px 0}.visit-info span{font-size:8px;color:#c6b59d;letter-spacing:2px}.visit-info p{font-size:13px;margin:10px 0}
footer{padding:30px 6%;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted)}.footer-brand{font:600 25px 'Playfair Display',Georgia,serif;color:var(--ink)}.footer-brand small{font-weight:400;font-size:14px}
dialog{padding:0;border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:18px;max-width:800px;width:90%;overflow:visible;box-shadow:0 30px 100px #180d1644}
dialog[open]{display:grid;grid-template-columns:45% 55%;animation:dialog-in .3s ease-out}
dialog.is-transitioning{overflow:visible}
dialog.is-closing{animation:none}
dialog::backdrop{background:#211710a6;backdrop-filter:blur(8px)}
.close{position:absolute;right:12px;top:12px;border:1px solid var(--line);background:var(--cream);border-radius:50%;width:36px;height:36px;font-size:25px;z-index:2}
.modal-image{padding:30px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e6dac1;border-radius:18px 0 0 18px}
.modal-image img{width:100%;filter:drop-shadow(0 12px 12px #573a3026)}.modal-image small{font-size:9px;margin-top:15px;color:var(--muted)}
.modal-content{padding:52px 32px 32px}.modal-content h2{font-size:32px}.modal-content p{font-size:12px;line-height:1.9;color:var(--muted)}
.modal-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-top:20px;display:flex;gap:12px;justify-content:space-between;font-size:10px;align-items:center}.modal-row strong{color:var(--orange);white-space:nowrap}.modal-content .modal-note{font-size:10px}
.primary{border:0;background:var(--ink);color:var(--cream);padding:15px 20px;border-radius:30px;width:100%;margin-top:10px}.primary:hover{background:var(--orange)}
@keyframes dialog-in{from{opacity:0}to{opacity:1}}
@media(min-width:1500px){.hero-side.left{left:15%}.hero-side.right{right:15%}}
@media(max-width:1100px){.hero-side{top:240px}.hero-side.left{left:4%}.hero-side.right{right:4%}.hero-side p:not(.tiny){font-size:29px}.hero-side .tiny{display:none}.hero-side .eyebrow{font-size:8px}.stamp{padding:15px 10px;font-size:7px}.stamp b{font-size:15px}.turntable{--table-size:940px;--table-top:-600px;--dish-size:280px;--dish-radius:305px}.hero{padding-top:375px}.card-art{height:240px}.card-body h3{font-size:22px}}
@media(max-width:800px){header{height:85px;padding:0 5%}.brand{font-size:27px}.brand-mark{font-size:30px}.brand small{font-size:7px;letter-spacing:2px}nav{gap:20px}nav>a:nth-child(2){display:none}.hero-side{top:265px}.hero-side .eyebrow,.stamp{display:none}.hero-side p:not(.tiny){font-size:23px}.selector{gap:12px}.tab{min-width:155px;padding:10px}.tab img{width:43px;height:43px}.tab strong{font-size:11px}.hero{min-height:735px}.menu-section{padding:60px 6% 40px}.section-heading p{max-width:220px}.menu-grid{gap:15px}.card-art{height:190px}.card-index{top:20px;left:20px;font-size:12px}.card-body h3{font-size:20px}.card-body p{font-size:10px}.story{padding:55px 7% 65px;gap:7%}.story-copy h2{font-size:33px}.story-arch{min-height:300px;padding:30px 10px 60px}.handwritten{right:-15px;font-size:14px}.story-seal{font-size:20px}.flavor-strip{font-size:19px}.flavor-strip>span:last-child,.flavor-strip>i:last-of-type{display:none}.visit{padding:55px 7%;gap:7%}.visit h2{font-size:44px}}
@media(max-width:560px){header{height:76px}.brand{font-size:25px}.nav-contact{padding:11px 14px}.nav-contact span{margin-left:10px}nav{gap:15px;font-size:10px}.hero{padding-top:310px;min-height:680px}.turntable{--table-size:760px;--table-top:-490px;--dish-size:235px;--dish-radius:235px;height:290px}.wood{border-width:7px}.wood-ring{inset:18px}.table-engraving{font-size:27px}.table-engraving small{font-size:6px}.hero-side{display:none}.dish-heading .eyebrow{font-size:8px;letter-spacing:1.8px}h1{font-size:31px;max-width:335px;margin:13px auto}.dish-heading p{font-size:11px;max-width:300px;margin:12px auto}.dish-actions{gap:16px;margin-top:15px}.text-button,#dish-price{font-size:10px}.selector{gap:8px;margin:23px auto 18px;padding:0 10px;max-width:100%}.menu-tabs{gap:6px;flex:1}.tab{min-width:calc((100% - 12px)/3);flex:1;max-width:110px;display:flex;flex-direction:column;padding:9px 5px;text-align:center;gap:5px}.tab img{width:43px;height:43px}.tab small{display:none}.tab strong{font-size:10px}.round{width:29px;height:29px;font-size:15px}.hero-foot{font-size:7px;letter-spacing:.4px;gap:12px;text-align:left;margin-top:20px;padding:17px 0}.hero-foot span{max-width:50%}.flavor-strip{padding:20px 6%;font-size:18px;justify-content:space-between;gap:15px}.flavor-strip>span:nth-of-type(3),.flavor-strip>i:nth-of-type(2){display:none}.menu-section{padding:45px 6% 30px}.section-heading{display:block;margin-bottom:25px}h2{font-size:39px}.section-heading p{max-width:none;font-size:11px}.menu-grid{grid-template-columns:1fr;gap:20px}.menu-card{display:grid;grid-template-columns:40% 1fr;gap:20px;align-items:center}.card-art{height:170px;border-radius:90px 90px 12px 12px}.card-art img{width:88%;height:85%}.card-index{top:12px;left:17px;font-size:10px}.card-body{padding:12px 0}.card-body h3{font-size:24px}.card-body p{margin-bottom:12px;font-size:10px}.card-bottom{font-size:9px;padding-top:10px}.story{grid-template-columns:1fr;gap:38px;padding:40px 8% 50px}.story-art{max-width:370px;width:100%;margin:auto}.story-arch{min-height:370px;padding:32px 20px 60px}.story-copy h2{font-size:36px}.story-seal{font-size:24px}.handwritten{font-size:15px;right:-12px}.visit{grid-template-columns:1fr;gap:20px;padding:45px 8%}.visit h2{font-size:45px}.visit::after{font-size:110px;bottom:-40px}footer{flex-wrap:wrap;gap:18px;padding:27px 7%}footer>span:nth-child(2){order:3;width:100%}dialog[open]{display:block;max-height:90dvh;overflow:auto}.modal-image{border-radius:18px 18px 0 0;padding:20px}.modal-image img{width:190px}.modal-image small{margin-top:7px}.modal-content{padding:25px}.modal-content h2{font-size:29px;margin:12px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit,.card-art img{transition:none}.dish-flight,dialog[open]{animation:none}}
dialog{padding:0;border:0;background:transparent;color:var(--ink);border-radius:22px;width:min(780px,calc(100vw - 48px));max-width:none;max-height:88dvh;overflow:visible;box-shadow:none}
dialog[open]{display:block;animation:none}
.modal-shell{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);width:100%;max-height:88dvh;overflow:auto;scrollbar-width:none;border:1px solid var(--line);border-radius:22px;background:var(--cream);box-shadow:0 30px 100px #180d1644}
.modal-shell::-webkit-scrollbar{display:none}
dialog.is-transitioning .modal-shell{clip-path:circle(0% at 50% 48%)}
dialog.is-transitioning.is-closing .modal-shell{clip-path:none}
dialog.is-closing::backdrop{transition:background-color 1.2s ease-in-out,backdrop-filter 1.2s ease-in-out}
dialog.is-returning::backdrop{background:transparent;backdrop-filter:blur(0)}
.close{right:13px;top:13px;width:38px;height:38px;font-size:26px}
.modal-image{min-height:440px;padding:36px 28px;display:flex;align-items:center;justify-content:center;border-radius:22px 0 0 22px;background:radial-gradient(ellipse at 50% 43%,#f6ecda 0,#e6dac1 68%)}
.modal-image img{width:min(100%,340px);height:340px;object-fit:contain;filter:drop-shadow(0 18px 18px #573a3038)}
.modal-image small{margin-top:12px;font-size:10px}
.modal-content{align-self:center;padding:54px 46px 44px}
.modal-content h2{font-size:36px;line-height:1.15;margin:18px 0}
.modal-content p{font-size:13px;line-height:1.9;margin:13px 0;color:var(--muted)}
.modal-row{padding:17px 0;margin-top:20px;font-size:12px}
.modal-content .modal-note{font-size:10px}
.primary{padding:15px 20px;margin-top:11px}
@media(max-width:720px){dialog{width:min(500px,calc(100vw - 28px));max-height:88dvh}.modal-shell{grid-template-columns:1fr;max-height:88dvh;border-radius:20px}.modal-image{min-height:245px;padding:20px 18px 12px;border-radius:20px 20px 0 0}.modal-image img{width:min(100%,235px);height:205px}.modal-image small{margin-top:7px;font-size:9px}.modal-content{padding:25px 28px 27px}.modal-content h2{font-size:30px;margin:11px 0}.modal-content p{font-size:12px;line-height:1.75;margin:9px 0}.modal-row{padding:13px 0;margin-top:14px;font-size:11px}.modal-content .modal-note{font-size:9px}.close{right:11px;top:11px;width:34px;height:34px;font-size:23px}}
@media(prefers-reduced-motion:reduce){body:not(.motion-full) .modal-shell{clip-path:none!important}}
body{background:radial-gradient(ellipse at 50% 8%,#fffaf2 0,transparent 38%),var(--cream)}
header{position:sticky;top:0;background:#f6f0e4ef;backdrop-filter:blur(18px);box-shadow:0 1px 0 #5d422117;transition:box-shadow .25s}
header:hover{box-shadow:0 8px 28px #41271612}
.brand{letter-spacing:-.035em}.brand-mark{filter:drop-shadow(0 4px 5px #a8492d26)}
nav>a:not(.nav-contact){position:relative;padding:10px 0}
nav>a:not(.nav-contact)::after{content:'';position:absolute;right:0;bottom:2px;left:0;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .25s}
nav>a:not(.nav-contact):hover::after{transform:scaleX(1);transform-origin:left}
.nav-contact{background:linear-gradient(135deg,#493023,#2d1d16);box-shadow:0 8px 18px #39241920;transition:transform .2s,box-shadow .2s,background .2s}
.nav-contact:hover{transform:translateY(-2px);box-shadow:0 12px 22px #3924192d}
.hero{isolation:isolate;background:radial-gradient(ellipse at 50% 0%,#e7cda45c,transparent 65%),linear-gradient(180deg,#f7f1e6 0%,#f6f0e4 80%)}
.hero::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 33%,#fff9ed99 0,transparent 39%);pointer-events:none}
.dish-heading h1{letter-spacing:-.035em;text-wrap:balance}
.dish-heading p{max-width:440px;margin-right:auto;margin-left:auto;line-height:1.8}
.selector{width:min(880px,calc(100% - 32px));padding:10px 14px;border:1px solid #ffffffc9;border-radius:28px;background:#fffaf0c9;box-shadow:0 18px 50px #4a2d1a12,inset 0 1px 0 #fff;backdrop-filter:blur(12px)}
.menu-tabs{scrollbar-width:none}.menu-tabs::-webkit-scrollbar{display:none}
.tab{border-color:#dfd3c099;background:#fffdf8d9;box-shadow:0 5px 16px #4a2d1a08;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}
.tab:hover{transform:translateY(-2px);box-shadow:0 9px 20px #4a2d1a12}
.tab[aria-pressed=true]{background:linear-gradient(145deg,#f0e3ca,#e4d2b1);border-color:#bb9065;box-shadow:inset 0 0 0 1px #fff8,0 7px 18px #8b62311c}
.round{background:#fffaf2;box-shadow:0 4px 12px #4a2d1a0d;transition:transform .2s,background .2s,color .2s}
.round:hover{transform:translateY(-2px);background:var(--ink);color:var(--cream)}
.hero-foot{border-color:#ad93654a;color:#8b7964}
.flavor-strip{position:relative;background:linear-gradient(105deg,#3c281e,#533322 52%,#3c281e);font-size:clamp(19px,1.5vw,27px)}
.flavor-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 18% 0,#f5d4a51c,transparent 35%),radial-gradient(ellipse at 86% 100%,#a8492d45,transparent 42%);pointer-events:none}
.flavor-strip>*{position:relative}
.menu-section{background:linear-gradient(180deg,#faf6ed 0%,#f6f0e4 100%)}
.section-heading h2{letter-spacing:-.035em}
.section-heading p{max-width:390px;line-height:2}
.menu-card{position:relative;overflow:hidden;padding:10px;border:1px solid #e1d5c2;border-radius:22px;background:#fffaf1;box-shadow:0 12px 36px #4b2f1b0c;transition:transform .3s,box-shadow .3s,border-color .3s}
.menu-card:hover{transform:translateY(-7px);border-color:#c5a780;box-shadow:0 22px 48px #4b2f1b18}
.card-art{border-radius:15px;background:radial-gradient(ellipse at 50% 30%,#fffaf0,#e9dcc4 70%)}
.menu-card:nth-child(2) .card-art{background:radial-gradient(ellipse at 50% 30%,#f7f7e9,#dfe3d2 72%)}
.menu-card:nth-child(3) .card-art{background:radial-gradient(ellipse at 50% 30%,#fff2e5,#e8cfbc 72%)}
.card-art img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .3s}
.menu-card:hover .card-art img{transform:rotate(-4deg) scale(1.08);filter:drop-shadow(0 15px 13px #49281630)}
.card-index{top:22px;left:22px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffffad;border-radius:50%;background:#fffaf0c9;backdrop-filter:blur(8px);font-size:12px;color:var(--orange)}
.card-body{padding:23px 15px 15px}
.card-body h3{letter-spacing:-.02em}
.card-bottom{font-weight:600}
.image-note{margin-top:28px}
.story{position:relative;overflow:hidden;background:radial-gradient(ellipse at 18% 20%,#607152,#354333 62%,#293529);border:0;color:#f6f0e4}
.story::before{content:'MÁ THẢO';position:absolute;right:-2%;top:2%;font:italic clamp(100px,18vw,300px)/1 'Playfair Display',Georgia,serif;color:#ffffff05;pointer-events:none}
.story-copy{position:relative;color:#e0d8c9;font-size:13px}
.story-copy h2{color:#fff7e9;letter-spacing:-.035em}
.story-copy h2 em{color:#f0bd86}
.story-copy .eyebrow{color:#e7b18f}
.story-copy .text-button{color:#fff7e9;border-color:#d6b38a}
.story-arch{background:linear-gradient(155deg,#a24d35,#723523);box-shadow:0 28px 65px #140e0a40}
.story-seal{color:#fff2db}
.handwritten{color:#593420;border-color:#f5e2bf;background:#f6e8cd;box-shadow:0 14px 28px #140e0a32}
.visit{background:linear-gradient(120deg,#3c281e 0%,#4a3023 58%,#38251c 100%)}
.visit-info>div{padding:18px 20px;margin:0 0 12px;border:1px solid #ffffff1c;border-radius:14px;background:#ffffff08;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.visit-info>div:hover{border-color:#deb78755;background:#ffffff0d}
footer{border-top:1px solid #ddcfba;background:#f2ebdc}
footer>a{transition:color .2s}footer>a:hover{color:var(--orange)}
dialog::backdrop{background:#211710b8;backdrop-filter:blur(12px)}
.modal-shell{box-shadow:0 38px 110px #180d1655}
.modal-image{background:radial-gradient(ellipse at 50% 35%,#fff8e9,#e6dac1 76%)}
.primary{background:linear-gradient(135deg,#493023,#2d1d16);box-shadow:0 10px 20px #35201524;transition:transform .2s,box-shadow .2s,background .2s}
.primary:hover{transform:translateY(-2px);box-shadow:0 14px 25px #35201535}
@media(min-width:1600px){
  body{font-size:clamp(15px,.72vw,19px)}
  header{height:clamp(104px,5.2vw,142px);padding:0 clamp(7%,8vw,210px)}
  .brand{font-size:clamp(34px,2vw,50px);gap:16px}.brand-mark{font-size:clamp(42px,2.5vw,62px)}.brand small{font-size:10px;letter-spacing:4px}
  nav{font-size:clamp(12px,.74vw,17px);gap:clamp(38px,2.5vw,68px)}.nav-contact{padding:17px 28px}
  .hero{min-height:clamp(900px,54vw,1180px);padding-top:clamp(500px,29vw,720px)}
  .turntable{--table-size:clamp(1180px,55vw,1500px);--table-top:clamp(-980px,-35vw,-740px);--dish-size:clamp(340px,15vw,430px);--dish-radius:clamp(390px,17vw,480px);height:clamp(430px,25vw,620px)}
  .hero-side{top:clamp(210px,10vw,300px)}.hero-side .eyebrow{font-size:13px}.hero-side p:not(.tiny){font-size:clamp(42px,2.4vw,62px)}.tiny{font-size:17px;color:#75624f}.stamp{font-size:12px;padding:25px 18px}.stamp b{font-size:28px}
  .dish-heading .eyebrow{font-size:14px;font-weight:600;letter-spacing:2px}.dish-heading h1{font-size:clamp(54px,3vw,76px);max-width:min(1280px,calc(100% - 80px));margin:20px auto 18px;line-height:1.16}.dish-heading p{font-size:20px;max-width:700px;margin:14px auto;line-height:1.7}.dish-actions{margin-top:24px;gap:34px}.text-button{font-size:14px}#dish-price,.dish-heading .text-button{font-size:18px}#dish-price{font-weight:500}
  .selector{max-width:1120px;margin:34px auto 32px;gap:28px}.round{width:52px;height:52px;font-size:24px}.menu-tabs{gap:14px}.tab{min-width:230px;padding:15px 22px 15px 14px;gap:15px;border-radius:14px}.tab img{width:68px;height:68px}.tab small{font-size:11px}.tab strong{font-size:18px;font-weight:600}
  .hero-foot{margin-top:38px;padding:26px 0;font-size:10px;letter-spacing:1.6px}
  .flavor-strip{padding:32px 6%;font-size:clamp(25px,1.5vw,36px);gap:26px}
  .menu-section{padding:clamp(110px,6vw,160px) 9% clamp(90px,5vw,130px)}.section-heading{margin-bottom:48px}.section-heading h2,.visit h2{font-size:clamp(60px,3.4vw,86px)}.section-heading p{font-size:15px}.menu-grid{gap:clamp(30px,2vw,52px)}.card-art{height:clamp(330px,20vw,490px)}.card-body{padding:28px 0}.card-body h3{font-size:clamp(30px,1.7vw,42px)}.card-body p{font-size:14px}.card-bottom{font-size:13px;padding-top:20px}.image-note{font-size:11px}
  .story{padding:clamp(100px,6vw,160px) 9%;gap:10%}.story-arch{min-height:clamp(460px,30vw,700px);padding:60px 28px 90px}.story-seal{font-size:30px}.story-seal em{font-size:24px}.handwritten{font-size:22px;padding:17px 22px}.story-copy{font-size:15px}.story-copy h2{font-size:clamp(48px,2.8vw,70px)}.story-copy .text-button{font-size:14px}
  .visit{padding:clamp(90px,5vw,140px) 11%;gap:14%}.visit-info span{font-size:10px}.visit-info p{font-size:16px;margin:14px 0}footer{padding:40px 8%;font-size:11px}.footer-brand{font-size:32px}
  dialog{width:min(1040px,calc(100vw - 80px));max-height:88dvh}.modal-shell{max-height:88dvh;border-radius:28px}.modal-image{min-height:560px;padding:46px 38px;border-radius:28px 0 0 28px}.modal-image img{width:min(100%,450px);height:440px}.modal-image small{font-size:12px}.modal-content{padding:70px 64px 58px}.modal-content h2{font-size:clamp(42px,2.3vw,58px)}.modal-content p{font-size:15px}.modal-row{padding:21px 0;font-size:14px}.modal-content .modal-note{font-size:12px}.primary{padding:18px 24px;font-size:15px}
}

.site-footer{position:relative;display:block;overflow:hidden;padding:clamp(52px,6vw,88px) max(7%,calc((100% - 1360px)/2)) 22px;border:0;background:radial-gradient(ellipse at 14% 0%,#80513755,transparent 38%),linear-gradient(125deg,#302018,#39251b 58%,#2a1b15);color:#f5eee1}
.footer-main{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:clamp(38px,6vw,100px);padding-bottom:54px;border-bottom:1px solid #f5eee126}
.footer-brand-lockup{display:inline-flex;align-items:center;gap:14px;color:inherit}
.footer-mark{display:grid;width:48px;height:48px;place-items:center;border:1px solid #d59a695e;border-radius:50%;color:#e2a77c;font-size:25px}
.footer-brand{display:flex;flex-direction:column;color:#fff6e9;font:600 31px 'Playfair Display',serif;letter-spacing:-.04em}
.footer-brand small{margin-top:4px;color:#d6b99c;font:500 8px 'Be Vietnam Pro',sans-serif;letter-spacing:2.4px}
.footer-identity>p{margin:26px 0 0;color:#f3e5d5;font:400 clamp(23px,2vw,31px)/1.35 'Playfair Display',serif}
.footer-identity>p em{color:#d99569}
.footer-links,.footer-invite{display:flex;flex-direction:column;align-items:flex-start;padding-top:10px}
.footer-label{margin-bottom:20px;color:#d3a27a;font-size:9px;font-weight:700;letter-spacing:2px}
.footer-links>a{display:flex;justify-content:space-between;gap:16px;width:100%;padding:0 0 14px;color:#f3e8da;font-size:13px;transition:color .2s,transform .2s}
.footer-links>a span{color:#d99569;opacity:.7}
.footer-links>a:hover{color:#e9ad81;transform:translateX(3px)}
.footer-invite>p{margin:0 0 22px;color:#f3e8da;font:400 18px/1.65 'Playfair Display',serif}
.footer-cta{display:inline-flex;align-items:center;gap:20px;padding:13px 17px;border:1px solid #d9956970;border-radius:999px;color:#fff6e9;font-size:11px;transition:background .2s,border-color .2s,transform .2s}
.footer-cta span{color:#e6a276;font-size:17px;transition:transform .2s}
.footer-cta:hover{transform:translateY(-2px);border-color:#d99569;background:#ffffff0b}.footer-cta:hover span{transform:translateX(3px)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;color:#c5b3a2;font-size:9px;letter-spacing:.3px}
.footer-bottom a{color:#f1dfcd;transition:color .2s}.footer-bottom a:hover{color:#e9ad81}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid #e5c29b40;border-radius:999px;padding:8px 12px;background:transparent;color:#f1dfcd;font:inherit}
.motion-toggle::before{content:'';width:6px;height:6px;border-radius:50%;background:#988b7c}
.motion-toggle[aria-pressed=true]::before{background:#efbd86}
.motion-toggle:hover{border-color:#efbd86}
@media(max-width:720px){.site-footer{padding:46px 7% 20px}.footer-main{grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:35px}.footer-identity{grid-column:1/-1}.footer-identity>p{margin-top:18px;font-size:25px}.footer-brand{font-size:28px}.footer-invite>p{font-size:16px}.footer-bottom{flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:8px}.footer-bottom span:nth-child(2){order:3;width:100%}}
@media(max-width:420px){.footer-main{grid-template-columns:1fr;gap:26px}.footer-identity{grid-column:auto}.footer-links,.footer-invite{padding-top:0}.footer-label{margin-bottom:13px}.footer-links>a{padding-bottom:11px}.footer-invite>p{margin-bottom:16px}}

.site-header{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;height:104px;padding-inline:6%;border-bottom:1px solid #d6a77b40;background:linear-gradient(115deg,#39271e,#2e2019);color:#fff5e5;box-shadow:0 8px 28px #25180f24}
.site-header .brand{justify-self:start;gap:14px;color:#fff5e5;font-size:34px;white-space:nowrap}
.site-header .brand-mark{display:grid;flex:none;width:52px;height:52px;place-items:center;border:1px solid #deb08070;border-radius:50%;background:#ffffff08;color:#e7af7b;font-size:28px;filter:none}
.site-header .brand small{color:#dbc0a3;font-size:8px;letter-spacing:2.7px}
.site-header .header-navigation{display:flex;gap:22px;padding:8px 24px;border:1px solid #e5c29b30;border-radius:999px;background:#ffffff06;font-size:14px;font-weight:500;white-space:nowrap}
.site-header .header-navigation>a{display:inline-flex;padding:10px 0;color:#f2e6d5;transition:color .2s}
.site-header .header-navigation>a::after{display:none}
.site-header .header-navigation>a:hover{color:#efbd86}
.header-nav-divider{color:#c99162;font-size:12px}
.site-header .nav-contact{justify-self:end;padding:15px 22px;border:1px solid #f3c99e5c;background:#edc39a;color:#3b281d;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 6px 20px #160d0924;transition:background .2s,transform .2s}
.site-header .nav-contact:hover{background:#ffe0bd;color:#3b281d;transform:translateY(-2px)}
.site-header .nav-contact span{margin-left:18px;color:#75452c}
@media(min-width:1600px){.site-header{height:124px;padding-inline:7%;gap:40px}.site-header .brand{font-size:43px}.site-header .brand-mark{width:60px;height:60px;font-size:32px}.site-header .brand small{font-size:10px}.site-header .header-navigation{font-size:19px;gap:30px;padding:10px 30px}.site-header .nav-contact{font-size:18px;padding:18px 26px}}
@media(max-width:1000px){.site-header{height:90px;padding-inline:4%;gap:16px}.site-header .brand{font-size:28px;gap:10px}.site-header .brand-mark{width:42px;height:42px;font-size:24px}.site-header .header-navigation{gap:13px;padding:5px 16px;font-size:12px}.site-header .nav-contact{padding:13px 16px;font-size:12px}.site-header .nav-contact span{margin-left:10px}}
@media(max-width:720px){.site-header{grid-template-columns:1fr auto;height:auto;gap:14px;padding:16px 5% 12px}.site-header .brand{font-size:27px}.site-header .brand small{font-size:7px;letter-spacing:2px}.site-header .header-navigation{grid-column:1/-1;grid-row:2;justify-self:center;justify-content:center;width:100%;padding:3px 14px;font-size:12px;gap:24px}.site-header .nav-contact{grid-column:2;grid-row:1;padding:12px 15px;font-size:11px}.site-header .header-navigation>a{padding:7px 0}}
@media(prefers-reduced-motion:reduce){.site-header .nav-contact{transition:none}}