/* ══════════════════════════════════════════════════════════════════
DONDON  ·  he thong giao dien web
Nhan dien POSSI 12/2024, CEO chot 22/07/2026.
Ti le mau theo Design Language v1.1 muc 04:
Kem 50% · Royal Blue 30% · Than 12% · Scarlet 8%
Cac quyet dinh o day deu co can cu tu 15 website QSR quoc te da mo
ngay 2026-08-26. Xem 02_BENCHMARKS. Cho nao lech benchmark deu co
ghi ly do ngay tai cho.
══════════════════════════════════════════════════════════════════ */
/* ─── 1. TOKEN ────────────────────────────────────────────────────
Vai tro nut tach rieng theo mo hinh Din Tai Fung va Taco Bell:
moi module co primaryButton va secondaryButton rieng biet, khong
dung chung mot bien mau. Nho vay hai CTA khong bao gio nhin giong nhau. */
:root{
color-scheme: light dark;
--blue:#0604CF;          /* Pantone 072C */
--blue-deep:#0A0980;
--red:#FF2400;           /* Pantone 2028C */
--ink:#0B0C24;
--ink-2:#54566F;
--kem:#F3F4FB;
--paper:#FFFFFF;
--line:#DCDEF0;
--bg:var(--kem);
--surface:var(--paper);
--surface-2:var(--kem);
--fg:var(--ink);
--fg-2:var(--ink-2);
--accent:var(--blue);
--accent-fg:#FFFFFF;
--hot:var(--red);
--focus:var(--red);
--btn-pri-bg:var(--blue);
--btn-pri-fg:#FFFFFF;
--btn-pri-bd:var(--blue);
--btn-sec-bg:transparent;
--btn-sec-fg:var(--blue);
--btn-sec-bd:var(--blue);
--btn-h:48px;            /* WCAG 2.2 muc 2.5.8 doi toi thieu 24x24. 48 la thoai mai. */
--btn-pad:20px;
--f-display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;
--f-body:"Anybody","Be Vietnam Pro",system-ui,sans-serif;
/* Thang chu dung clamp. 15/15 site QSR da khao sat deu dung breakpoint
cung, khong site nao dung clamp. Day la cho co tinh lam khac: chu
lien tuc theo be ngang man hinh doc de hon chu nhay bac. */
--t-xs:0.75rem;
--t-sm:0.875rem;
--t-md:1rem;
--t-lg:1.125rem;
--t-xl:clamp(1.25rem,1.1rem + 0.7vw,1.5rem);
--t-2xl:clamp(1.5rem,1.25rem + 1.2vw,2rem);
--t-3xl:clamp(1.9rem,1.4rem + 2.4vw,3rem);
--t-4xl:clamp(2.3rem,1.5rem + 3.8vw,4rem);
--r:14px;
--r-sm:8px;
--head-h:60px;           /* TamJai SamGor: #Top_bar.is-sticky height 60px */
--wrap:1170px;           /* Pizza Hut VN: max-w-[1170px] */
--gap:clamp(16px,3vw,28px);
}
/* Che do toi. 10/10 site QSR quoc te KHONG lam dark mode.
Van lam, va day la cho co tinh di nguoc benchmark:
37,43% luot tai trang den tu may bat dark mode o cap he dieu hanh,
chi khoang 13% trang co lam. Khoang cach 24 diem phan tram lon hon
moi xu huong thiet ke dang duoc ban. Chi phi de bit la mot bo token. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0B0C24;
--surface:#16183A;
--surface-2:#1E2149;
--fg:#EDEEF7;
--fg-2:#A7AAC8;
--line:#2C2F5E;
--accent:#8B89FF;      /* Royal Blue lam sang de dat tuong phan tren nen toi */
--accent-fg:#0B0C24;
--hot:#FF5A3C;
--focus:#FF5A3C;
--btn-pri-bg:#8B89FF;
--btn-pri-fg:#0B0C24;
--btn-pri-bd:#8B89FF;
--btn-sec-fg:#8B89FF;
--btn-sec-bd:#4A48A8;
}
}
:root[data-theme="dark"]{
--bg:#0B0C24; --surface:#16183A; --surface-2:#1E2149;
--fg:#EDEEF7; --fg-2:#A7AAC8; --line:#2C2F5E;
--accent:#8B89FF; --accent-fg:#0B0C24; --hot:#FF5A3C; --focus:#FF5A3C;
--btn-pri-bg:#8B89FF; --btn-pri-fg:#0B0C24; --btn-pri-bd:#8B89FF;
--btn-sec-fg:#8B89FF; --btn-sec-bd:#4A48A8;
}
/* ─── 2. NEN ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--fg);
font-family:var(--f-body);font-size:var(--t-md);line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
/* WCAG 2.2. 67% website dang xoa vien focus, tang 14 diem trong mot nam.
Day la di lui. Khong xoa outline, chi lam no ro hon. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
/* WCAG 2.2 muc 2.4.11 Focus Not Obscured. Header dinh cao 60px se che
tieu diem ban phim khi nhay toi mot muc. scroll-margin-top bit cho do. */
:target,h2[id],h3[id],section[id]{scroll-margin-top:calc(var(--head-h) + 16px)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,24px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);
color:var(--accent-fg);padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
h1,h2,h3,.set .gia,.dish .p{font-family:var(--f-display);font-weight:800;
line-height:1.1;letter-spacing:-0.02em;text-wrap:balance}
h1{font-size:var(--t-4xl);margin:0 0 12px}
h2{font-size:var(--t-3xl);margin:0 0 10px}
h3{font-size:var(--t-xl);margin:0 0 6px}
h1 em,h2 em{font-style:normal;color:var(--accent)}
p{margin:0 0 14px;max-width:68ch}
section{padding-block:clamp(32px,6vw,64px)}
section + section{border-top:1px solid var(--line)}
/* ─── 3. NUT ────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--btn-h);padding:0 var(--btn-pad);
font-family:var(--f-display);font-weight:700;font-size:var(--t-md);
border-radius:999px;border:2px solid transparent;text-decoration:none;
cursor:pointer;transition:transform .16s ease, background-color .16s ease;
}
.btn.pri{background:var(--btn-pri-bg);color:var(--btn-pri-fg);border-color:var(--btn-pri-bd)}
.btn.sec{background:var(--btn-sec-bg);color:var(--btn-sec-fg);border-color:var(--btn-sec-bd)}
.btn.hot{background:var(--hot);color:#fff;border-color:var(--hot)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
/* 55,67% luot tai trang mang theo prefers-reduced-motion.
Hon mot nua thiet bi dang phat tin hieu ve chuyen dong. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ─── 4. HEADER ──────────────────────────────────────────────────
6/10 site QSR co header dinh mang DUNG MOT nut to nhat.
McDonald's Vietnam la ngoai le, no co hai nut do canh nhau va doc kem han.
Nut duy nhat o day la "Chi duong", khong phai "Dat mon":
93% doanh thu la khach da dung trong mall, viec can lam la di toi quay. */
.top{position:sticky;top:0;z-index:100;background:var(--surface);
border-bottom:1px solid var(--line);min-height:var(--head-h);
display:flex;align-items:center}
.top .wrap{display:flex;align-items:center;gap:var(--gap);width:100%}
.brand{display:block;text-decoration:none;flex-shrink:0;line-height:0}
.brand img{height:32px;width:auto}
.nav{display:flex;gap:clamp(12px,2vw,26px);margin-inline-start:auto;align-items:center}
.nav a{color:var(--fg);text-decoration:none;font-weight:600;font-size:var(--t-sm);
padding:12px 2px;white-space:nowrap;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}
.top .btn{flex-shrink:0;min-height:40px;padding:0 16px;font-size:var(--t-sm)}
/* Tren dien thoai header dinh chi giu logo va DUNG MOT nut, giong ca 6 site
QSR co header dinh. Nhung KHONG duoc giau luon duong di: cac muc dieu huong
chuyen xuong mot dai cuon ngang ngay duoi header, theo mau dai the nhom mon
cuon ngang cua Jollibee. Khong dung menu ham bat vi no giau noi dung
sau mot cu bam va can JavaScript. */
.mnav{display:none}
@media (max-width:860px){
.nav{display:none}
.top .wrap{justify-content:space-between}
.mnav{display:block;background:var(--surface);border-bottom:1px solid var(--line)}
.mnav div{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.mnav div::-webkit-scrollbar{display:none}
.mnav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:var(--t-sm);
color:var(--fg);border:1px solid var(--line);border-radius:999px;
padding:9px 15px;min-height:38px;display:inline-flex;align-items:center}
.mnav a[aria-current="page"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
}
.subnav{background:var(--surface-2);border-bottom:1px solid var(--line);
padding-block:8px;font-size:var(--t-sm)}
.subnav .wrap{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;text-decoration:none;font-weight:600;
padding:8px 14px;border-radius:999px;background:var(--surface);
border:1px solid var(--line);color:var(--fg);min-height:36px;
display:inline-flex;align-items:center}
.subnav a[aria-current="page"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* ─── 5. HERO ────────────────────────────────────────────────────
KFC UK dat FIND A KFC va ORDER NOW ngang trong luong, ngan cach
bang dung chu "or". Day chinh la tinh huong cua DONDON:
chuyen doi that khong phai mot cu click, ma la mot buoc chan
bang qua food court. Nen "Xem thuc don" va "Chi duong" ngang nhau. */
.hero{background:var(--surface);padding-block:clamp(40px,8vw,80px)}
.hero .kick{display:inline-block;font-family:var(--f-display);font-weight:700;
font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--hot);margin-bottom:14px}
.hero .lead{font-size:var(--t-lg);color:var(--fg-2);max-width:58ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.cta .or{font-size:var(--t-sm);color:var(--fg-2);font-style:italic}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.facts span{font-size:var(--t-sm);font-weight:600;background:var(--surface-2);
border:1px solid var(--line);border-radius:999px;padding:7px 14px}
/* ─── 6. THE MON ─────────────────────────────────────────────────
Giai phau the lay tu Pizza Hut Vietnam, site QSR Viet hien dai nhat
trong bo khao sat: anh -> ten -> mo ta -> nhan -> "Chi tu" -> gia.
Anh doc ti le 98:115, hop voi to, thao va xung hap hon o vuong.
2 cot tren dien thoai, dung nhu Pizza Hut VN. */
/* Vung chua la .dish-wrap, khong phai chinh .dish-grid: mot container khong
the tu tao kieu cho chinh no. Nho vay luoi the mon dat trong cot hep hay
cot rong deu tu chon so cot dung, khong phu thuoc be ngang man hinh.
Pizza Hut VN dat the co dinh 132x156 tren dien thoai va 196x230 tren may ban;
minmax(150px) va minmax(196px) o day bam theo hai con so do. */
.dish-wrap{container-type:inline-size}
.dish-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
list-style:none;padding:0;margin:0}
@container (min-width:560px){
.dish-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
}
@supports not (container-type:inline-size){
@media (min-width:640px){.dish-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}}
}
.dish{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column}
.dish .media{aspect-ratio:98/115;background:var(--surface-2);position:relative;
display:grid;place-items:center;padding:12px;text-align:center}
.dish .media span{font-size:var(--t-xs);font-weight:700;color:var(--fg-2);
letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.dish .body{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.dish .n{font-family:var(--f-display);font-weight:700;font-size:var(--t-md);line-height:1.25}
.dish .d{font-size:var(--t-sm);color:var(--fg-2);margin:0;flex:1}
.dish .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;background:var(--hot);color:#fff;border-radius:4px;padding:3px 8px}
.dish .from{font-size:var(--t-xs);color:var(--fg-2);margin:0}
.dish .p{font-size:var(--t-lg);color:var(--fg)}
@media (hover:hover){.dish:hover{box-shadow:0 10px 28px rgb(6 4 207 / .10)}}
/* ─── 7. SET ─────────────────────────────────────────────────────
4/4 site co set deu trinh bay set nhu MOT SAN PHAM CO TEN o MOT MUC GIA.
Khong site nao ghi so tien tiet kiem, khong gach ngang gia goc,
khong so sanh voi goi le. Ten set chinh la danh sach thanh phan. */
.set{background:var(--accent);color:var(--accent-fg);border-radius:var(--r);
padding:clamp(20px,4vw,34px);display:flex;flex-wrap:wrap;gap:20px;
align-items:center;justify-content:space-between}
.set h3{color:inherit;font-size:var(--t-2xl);margin:0 0 6px}
.set p{color:inherit;opacity:.92;margin:0;max-width:46ch}
.set .gia{font-size:var(--t-3xl);line-height:1;text-align:right}
.set .gia small{display:block;font-family:var(--f-body);font-size:var(--t-xs);
font-weight:600;letter-spacing:.12em;opacity:.85;margin-top:6px}
/* ─── 8. BANG GIA DANG DANH SACH ─────────────────────────────── */
.menu{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:clamp(16px,3vw,26px);margin-bottom:var(--gap)}
.menu h3{margin:0 0 12px}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{display:flex;align-items:baseline;gap:8px;padding:9px 0;
border-bottom:1px dashed var(--line)}
.menu li:last-child{border-bottom:0}
.menu .n{flex-shrink:1}
.menu .dot{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.menu .p{font-family:var(--f-display);font-weight:700;white-space:nowrap}
/* ─── 9. QUAN ────────────────────────────────────────────────────
Cau truc lay tu trang chi nhanh KFC UK va Jollibee:
ten -> dia chi -> chi duong -> gio theo tung ngay -> nhan tien ich.
Thu tu dia chi lay tu Maxim's MX va TamJai SamGor, hai chuoi Hong Kong
doc lap nhau nhung viet giong het nhau: TEN MALL, TANG, GIAN. */
.store{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:clamp(18px,3.5vw,30px)}
.store .addr{font-size:var(--t-lg);font-weight:600;margin:0 0 4px}
.store .addr b{color:var(--accent)}
.store .sub{color:var(--fg-2);margin:0 0 18px;font-size:var(--t-sm)}
.hours{width:100%;border-collapse:collapse;margin:14px 0;font-size:var(--t-sm)}
.hours caption{text-align:left;font-family:var(--f-display);font-weight:700;
font-size:var(--t-md);padding-bottom:8px}
.hours th,.hours td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.hours th{font-weight:600;color:var(--fg-2);width:45%}
.hours td{font-variant-numeric:tabular-nums}
.live{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:var(--t-sm);
border-radius:999px;padding:6px 14px;background:var(--surface-2);border:1px solid var(--line)}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fg-2)}
.live[data-open="1"]{color:#0B7A3B;border-color:#0B7A3B40}
.live[data-open="1"]::before{background:#12A150}
.live[data-open="0"]{color:var(--hot);border-color:color-mix(in oklab,var(--hot) 30%,transparent)}
.live[data-open="0"]::before{background:var(--hot)}
/* Nhan tien ich viet bang CHU, khong dung icon.
KFC UK dung nhan chu, McDonald's Vietnam dung 6 icon PNG 36px.
Nhan chu dich duoc va trinh doc man hinh doc duoc, icon thi khong. */
.badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}
.badges li{font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;
text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r-sm);
padding:6px 11px;background:var(--surface-2)}
.soon{display:inline-block;font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;
text-transform:uppercase;background:var(--hot);color:#fff;
border-radius:var(--r-sm);padding:5px 12px;margin-bottom:12px}
/* ─── 10. BAN GIAO KENH GIAO HANG ────────────────────────────────
KFC UK khong giau doi tac giao hang va cung khong gia vo tu giao:
mot khoi co logo tung ben, mot dong "phi giao hang ap dung", va mot
cau noi ro la se roi khoi trang. Lam y het nhu vay. */
.deliver{background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r);padding:clamp(18px,3.5vw,28px)}
.deliver .rows{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 12px}
.deliver .note{font-size:var(--t-sm);color:var(--fg-2);margin:0}
.deliver .btn{min-width:190px}
/* ─── 11. THE THONG TIN ─────────────────────────────────────────── */
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
list-style:none;padding:0;margin:0}
.card{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);padding:18px}
.card h3{font-size:var(--t-lg)}
.card p{font-size:var(--t-sm);color:var(--fg-2);margin:0}
.card.sig{border-color:var(--accent);border-width:2px}
/* ─── 12. KHOI CHO BANG CHUNG ───────────────────────────────────
Nen vang, vien dut. Nhin thay duoc thi khong ai lo tay dem di dung that. */
.ph{background:#FFF6D6;border:2px dashed #C99A00;color:#5A4300;
border-radius:var(--r-sm);padding:14px 16px;margin:16px 0;
font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
letter-spacing:.04em;text-transform:uppercase}
.ph small{display:block;font-family:var(--f-body);font-weight:400;
font-size:var(--t-sm);letter-spacing:0;text-transform:none;
margin-top:6px;color:#6B5200;line-height:1.55}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ph{background:#3A3208;border-color:#C99A00;color:#FFE9A3}
:root:not([data-theme="light"]) .ph small{color:#E0C97A}
}
/* ─── 13. FOOTER ────────────────────────────────────────────────── */
footer{background:var(--ink);color:#C9CBE4;padding-block:44px;margin-top:8px;
border-top:1px solid transparent}
/* Che do toi: nen trang cung la mau ink nen phai co duong vien,
khong thi chan trang tan vao than trang. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) footer{border-top-color:var(--line)}
}
:root[data-theme="dark"] footer{border-top-color:var(--line)}
footer a{color:#FFFFFF}
footer b{color:#FFFFFF;font-family:var(--f-display)}
.cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
font-size:var(--t-sm);line-height:1.85}
.lockup{margin-top:30px;padding-top:22px;border-top:1px solid #2C2F5E;
font-size:var(--t-xs);color:#8B8EAF;line-height:1.7}
.lockup .lk{display:block;font-family:var(--f-display);font-weight:700;
color:#FFFFFF;font-size:var(--t-sm);margin-bottom:8px}
/* ─── 14. PHU TRO ───────────────────────────────────────────────── */
.eyebrow{display:inline-block;font-family:var(--f-display);font-weight:700;
font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--fg-2);margin-bottom:10px}
.info{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:0}
.info div{display:flex;flex-wrap:wrap;gap:4px 16px;padding:11px 0;
border-bottom:1px solid var(--line)}
.info div:last-child{border-bottom:0}
.info b{font-family:var(--f-display);min-width:190px;flex-shrink:0}
.info span{color:var(--fg-2)}