.poster-menu{
position:relative;
padding-bottom:220px;
top:115px;
}

/* WAVE BACKGROUND */

.poster-menu::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);

bottom:0;
width:100vw;      /* full màn hình */
height:220px;

background:url("/wp-content/themes/Quaotea/images/menubg.webp")
no-repeat bottom center;

background-size:100% 100%;
pointer-events:none;
z-index:0;
}

.poster-menu > *{
position:relative;
z-index:1;
}

/* GRID */

.menu-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
grid-auto-flow:dense;
}

/* TITLES */

.menu-title{
font-size:34px;
font-weight:800;
color:#243f55;
margin-bottom:20px;
}

/* LIST */

.menu-list{
list-style:none;
padding:0;
margin:0;
}

/* ITEM */

.menu-item{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
align-items:center;
padding:6px 0;
}

/* LINK */

.menu-link{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
text-decoration:none;
color:#243f55;
transition:.25s;
}

.menu-link:hover{
color:#63bfff;
transform:translateX(6px);
}

/* PRICE */

.price{
display:flex;
justify-content:flex-end;
gap:14px;
font-size:22px;
font-weight:800;
letter-spacing:2px;
}

.price span{
min-width:30px;
text-align:right;
}

/* SECTION */

.menu-section{
position:relative;
padding-right:255px;
}

/* MATCHA */

.matcha-box{
position:relative;
padding: 120px 60px 30px;    
height: 375px;
}

.matcha-bg{
position:absolute;
inset:0;
background:#dff1ff;
border-radius:30px;
z-index:0;

/* shape control */
  --r:30px;   /* border radius */
  --s:50px;   /* size of notch */
  --x:225px;   /* horizontal position */
  --y:0px;    /* vertical position */

--_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
--_g:conic-gradient(at var(--r) var(--r),#000 75%,#0000 0);
--_d:(var(--s) + var(--r));

-webkit-mask:
calc(var(--_d) + var(--x)) 0 var(--_m),
0 calc(var(--_d) + var(--y)) var(--_m),
radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) 
calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
var(--_g) calc(var(--_d) + var(--x)) 0,
var(--_g) 0 calc(var(--_d) + var(--y));

mask-repeat:no-repeat;
-webkit-mask-repeat:no-repeat;
}

.matcha-box .menu-cat{
right:-55px;
top:-115px;
width:355px;
position:absolute;
z-index:5;
}

/* COFFEE */
.coffee-box{
position:relative;
grid-column:span 2;
  padding:120px 60px 30px;
}

.coffee-bg{
position:absolute;
inset:0;
background:#dff1ff;

  border-radius:30px;
z-index:0;

  /* shape control */
  --r:30px;   /* border radius */
  --s:50px;   /* size of notch */
  --x:315px;   /* horizontal position */
  --y:0px;    /* vertical position */
--_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
--_g:conic-gradient(at var(--r) var(--r),#000 75%,#0000 0);
--_d:(var(--s) + var(--r));

-webkit-mask:
calc(var(--_d) + var(--x)) 0 var(--_m),
0 calc(var(--_d) + var(--y)) var(--_m),
radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) 
calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
var(--_g) calc(var(--_d) + var(--x)) 0,
var(--_g) 0 calc(var(--_d) + var(--y));

mask-repeat:no-repeat;
-webkit-mask-repeat:no-repeat;
}

.coffee-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

/* TOPPING */

.topping{
grid-column:span 2;
border-top:2px dashed #cdd8e5;
padding-top:30px;
}

.topping .menu-list{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px 40px;
}

/* CAT */

.menu-cat{
position:absolute;
pointer-events:none;
}

/* CAT POSITIONS */

.tra-sua .menu-cat{
right:20px;
top:2px;
width:300px;
}

.sua-tuoi .menu-cat{
right:-100px;
top:-55px;
width:475px;
}

.soda .menu-cat{
right:-5px;
top:0;
width:265px;
}

.tra .menu-cat{
left:155px;
top:-65px;
width:315px;
}

.ca-phe .menu-cat{
left:555px;
top:-105px;
width:265px;
}

.cacao .menu-cat{
right:10px;
top:-85px;
width:245px;
}

/* BANH QUE FIX */

.banh-que{
position:relative;
}

.banh-que .menu-section{
padding-right:0;
padding-left:175px;
}

.banh-que .menu-item{
grid-template-columns:1fr auto;
}

.banh-que .menu-cat{
left:-10px;
top:-55px;
width:175px;
}

/* LEAF */

.leaf{
position:absolute;
width:60px;
animation:leaf 6s linear infinite;
}

.leaf1{top:50px;left:50%;width: 45px;}
.leaf2{bottom:80px;left:30%;}
.leaf3{bottom: 115px;left: 0;width: 75px !important;}
.leaf4{bottom: -25px;left: 50%;width: 125px !important;}
.leaf5{top: 35px;right: 35%;width: 85px !important;}
.leaf6{top: -35px;right: 25%;width: 55px !important;}
.leaf7{top: 35px;right: 15%;width: 75px !important;}
.leaf8{bottom: 135px;right: 25%;width: 45px !important;}
.leaf9{bottom: -15px;right:0;width: 135px !important;}
.leaf10{top:-95px;right:-5px;z-index: 2;}

.hatcf{bottom:0;left:-5px;z-index: 2;}
.hatcf2{bottom:115px;left:35%;width:95px}
@keyframes leaf{
0%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(20px) rotate(20deg)}
100%{transform:translateY(0) rotate(0deg)}
}

/* QUICKVIEW */

#quickview{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:white;
padding:30px;
border-radius:20px;
display:none;
z-index:999;
}

/* MOBILE */

@media(max-width:768px){

.menu-grid{
grid-template-columns:1fr;
gap:40px;
}

.menu-title{
font-size:26px;
}

.menu-section{
padding-right:0;
}

.menu-cat{
position:relative;
display:block;
margin:20px auto 0;
width:120px;
}

.coffee-box{
grid-column:span 1;
}

.topping{
grid-column:span 1;
}

.menu-item{
grid-template-columns:1fr auto;
}

}

.col.soda{
grid-column:1;
}

.col.tra{
grid-column:2;
}

.col.banh-que{
grid-column:1;
margin-top:-185px;
}


/* BANH QUE LAYOUT */

.banh-que .menu-link{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
}

.banh-que .menu-item{
grid-template-columns:1fr;
}

.banh-que .price{
justify-content:flex-start;
letter-spacing:1px;
}

.col.sua-tuoi {
    max-height: 265px;
    top: 65px;
}


/* =========================
MOBILE RESPONSIVE
========================= */

@media (max-width:768px){

/* GRID CHA */

.menu-grid{
grid-template-columns:1fr !important;
gap:35px;
}

/* RESET CÁC GRID CŨ */

.col,
.col.soda,
.col.tra,
.col.banh-que{
grid-column:auto !important;
margin-top:0 !important;
}

/* BOX */

.coffee-box,
.matcha-box{
grid-column:auto !important;
padding:40px 25px !important;
}

/* COFFEE GRID */

.coffee-grid{
grid-template-columns:1fr !important;
gap:20px;
}

/* SECTION */

.menu-section{
padding-right:0 !important;
}

/* MENU LIST */

.menu-list{
display:block;
}

/* ITEM */

.menu-item{
display:flex !important;
justify-content:space-between;
align-items:center;
gap:20px;
padding:8px 0;
}

/* LINK */

.menu-link{
display:flex !important;
justify-content:space-between;
align-items:center;
width:100%;
gap:15px;
}

/* TÊN MÓN */

.menu-link span:first-child{
flex:1;
white-space:normal;
word-break:normal;
}

/* PRICE */

.price{
display:flex;
gap:10px;
font-size:18px;
font-weight:700;
white-space:nowrap;
}

/* TOPPING */

.topping{
grid-column:auto !important;
}

.topping .menu-list{
display:block;
}

.topping .menu-item{
display:flex !important;
justify-content:space-between;
}

/* SHAPE OFF */

.matcha-bg,
.coffee-bg{
-webkit-mask:none !important;
mask:none !important;
border-radius:20px;
}

/* HIDE CATS */

.menu-cat{
display:none !important;
}

/* TITLE */

.menu-title{
font-size:26px;
margin-bottom:15px;
}


.col.banh-que .menu-section{
padding:0 !important;
text-align:left !important;
}

.col.banh-que .menu-link{
display:flex;
justify-content:space-between;
    flex-direction: row!important;
width:100%;
}

.col.banh-que .name{
text-align:left;
flex:1;
}

.col.banh-que .price{
text-align:right;
white-space:nowrap;
font-weight:700;
}

.col.sua-tuoi{top:0}
}