*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family:"Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif;
  background:#edf4f6;
  color:#062033;
}
.menuHeader{
  width:calc(100% - 36px);
  max-width:1780px;
  margin:18px auto 14px;
  padding:18px 26px;
  border-radius:18px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 12%,rgba(30,201,145,.22),transparent 26%),
    radial-gradient(circle at 4% 95%,rgba(30,201,145,.18),transparent 24%),
    linear-gradient(135deg,#083f38 0%,#075747 48%,#063f38 100%);
  box-shadow:0 7px 22px rgba(0,0,0,.2);
  display:grid;
  grid-template-columns:1.2fr .9fr;
  grid-template-areas:
    "brand phone"
    "notice notice"
    "foot foot";
  gap:14px 22px;
}
.brandBox{grid-area:brand;display:flex;align-items:center;gap:16px}
.brandLogo{width:78px;height:78px;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.brandText span,.brandText small{display:block;font-weight:900;line-height:1.12}
.brandText span{font-size:17px}
.brandText strong{display:block;margin:4px 0 2px;font-size:30px;line-height:1;font-weight:900;letter-spacing:.4px}
.brandText small{font-size:16px}
.headerInfo{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;align-self:center}
.phoneInfo{grid-area:phone;justify-self:end;min-width:360px}
.roundIcon{
  width:40px;height:40px;border-radius:50%;
  border:3px solid #19b978;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;background:rgba(0,0,0,.16)
}
.phoneIcon{font-size:21px}
.headerInfo strong,.headerInfo span{display:block;line-height:1.28}
.headerInfo strong{font-size:15px;font-weight:900}.headerInfo span{font-size:14px;font-weight:700}
.noticeRow{
  grid-area:notice;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(31,207,142,.45);
  border-bottom:1px solid rgba(31,207,142,.45);
}
.noticeItem{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:11px;
  align-items:center;
  padding:12px 18px;
  border-right:1px solid rgba(255,255,255,.22);
}
.noticeItem:last-child{border-right:0}
.checkIcon{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#087047;border:4px solid #22bd7c;
  font-size:20px;font-weight:900;
}
.noticeItem strong{display:block;font-size:14px;font-weight:900;line-height:1.22;margin-bottom:3px}
.noticeItem span:not(.checkIcon){display:block;font-size:12px;font-weight:600;line-height:1.32;color:#eefbf7}
.headerFoot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:12px}
.menuTitle span{display:block;font-size:13px;font-weight:700;opacity:.92}
.menuTitle strong{display:block;font-size:21px;font-weight:900;line-height:1.15}
.versionBadge{padding:8px 15px;border-radius:999px;background:#16b970;font-size:13px;font-weight:900;white-space:nowrap}
.menuShell{width:calc(100% - 36px);max-width:1780px;margin:0 auto 28px}
.toolbar{
  display:grid;
  grid-template-columns:minmax(260px,520px) 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}
.toolbar input{
  width:100%;
  border:1px solid #c8d9e2;
  border-radius:8px;
  background:#fff;
  color:#062033;
  font:inherit;
  font-size:17px;
  padding:15px 16px;
  outline:none;
}
.toolbar input:focus{border-color:#108066;box-shadow:0 0 0 3px rgba(16,128,102,.12)}
#statusText{justify-self:end;color:#0b5b8a;font-weight:800}
.categoryTabs{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:0 0 14px;
  scrollbar-width:thin;
}
.categoryTabs button{
  flex:0 0 auto;
  min-width:150px;
  min-height:58px;
  border:1px solid #c8d9e2;
  border-radius:8px;
  background:#fff;
  color:#064468;
  font:inherit;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}
.categoryTabs button.active{background:#108066;color:#fff;border-color:#108066}
.menuGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:18px;
}
.foodCard{
  position:relative;
  overflow:hidden;
  border:1px solid #c8d9e2;
  border-radius:9px;
  background:#fff;
  box-shadow:0 2px 9px rgba(0,0,0,.12);
  cursor:pointer;
}
.foodPhoto{
  position:relative;
  aspect-ratio:4/3;
  background:#e7eef3;
}
.foodPhoto img,.noImage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  object-fit:cover;
  color:#286385;
  font-weight:700;
}
.priceBadge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding:6px 10px;
  border-radius:5px;
  background:#1484c4;
  color:#fff;
  font-size:15px;
  font-weight:900;
}
.foodName{
  min-height:56px;
  display:flex;
  align-items:center;
  padding:10px 13px;
  background:#fff;
  color:#062033;
  font-size:17px;
  font-weight:900;
  line-height:1.25;
}
.empty{
  grid-column:1/-1;
  padding:28px;
  text-align:center;
  color:#57758a;
  background:#fff;
  border:1px solid #c8d9e2;
  border-radius:9px;
  font-weight:800;
}
.modalBackdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.42);
}
.modalBackdrop[hidden]{display:none}
.contactModal{
  position:relative;
  width:min(680px,100%);
  border-radius:12px;
  background:#fff;
  color:#062033;
  padding:22px;
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}
.closeBtn{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:transparent;
  color:#062033;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
}
.contactModal h2{margin:0 28px 10px 0;font-size:22px;line-height:1.25}
.contactModal p{margin:0 0 16px;color:#456275;line-height:1.45}
.contactActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.contactBtn{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  text-align:center;
  padding:12px;
}
.contactBtn span{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.2);
  font-weight:900;
}
.zaloBtn{background:#0b8cff}
.messengerBtn{background:#7b4dff}
.hotlineBtn{background:#13a76f}
.contactModal small{display:block;text-align:center;color:#617586}
@media(max-width:1320px){
  .menuGrid{grid-template-columns:repeat(4,minmax(170px,1fr))}
  .menuHeader{grid-template-columns:1fr .95fr}
}
@media(max-width:980px){
  .menuHeader{width:100%;margin:0 0 12px;border-radius:0;padding:12px 14px;grid-template-columns:1fr;grid-template-areas:"brand" "phone" "notice" "foot";gap:10px}
  .brandLogo{width:62px;height:62px}.brandText span{font-size:13px}.brandText strong{font-size:23px}.brandText small{font-size:13px}
  .phoneInfo{justify-self:start;min-width:0}.headerInfo strong{font-size:13px}.headerInfo span{font-size:12px}
  .noticeRow{grid-template-columns:1fr}.noticeItem{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:7px 0}.noticeItem:last-child{border-bottom:0}
  .noticeItem strong{font-size:12px}.noticeItem span:not(.checkIcon){font-size:11px}
  .checkIcon{width:30px;height:30px;border-width:3px;font-size:16px}.noticeItem{grid-template-columns:34px 1fr}
  .menuShell{width:calc(100% - 20px)}
  .toolbar{grid-template-columns:1fr}#statusText{justify-self:start}
  .menuGrid{grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px}
  .categoryTabs button{min-width:128px}
}
@media(max-width:620px){
  .phoneInfo{display:grid}
  .noticeRow{display:none}
  .menuGrid{grid-template-columns:repeat(2,minmax(130px,1fr));gap:10px}
  .foodName{font-size:15px;min-height:50px}
  .priceBadge{font-size:13px;padding:5px 8px}
  .categoryTabs{gap:8px}.categoryTabs button{min-width:104px;min-height:50px;font-size:14px}
  .contactActions{grid-template-columns:1fr}.contactBtn{min-height:58px}
  .contactModal h2{font-size:18px}
}
html,body,button,input,select,textarea{font-family:"Roboto",Arial,"Helvetica Neue",sans-serif!important}


/* Contact modal - refreshed mockup style */
.modalBackdrop{background:rgba(4,22,18,.56);backdrop-filter:blur(2px)}
.contactModal{width:min(860px,100%);border-radius:20px;padding:34px 42px 28px;box-shadow:0 28px 80px rgba(0,0,0,.34)}
.closeBtn{top:18px;right:22px;width:42px;height:42px;border-radius:50%;font-size:34px;line-height:38px}
.closeBtn:hover{background:#eef4f2}
.contactHeader{display:flex;align-items:center;gap:22px;padding:4px 42px 22px 4px}
.contactLogoWrap{width:108px;height:108px;flex:0 0 108px;border-radius:50%;overflow:hidden;background:#e9f3ef;display:flex;align-items:center;justify-content:center}
.contactLogo{width:100%;height:100%;object-fit:cover}
.contactHeader h2{margin:0 0 7px;color:#063d31;font-size:39px;line-height:1.08;font-weight:900}
.contactSubtitle{margin:0;color:#607486;font-size:22px;line-height:1.35}
.contactDivider{height:1px;margin:0 0 25px;background:repeating-linear-gradient(to right,#b8ded1 0 5px,transparent 5px 10px)}
.selectedFood{display:grid;grid-template-columns:160px 1fr;gap:38px;align-items:center;padding:0 4px 25px}
.foodContactIcon{width:160px;height:160px;border-radius:18px;background:#eef7f4;color:#0b6952;display:flex;align-items:center;justify-content:center}
.foodContactIcon svg{width:100px;height:100px}
.selectedFoodInfo strong{display:block;margin-bottom:6px;color:#073e32;font-size:30px;line-height:1.2;font-weight:900}
.selectedFoodInfo b{display:block;margin-bottom:13px;color:#159c68;font-size:27px;line-height:1.1;font-weight:900}
.selectedFoodInfo p{max-width:610px;margin:0;color:#607486;font-size:20px;line-height:1.55}
.contactChoiceTitle{margin:-3px 0 17px;text-align:center;color:#073e32;font-size:24px;font-weight:900}
.contactActions{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 24px}
.contactBtn{min-height:132px;flex-direction:column;gap:9px;border-radius:14px;padding:18px 12px;transition:transform .15s ease,filter .15s ease}
.contactBtn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.contactBtnIcon{flex:0 0 auto!important;width:52px!important;height:52px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.24);font-size:17px;font-weight:900}
.messengerIcon{font-size:27px}.hotlineIcon{font-size:26px}.contactBtn strong{font-size:18px}
.privacyNote{display:flex;align-items:center;justify-content:center;gap:10px;color:#607486;font-size:17px;line-height:1.4;text-align:center}
.privacyIcon{width:25px;height:25px;flex:0 0 25px;border:2px solid #159c68;border-radius:6px;color:#159c68;display:flex;align-items:center;justify-content:center;font-weight:900}
@media(max-width:700px){
  .contactModal{padding:24px 18px 20px;border-radius:16px}.contactHeader{gap:14px;padding-right:30px}
  .contactLogoWrap{width:70px;height:70px;flex-basis:70px}.contactHeader h2{font-size:25px}.contactSubtitle{font-size:16px}
  .selectedFood{grid-template-columns:82px 1fr;gap:15px;padding-bottom:20px}.foodContactIcon{width:82px;height:82px;border-radius:14px}.foodContactIcon svg{width:55px;height:55px}
  .selectedFoodInfo strong{font-size:21px}.selectedFoodInfo b{font-size:20px;margin-bottom:7px}.selectedFoodInfo p{font-size:14px;line-height:1.45}
  .contactChoiceTitle{font-size:19px}.contactActions{grid-template-columns:1fr;gap:10px}.contactBtn{min-height:72px;flex-direction:row;justify-content:flex-start;padding:10px 20px}.contactBtn strong{font-size:16px}.privacyNote{font-size:13px}
}


/* HOTLINE HEADER FIX: no icon, keep the label and both phone numbers on one line */
.phoneInfo{
  display:block !important;
  grid-template-columns:none !important;
  width:auto !important;
  min-width:360px !important;
  max-width:none !important;
  justify-self:end !important;
  white-space:nowrap !important;
}
.phoneInfo > div{
  display:block !important;
  width:auto !important;
  min-width:max-content !important;
}
.phoneInfo strong,
.phoneInfo span{
  display:block !important;
  width:auto !important;
  white-space:nowrap !important;
}
@media(max-width:980px){
  .phoneInfo{
    justify-self:start !important;
    min-width:0 !important;
    width:auto !important;
    white-space:normal !important;
  }
  .phoneInfo > div,
  .phoneInfo strong,
  .phoneInfo span{
    min-width:0 !important;
    white-space:normal !important;
  }
}