:root {
  --menu-teal: #335e64;
  --menu-gold: #fcb614;
  --menu-cream: #FEEFBB;
  --menu-paper: #fffdf7;
  --menu-ink: #264f54;
  --menu-line: #000;
  --menu-pattern: url("assets/menu-hbg.webp");
}

@font-face {
  font-family: "Hien Khanh";
  src: url("assets/font/HIEN%20KHANH%203.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("assets/font/Chivo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--menu-ink);
  background: var(--menu-paper);
  font-family: "Chivo", Arial, Helvetica, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;
}

.menu-categories {
  position: sticky;
  top: 96px;
  z-index: 19;
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid var(--menu-gold);
  background: var(--menu-paper);
}

.menu-categories .container {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  width: max-content;
  max-width: min(1360px, calc(100% - 80px));
  margin: 0 auto;
}

.menu-categories a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 74px;
  padding: 8px 20px 9px;
  color: var(--menu-ink);
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 20px;
  line-height: 1.24;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.menu-categories a.is-active,
.menu-categories a[aria-current="true"] {
  background: var(--menu-gold);
}

.menu-categories .vi,
.menu-categories .en {
  display: block;
}

.menu-main {
  background: var(--menu-paper);
}

.menu-section {
  padding: 0;
  background: var(--menu-paper);
  position: relative;
}

.menu-section .container {
  padding: 0 0 72px;
}

.menu-section .head {
  margin-bottom: 20px;
  padding: 100px 0 0;
}

.menu-section .head::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 371px;
  background: var(--menu-pattern) center top / 720px auto repeat, var(--menu-cream);
}

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

.menu-section .title {
  margin: 0;
  color: var(--menu-ink);
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 64px;
  line-height: 1;
  text-transform: uppercase;
}

.menu-section .desc {
  margin: 9px 0 0;
  color: #424b4d;
  font-size: 18px;
}

.has-sizes .head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 9px 27px;
}

.has-sizes .title {
  grid-column: 1;
  grid-row: 1;
}

.has-sizes .sizes {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.has-sizes .desc {
  grid-column: 1 / -1;
}

.sizes {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  color: #bf2e1f;
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 32px;
  text-transform: uppercase;
}

.sizes span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid var(--menu-line);
  color: #000;
  font-size: 24px;
}

.section-image {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 323px;
  margin-top: 18px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px rgba(38, 79, 84, .15);
  object-fit: cover;
}

.legend {
  display: flex;
  gap: 22px;
  margin: 14px 0 27px;
  color: #000;
  font-size: 18px;
}

.gf-icon,
.spicy-icon,
.chef-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 .15em;
  vertical-align: -.18em;
}

.gf-icon {
  background: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M24 12c0 6.667-5.333 12-12 12S0 18.667 0 12 5.333 0 12 0s12 5.333 12 12" fill="%23000"/%3E%3Cpath d="M11.556 11.112v2.222c0 .889-.223 1.555-.445 2.222-.444.667-.889 1.111-1.555 1.333-.445.445-1.334.667-2 .667-.89 0-1.556-.222-2.223-.445-.666-.444-1.11-.888-1.333-1.555-.444-.444-.444-1.111-.444-2v-3.111c0-.889.222-1.556.444-2.222.222-.667.667-1.111 1.333-1.556.667-.444 1.334-.444 2.223-.444.666 0 1.333.222 1.777.444.667.222 1.111.667 1.334 1.111.444.445.666 1.111.666 1.778H9.111c0-.222-.222-.444-.222-.667-.222-.222-.445-.222-.667-.444-.222 0-.444-.222-.666-.222-.445 0-.667 0-.89.222l-.888.889c0 .222-.222.666-.222 1.11v3.334c0 .445 0 .667.222.89l.666.666c.223.222.667.222 1.112.222.444 0 .666 0 .888-.222.445-.445.445-.667.667-.89.222-.221.222-.666.222-1.11v-.223H7.778v-2zm2-4.889h2v11.11h-2zm.888 0h6.445v2h-6.445zm0 4.666H20v2h-5.556z" fill="%23fff"/%3E%3C/svg%3E') center / contain no-repeat;
}

.spicy-icon {
  background: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.778.184c-1.333 1.333-.222 4.222-.222 4.222C0 6.406.445 9.517.445 9.517l2-5.11C2 1.294 3.11.628 3.11.628c.222-.445-.666-.89-1.333-.445" fill="%236b9a40"/%3E%3Cpath d="M2.222.406c-1.11 1.111 0 4 0 4-1.778 1.778-1.11 3.556-1.11 4.667l8-4.667c-.89-2.222-5.779-1.11-5.779-1.11-1.11-1.779 0-2.668 0-2.668s-.444 0-1.11-.222" fill="%238dc63f"/%3E%3Cpath d="M16.445 18.406c-4-3.778-4.223-6.667-4.223-10 0-2.667-1.555-4.444-3.333-4.889C7.778 3.295 5.11 3.073 6 3.962c.889.888-3.333.222-3.333 2 0 1.333-1.111-.223-2.223 2.888-1.333 3.112 0 5.334 1.778 7.334C5.778 19.962 14 27.073 22.445 22.628c4.444-2.222-2.223-.666-6-4.222" fill="%23ed4040"/%3E%3C/svg%3E') center / contain no-repeat;
}

.chef-icon {
  width: 1.3em;
  background: url('data:image/svg+xml,%3Csvg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23a)"%3E%3Cpath d="m9.832 1.037 2.42 3.852c.152.148.303.296.454.296l4.84.148c.454 0 .605.444.303.889l-3.177 3.407c-.15.148-.15.297-.15.445l1.21 4.296c.15.445-.303.74-.757.593l-4.538-1.63h-.454L5.9 15.851c-.453.297-.907 0-.907-.444l.454-4.592c0-.149 0-.297-.152-.445L1.513 7.703c-.303-.296-.151-.889.302-.889l4.84-1.185c.152 0 .303-.148.454-.296l1.816-4.296c0-.297.605-.297.907 0" fill="%23c12628"/%3E%3Cpath d="m8.47.296 2.42 3.852c.152.148.303.296.454.296h4.84c.454 0 .757.593.454.89l-3.327 3.555c-.152 0-.152.296-.152.444l1.21 4.297c.152.444-.302.74-.756.592l-4.538-1.63h-.453l-4.084 2.52c-.454.295-.908 0-.908-.445l.454-4.593c0-.148 0-.296-.151-.444L.15 6.815c-.302-.148-.151-.74.303-.89l4.84-1.184c.151 0 .302-.148.454-.297L7.563.148a.595.595 0 0 1 .907.148" fill="%23fab517"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="a"%3E%3Cpath fill="%23fff" d="M0 0h18v16H0z"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E') center / contain no-repeat;
}

.dish-grid {
  display: grid;
  gap: 25px 56px;
}

.dish-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dish-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dish-grid.compact {
  gap: 20px 38px;
}

.dish-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  min-width: 0;
}

.dish-top {
  display: contents;
  margin-bottom: 6px;
}

.price {
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid #111;
  color: #000;
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 24px;
  line-height: 1;
}

.dish-name,
.subhead-title {
  display: block;
  margin: 0;
  color: #111;
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 20px;
  line-height: 1.08;
  text-transform: uppercase;
}
.subhead-title {
  font-size: 32px;
}

.dish-card .dish-name {
  grid-column: 2;
  grid-row: 1;
}

.dish-card p,
.notice p {
  margin: 0;
  color: #4f5657;
  font-size: 16px;
  line-height: 1.45;
}

.dish-card p {
  grid-column: 2;
}

.dish-card .dish-name + p {
  margin-top: 6px;
}

.dish-card p + p {
  margin-top: 3px;
  color: #777f80;
}

.addons {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid #a9a49a;
}

.addons .subhead-title {
  margin-bottom: 15px;
  color: #cf2e1f;
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.addon-grid span {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 33px;
  color: #111;
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.addon-grid strong {
  font-size: 24px;
  padding: 0 12px;
  border: 1px solid #111;
}

.notice {
  margin-top: 39px;
  padding-top: 21px;
  border-top: 1px solid #a9a49a;
}

.notice .subhead-title {
  margin-bottom: 12px;
  color: #cf2e1f;
}

.menu-footer {
  padding: 0;
  background: var(--menu-paper);
}

.cta-book {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  background: var(--menu-gold);
  color: #000;
  font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
  font-size: 36px;
  text-transform: uppercase;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

@media (max-width: 1138px) {
  .menu-categories {
    position: sticky;
    overflow: visible;
    border-top: 0;
    background: var(--menu-paper);
  }

  .menu-categories::before {
    content: "+";
    display: flex;
    align-items: center;
    height: 38px;
    padding-left: 24px;
    color: #fff;
    background: var(--menu-teal);
    font-family: "Chivo", Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1;
  }

  .menu-categories::after {
    content: "OUR MENU";
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    height: 38px;
    transform: translateX(-50%);
    color: #fff;
    font-family: "Hien Khanh", Impact, "Arial Black", sans-serif;
    font-size: 16px;
    line-height: 1;
  }

  .menu-categories.is-open::before {
    content: "-";
  }

  .menu-categories .container {
    display: none;
    flex-direction: column;
    width: 100%;
    min-width: 100%;
    background: var(--menu-cream);
  }

  .menu-categories.is-open .container {
    display: flex;
  }

  .menu-categories a {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .25em;
    min-width: 0;
    min-height: 42px;
    padding: 0 28px;
    font-size: 16px;
  }

  .menu-categories a .vi,
  .menu-categories a .en {
    display: inline;
  }

  .menu-categories a .vi::after {
    content: "";
  }
}

@media (max-width: 767px) {
  .container {
    width: calc(100% - 22px);
  }

  .menu-categories {
    top: 54px;
  }

  .menu-section {
    padding: 0;
  }

  .menu-section .container {
    width: calc(100% - 22px);
    padding: 0 0 34px;
  }

  .menu-section .head {
    padding-top: 28px;
  }

  .menu-section .head::before {
    height: 200px;
  }

  .menu-section .title {
    font-size: 24px;
  }

  .has-sizes .head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .has-sizes .title,
  .has-sizes .sizes,
  .has-sizes .desc {
    grid-column: 1;
    grid-row: auto;
    gap: 1rem;
  }

  .section-image {
    height: 148px;
  }

  .legend {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .dish-grid.two-col,
  .dish-grid.three-col,
  .addon-grid {
    grid-template-columns: 1fr;
  }

  .dish-name,
  .subhead-title {
    font-size: 20px;
  }

  .dish-card p,
  .notice p {
    font-size: 16px;
  }

  .cta-book {
    min-height: 42px;
    font-size: 20px;
  }
  .sizes {
    order: 1;
  }
}