/* GÀNH HÀO – UI UPGRADE (source R7.1 retained) – distinct trial build */
:root{
  --navy:#061b28;--navy2:#092936;--ocean:#0b4052;
  --gold:#dfbb87;--goldlight:#f0d5ac;--paper:#061b28;
  --ink:#f8f4ec;--muted:#bacbd1;--line:#264453;
  --card:#103040;--card2:#0b2736;
}
html,body{background:#061b28;color:var(--ink);color-scheme:dark}
.app-shell{background:var(--navy);color:var(--ink);box-shadow:0 0 45px #0005}
.page,.page-groups,.page-home{background:var(--navy);color:var(--ink)}
.page{min-height:calc(100dvh - 72px)}
button,select,input{color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #eccd9d;outline-offset:3px}
::selection{background:#b78c5b;color:#051d2a}
.rule{background:#2a4754;margin:20px 0}
.kicker,.section-title .kicker,.caption{color:var(--gold);letter-spacing:.10em;font-size:11px}
.topbar.simple,.topbar{color:#fbf7ef}
.topbar.simple{background:#092634;border-color:#284655;z-index:15}
.topbar .titles strong{font-size:15px;letter-spacing:-.01em}
.topbar .titles small{color:#b8cbd1;font-size:11px}
.topbar.simple .icon-btn{background:#123644;color:#ebede9}
.icon-btn{min-width:40px;min-height:40px}
.cover-head{min-height:176px;padding-bottom:22px;border-bottom:1px solid #234758}
.cover-head-bg{opacity:.44}
.cover-head::after{background:linear-gradient(90deg,#061b28ed,#082b3bb8 65%,#0b283a77)}
.head-copy{padding:10px 20px 0}.head-copy h1{font-size:28px;line-height:1.29}.head-copy p{font-size:13px;line-height:1.55;color:#d7e4e7}
/* HOME */
.home-hero{height:315px}
.home-hero::after{background:linear-gradient(180deg,#071f2bbd 0%,transparent 28%,#021e2a66 53%,#061b28 100%)}
.home-brand{top:12px;left:16px;right:16px;align-items:start}
.home-logo{width:112px;height:87px;filter:brightness(0) invert(1)}
.home-title{left:20px;right:20px;bottom:17px}
.home-title .eyebrow{font-size:11px;letter-spacing:.12em;color:#f1d3a8}
.home-title h1{font-size:clamp(29px,7.6vw,38px);max-width:350px;margin-bottom:8px}
.home-title p{font-size:12px;line-height:1.6;max-width:310px}
.lang-switch{display:inline-flex;align-items:center;gap:5px;background:#092939c9;border:1px solid #9ab1bc99;color:#fff;padding:5px 7px;border-radius:999px;min-height:36px}
.lang-switch .language-select{appearance:none;background:transparent;border:0;min-width:30px;padding:3px 1px;font-size:12px;color:#fff}
.lang-switch .language-select option{background:#0b2937;color:#fff}
.home-actions{padding:11px 15px 17px;gap:8px}
.home-search{height:44px;padding:0 15px;background:#163845;color:#e3e9e8;border:1px solid #315766;border-radius:12px;display:flex;align-items:center;gap:13px;text-align:left;font-size:13px}
.home-search span{flex:1}.home-search .icon{color:#edcf9e}
.path-card,.path-card.blue,.path-card.gold,.path-card.slate{background:linear-gradient(110deg,#103649,#092938 88%);border:1px solid #375261;box-shadow:none;min-height:91px;padding:12px 13px;border-radius:13px;grid-template-columns:45px minmax(0,1fr) 17px;gap:10px;color:#f7f7f2}
.path-card:nth-child(3){background:linear-gradient(110deg,#133647,#0a2837 88%)}
.path-card:nth-child(4){background:linear-gradient(110deg,#143340,#082838 88%)}
.path-icon{background:#1b4657;border:1px solid #476471;width:44px;height:45px;color:#efcf9c}
.path-label{font-size:11px;color:#bbcad1}.path-heading{font-size:16px;line-height:1.35;font-weight:700}
.path-sub{font-size:11px;line-height:1.45;color:#cad6d9}
.path-card>.icon{color:#e8cd9f}
/* NAV -- same dark palette on every screen */
.bottom-nav,.bottom-nav.home-mode{background:#071d2a;border-color:#2b4955;grid-template-columns:repeat(5,minmax(0,1fr));box-shadow:0 -8px 30px #0005}
.bottom-nav .nav-btn,.bottom-nav.home-mode .nav-btn{position:relative;color:#a7bac2;gap:4px;padding:7px 2px;min-width:0}
.bottom-nav .nav-btn .icon{width:21px;height:21px}
.bottom-nav .nav-btn span{font-size:10px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
.bottom-nav .nav-btn.active,.bottom-nav.home-mode .nav-btn.active{color:#e9c58c}
.saved-dot{position:absolute;top:1px;right:19%;border-radius:11px;background:#d2a769;color:#0a2633;font-size:9px;min-width:15px;height:15px;line-height:15px;font-weight:700;font-style:normal}
/* GROUPS */
.page-groups .section{padding:16px 15px 22px}
.section-title{align-items:center;margin-bottom:15px}
.section-title h2,.page-groups .section-title h2{color:#f6f2e9;font-size:19px}
.section-title .count,.page-groups .section-title .count{color:#b2c3c9;font-size:12px}
.group-card,.page-groups .group-card{background:#102f40;color:#f8f7f3;border:1px solid #2f4e5b;box-shadow:none;border-radius:12px;overflow:hidden}
.group-photo{height:159px;object-fit:cover}
.group-card-footer{min-height:69px;padding:12px 12px}
.group-card-footer strong{font-size:14px;line-height:1.4}
.group-card-footer span,.page-groups .group-card-footer span{font-size:11px;color:#b6c6cc}
.group-card-footer .arrow,.page-groups .group-card-footer .arrow{color:#d6bd96}
/* SEAFOOD LIST */
.seafood-list{gap:1px;padding:9px 13px 25px}
.seafood-row{background:transparent;border:0;border-bottom:1px solid #254351;border-radius:0;box-shadow:none;min-height:119px;grid-template-columns:115px minmax(0,1fr) 20px;gap:15px;padding:10px 4px;color:var(--ink)}
.seafood-row .thumb{height:105px;width:115px;border-radius:9px;object-fit:cover}
.seafood-row strong{font-size:16px;line-height:1.4;overflow-wrap:break-word}
.seafood-row .price{color:#e4c493;font-size:14px;font-weight:600;margin-top:9px}
.seafood-row .arrow{color:#e2c18c}
.photo-absent{background:linear-gradient(135deg,#244754,#0a2939);color:#c1d1d4;font-size:12px}
.photo-absent.thumb{height:105px;width:115px}
/* LIVE SEAFOOD DETAIL */
.detail-image-head{height:308px;background:#153845}
.detail-image-head .detail-nav{top:13px}
.white-detail{background:#092735;color:#f7f3ea;border-radius:18px 18px 0 0;padding:22px 17px 34px;min-height:0}
.white-detail h1{font-size:26px;line-height:1.27;letter-spacing:-.025em}
.detail-intro{align-items:start;gap:12px}
.detail-intro>.grow{min-width:0}
.detail-kicker{margin-bottom:8px;color:#d1b68c}
.detail-price{color:#edc98f;font-size:18px;max-width:135px;text-align:right;white-space:normal;line-height:1.35}
.detail-desc{font-size:14px;color:#c0d0d2;line-height:1.65;margin-top:11px}
.market-hint{margin:9px 0 1px;color:#cfd8da;font-size:12px;line-height:1.6}
.mini-header{margin-bottom:12px}.mini-header h2{font-size:16px;font-weight:700;color:#f3eee5}
.mini-header small{font-size:12px;color:#b0c2c8}
.prep-grid{gap:8px}
.prep-chip{background:#103443;border:1px solid #31505c;color:#f2eee6;min-height:55px;border-radius:10px;padding:11px 10px;font-size:13px;font-weight:600;line-height:1.35}
.prep-chip.selected{background:#3b3a31;border:1px solid #e0b87e;color:#faead3;box-shadow:inset 0 0 0 1px #9f7c4a66}
.prep-chip .prep-symbol{color:#e3bf8a}
.prep-chip .prep-symbol .icon{width:19px;height:19px}
.more-btn{background:#103746;color:#ebd4b2;border-color:#365463;font-size:13px;padding:13px 10px;min-height:45px}
.no-prep-note{margin-top:15px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid #284752;padding-top:13px}
.no-prep-note p{font-size:12px;color:#bbccd0;line-height:1.55;margin:0;flex:1;min-width:160px}
.prep-selection{background:#123442;border:1px solid #597280;padding:14px;margin-top:13px;border-radius:12px}
.selected-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.selected-title strong{font-size:17px;line-height:1.35}
.prep-selection .selected-price{font-size:15px;color:#ebc58e;margin:7px 0 2px}
.prep-selection .selected-description{font-size:13px;color:#c7d2d3}
.selected-photo{padding:0;background:transparent;border:0;width:100%;text-align:left;margin-top:10px;color:#e8cfaa}
.selected-photo img{width:100%;max-height:200px;object-fit:cover;border-radius:10px;display:block}
.selected-photo span{display:block;font-size:12px;padding-top:6px}
.inset-note{background:#123b4a;border:1px solid #355967;border-left:3px solid #d0aa75;color:#c5d3d4;font-size:13px}
.example-grid{gap:10px}.example-card img{height:110px;object-fit:cover;border-radius:9px}
.example-card button{border:0;background:transparent;color:inherit;text-align:left;padding:0;width:100%}
.example-card strong{color:#e6e7e1;font-size:12px;line-height:1.45}
.price-vat{color:#b2bec1;font-size:12px;margin-top:20px;line-height:1.5}
.detail-no-photo{color:#e7eef0}
.flag{border:1px solid #8da3ab;background:#082e40}
/* COOKED SEAFOOD */
.discover-controls{padding:13px 15px 0;background:var(--navy)}
.search-box{height:47px;background:#153341;border:1px solid #3d5965;color:#d2dada}
.search-box input{color:#faf8f2;font-size:14px}
.search-box input::placeholder{color:#a7bdc5}
.filter-row{padding:12px 0}
.filter-chip{background:#103140;color:#c7d4d6;border:1px solid #30505d;font-size:12px;min-height:38px;padding:9px 13px}
.filter-chip.active{background:#c9a573;border-color:#c9a573;color:#071e2c}
.results-count{color:#b7c9cf;font-size:12px;padding:4px 17px 12px}
.discover-grid{padding-top:0;padding-bottom:28px;gap:12px}
.dish-card{position:relative;background:#103141;border:1px solid #2e4d5b;border-radius:12px;box-shadow:none;color:#f5f1eb;overflow:hidden}
.dish-card-main{display:block;width:100%;padding:0;background:transparent;border:0;text-align:left;color:inherit}
.dish-card-main>img{display:block;width:100%;height:160px;object-fit:cover;background:#163943}
.dish-card-body{padding:11px 11px 13px}
.dish-card .dish-group{font-size:10px;color:#debf8e}
.dish-card strong{font-size:14px;line-height:1.42;min-height:39px}
.dish-card .dish-price{font-size:12px;color:#dbb984}
.dish-card-save{position:absolute;top:8px;right:8px}
.save-btn{height:37px;min-width:37px;padding:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;background:#123746eb;color:#f1d2a3;border:1px solid #63808c;border-radius:100px;cursor:pointer}
.save-btn .icon{width:19px;height:19px}
.save-btn.is-saved{background:#b8986c;color:#092334;border-color:#e9c999}
.save-btn.with-label{border-radius:11px;padding:9px 14px;height:auto;min-height:42px;font-size:12px;font-weight:700}
.cooked-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px}
.cooked-save small{font-size:12px;color:#c0cbd0}
.ingredient-card{background:#103644;color:#f5f1e9;border-color:#315260;padding:10px}
.ingredient-card strong{font-size:14px}
.ingredient-card span{color:#c0ccd0;font-size:12px}
.ingredient-card .thumb{object-fit:cover}
/* À LA CARTE */
.portion-heading{padding:15px 16px 0}.portion-heading p{font-size:13px;line-height:1.6;color:#b9cbd1}
.portion-cats-title{color:#e4c08b;font-size:12px;padding:17px 16px 11px}
.portion-grid{gap:10px;padding:2px 15px 27px}
.portion-cat,.portion-cat:nth-child(5n+1),.portion-cat:nth-child(5n+3){background:#103141;color:#f7f5ee;border:1px solid #2c4b5b;border-radius:12px;min-height:113px;padding:13px}
.category-top{display:flex;flex-direction:column;gap:10px}
.category-top>.icon{height:23px;width:23px;color:#e4bc84}
.portion-cat strong{font-size:14px;line-height:1.42}
.portion-cat-foot{color:#b5c7cb;font-size:11px}
.portion-list{gap:0;padding:0 15px 26px}
.portion-row{min-height:83px;padding:10px 0;border:0;border-bottom:1px solid #294653;border-radius:0;background:transparent;color:#f4f1eb;gap:9px}
.portion-row-main{min-height:54px;min-width:0;display:flex;gap:10px;flex:1;align-items:center;border:0;text-align:left;background:transparent;color:inherit;padding:0 4px}
.portion-row-main .grow{flex:1;min-width:0}
.portion-row strong{font-size:15px;line-height:1.47}
.portion-row .price{font-size:14px;color:#e3c38e;margin-top:6px;line-height:1.4}
.portion-row .arrow{color:#c9b08c}
.portion-row .save-btn{flex:none}
.portion-detail{padding:24px 17px 30px;background:var(--navy)}
.portion-detail .name{font-size:25px;line-height:1.35}
.portion-detail .big-price{font:600 20px/1.4 var(--serif);color:#e7c18a}
.portion-detail .unit{color:#c9d4d6;font-size:13px}
.portion-detail .kicker{font-size:12px;color:#e1bd87}
.portion-detail.is-simple{padding-top:30px;min-height:unset}
.portion-save{margin-top:18px}.ingredient-note{font-size:13px;color:#c6d0d1;margin-top:14px}
.price-table{gap:8px}.price-line{background:#143644;border-color:#335361;color:#e5edef;font-size:13px}
.price-line strong{color:#f1ce9a}.price-line small{color:#bed0d4;font-size:12px}
.variant-section{border-color:#284653}.variant-title{font-size:14px}
.variant-price{font-size:14px;color:#f0c994}
.fixed-header-meta{color:#c4d0d3;font-size:12px}
.footnote{font-size:11px;color:#b3c5c8}
.empty-result{color:#c4ced2;font-size:14px}
/* SEARCH / SAVED */
.search-page-bar{padding:18px 15px 12px}
.search-welcome{padding:70px 28px;text-align:center;color:#9fb7c1}
.search-welcome .icon{color:#e9c38e}
.search-welcome p{font-size:14px;line-height:1.6;margin-top:12px}
.global-section{padding:9px 15px 12px}
.global-section h2{font-size:17px;color:#f3eee7;margin:8px 0 12px}
.global-section h2 small{font-family:var(--font);font-size:12px;color:#bfccd1;font-weight:500;margin-left:6px}
.global-result{width:100%;min-height:82px;display:flex;align-items:center;gap:13px;border:0;border-bottom:1px solid #284452;background:transparent;color:#f1f1ec;padding:9px 0;text-align:left}
.global-thumb{width:72px;height:66px;border-radius:8px;object-fit:cover;flex:none}
.global-result .photo-absent{width:72px;height:66px;flex:none}
.global-result strong{display:block;font-size:15px;line-height:1.4}
.global-result small{display:block;font-size:11px;color:#b6c7cb;margin:4px 0}
.global-result em{display:block;font-size:12px;color:#e6c28d;font-style:normal;font-weight:600}
.global-result>.icon{color:#e5be86}
.saved-page{padding:22px 16px 34px}.saved-page h1{font-size:25px;margin-bottom:7px}.saved-page>p{color:#bdcbd1;font-size:14px}
.saved-list{margin-top:20px;border-top:1px solid #2b4956}
.saved-row{padding:13px 0;display:flex;align-items:center;gap:12px;border-bottom:1px solid #2b4956}
.saved-row-info{flex:1;min-width:0;background:transparent;border:0;text-align:left;padding:0;color:#f4f3ef}
.saved-row-info strong{display:block;font-size:16px;line-height:1.4}
.saved-row-info small{display:block;color:#bacbd0;font-size:13px;margin-top:4px}
.saved-row-info span{display:block;color:#e9c18b;font-size:13px;margin-top:6px}
.saved-disclaimer{padding:15px 16px;border:1px solid #365462;border-radius:10px;background:#0d2b39;font-size:12px;line-height:1.6;color:#c4d1d5;margin-top:25px}
/* Large and small displays */
@media (max-width:360px){
  .home-hero{height:300px}.home-title h1{font-size:29px}
  .path-card,.path-card.blue,.path-card.gold,.path-card.slate{min-height:88px;grid-template-columns:39px minmax(0,1fr) 14px;padding:10px;gap:8px}
  .path-icon{width:39px;height:42px}
  .path-heading{font-size:14px}.path-sub{font-size:10px}
  .bottom-nav .nav-btn span{font-size:9px}
  .group-photo{height:137px}
  .seafood-row{grid-template-columns:99px minmax(0,1fr) 16px;gap:9px}
  .seafood-row .thumb,.photo-absent.thumb{width:99px;height:94px}
  .seafood-row strong{font-size:14px}
  .prep-chip{padding:9px 8px;font-size:12px;gap:6px}
  .white-detail{padding:18px 13px 32px}
  .dish-card-main>img{height:133px}.dish-card strong{font-size:12px}
  .portion-row strong{font-size:14px}.portion-row .price{font-size:13px}
}
@media (min-width:481px){.bottom-nav{border-left:1px solid #264653;border-right:1px solid #264653}}
.topbar.simple{gap:8px}.topbar.simple .titles{min-width:0}.topbar.simple .icon-btn{width:38px;min-width:38px;min-height:38px;height:38px}
.detail-nav{gap:8px}.detail-nav .icon-btn{margin-right:0}
.detail-nav .icon-btn:nth-child(2){margin-left:auto}
.language-sheet,.portion-sheet{position:relative;background:#0e3040;color:#f6f3ed;border:1px solid #577081;border-radius:17px;padding:25px 18px 20px;width:min(100%,370px);box-shadow:0 20px 60px #0008}
.language-sheet h2,.portion-sheet h2{font:600 23px/1.35 var(--serif);margin:0 46px 20px 0}
.language-choice{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 12px;background:transparent;border:0;border-bottom:1px solid #31515f;color:#f5f0e8;font-size:15px;text-align:left}
.language-choice.is-active{color:#ebc28f}
.portion-sheet>strong{display:block;color:#ebc38f;font-size:21px;margin-bottom:18px}
.portion-sheet>p:not(.kicker){font-size:12px;color:#b8cbd0}
.portion-sheet .save-btn{margin-top:10px}
.expand-search{width:100%;min-height:44px;margin-top:9px;padding:10px;background:#173c4c;color:#ecd0a5;border:1px solid #3e5b68;border-radius:11px;text-align:center;font-size:13px}
@media (max-width:360px){.topbar.simple .icon-btn{width:36px;min-width:36px;height:36px;min-height:36px}.topbar .titles strong{font-size:13px}.topbar{padding-left:10px;padding-right:10px;gap:5px}}
/* Text-based save on live seafood and à-la-carte; hearts reserved for prepared dish cards. */
.portion-row .save-btn.with-label{font-size:11px;padding:9px 10px;gap:5px;min-width:72px}
.portion-row .save-btn.with-label .icon{width:17px;height:17px}
.saved-row .save-btn.with-label{font-size:11px;padding:8px 9px;gap:4px}
@media (max-width:360px){.portion-row .save-btn.with-label{min-width:64px;padding:9px 6px;font-size:10px}}

/* Language selector: icon + current language code on every screen */
.topbar .icon-btn.lang-btn,.topbar.simple .icon-btn.lang-btn,.detail-nav .icon-btn.lang-btn{width:auto;min-width:57px;padding:0 7px;display:inline-flex;gap:4px;align-items:center;justify-content:center}
.lang-code{font-family:var(--font);font-weight:700;font-size:10px;line-height:1;letter-spacing:.045em}
@media(max-width:349px){.topbar.simple{gap:5px;padding-left:11px;padding-right:11px}.topbar.simple .icon-btn.lang-btn{min-width:52px;padding:0 4px}}