:root{--vang:#f5c518;--vang-nhat:#fff4c7;--vien-vang:#ecd27a;--nen:#fffbf0;--the:#ffffff;--vien:#f0e3bb;--chu:#2b2418;--phu:#6b5d3f;--do:#a32020;--do-nen:#fbe0e0;--xanh:#1a6e47;--xanh-nen:#e4f5ec;--cam:#7a4b00;--cam-nen:#fff1cc}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
p.ghi-chu{margin:0}
#phan{display:flex;flex-direction:column;gap:10px}
html,body{margin:0;background:var(--nen);color:var(--chu);font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
#app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.hd{position:sticky;top:0;z-index:5;height:62px;padding:0 16px;padding-top:env(safe-area-inset-top,0);display:flex;align-items:center;gap:10px;background:var(--vang);box-sizing:content-box}
.logo{width:38px;height:38px;border-radius:11px;background:var(--chu);color:var(--vang);display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:800;flex:none}
.hd-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.hd-txt b{font-family:'Baloo 2',sans-serif;font-size:18px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-txt small{font-size:12px}
.hd-gio{display:flex;flex-direction:column;align-items:flex-end;font-size:11px}
.hd-gio b{font-family:'Baloo 2',sans-serif;font-size:16px;line-height:18px}
.bao{margin:10px 16px 0;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:600}
.bao.loi{background:var(--do-nen);color:var(--do)}
.bao.cham{background:var(--cam-nen);color:var(--cam)}
.noi-dung{flex:1;padding:12px 16px 96px;display:flex;flex-direction:column;gap:12px}
.ghi-chu{font-size:12px;color:var(--phu)}
.the{background:var(--the);border:1px solid var(--vien);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.the.nho{border-radius:14px;padding:10px 12px;gap:4px}
.the.noi{background:var(--vang-nhat);border-color:var(--vien-vang)}
.the.do{background:#fff2f2;border-color:#efb9b9}
.tieu-de{font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:700;line-height:24px;margin:4px 0 0}
.nhan{font-size:13px;font-weight:600;color:var(--phu)}
.so-to{font-family:'Baloo 2',sans-serif;font-size:36px;font-weight:800;line-height:40px}
.so-vua{font-family:'Baloo 2',sans-serif;font-size:20px;font-weight:700;line-height:24px}
.thanh{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#f3ead2}
.thanh span{display:block;height:100%}
.hang{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.hang b{white-space:nowrap}
.luoi3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.luoi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.luoi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.o-so{background:var(--nen);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;min-width:0}
.o-so span{font-size:10.5px;color:var(--phu);font-weight:600}
.o-so b{font-size:13px}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.chip.xanh{background:var(--xanh-nen);color:var(--xanh)}
.chip.do{background:var(--do-nen);color:var(--do)}
.chip.cam{background:var(--cam-nen);color:var(--cam)}
.chip.xam{background:#efe9da;color:var(--phu)}
.chu-y{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f3ead2}
.chu-y:last-child{border-bottom:0}
.cham-tron{width:10px;height:10px;border-radius:999px;flex:none;margin-top:6px}
.chu-y b{font-size:14px;display:block}
.chu-y small{font-size:12px;color:var(--phu);display:block}
.dong{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f3ead2;font-size:13px}
.dong:last-child{border-bottom:0}
.dong .ten{width:58px;font-weight:700;flex:none}
.dong .giua{flex:1;min-width:0}
.chon{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chon input,.chon select{height:40px;border:1px solid var(--vien);border-radius:10px;padding:0 10px;background:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--vien);background:#fff;font-size:13px;font-weight:600}
.chips button.on{background:var(--chu);color:var(--vang);border-color:var(--chu)}
.nut{height:48px;border:0;border-radius:14px;background:var(--chu);color:var(--vang);font-weight:700;font-size:16px;cursor:pointer;padding:0 18px}
.nut:disabled{opacity:.5}
.nut.phu{background:#fff;color:var(--chu);border:1px solid var(--vien)}
.o-nhap{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--phu)}
.o-nhap input,.o-nhap select,.o-nhap textarea{height:46px;border:1px solid var(--vien);border-radius:12px;padding:0 12px;background:#fff;font-size:16px;color:var(--chu);font-weight:500}
.o-nhap textarea{height:72px;padding:10px 12px;resize:vertical}
.loi-nho{font-size:13px;color:var(--do);min-height:18px}
.cot{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:6px}
.cot span{flex:1;background:var(--vang);border-radius:4px 4px 0 0;min-height:2px}
.cot span.hom-nay{background:var(--chu)}
.trong{font-size:14px;color:var(--phu);text-align:center;padding:14px 0}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#fff;border-top:1px solid var(--vien);padding-bottom:env(safe-area-inset-bottom,0);max-width:520px;margin:0 auto}
.tabbar button{height:62px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--phu);padding:0;cursor:pointer}
.tabbar button.on{color:var(--chu);font-weight:800}
.ic{width:20px;height:20px;border:2px solid currentColor;box-sizing:border-box;display:block}
.ic-o{border-radius:6px}.ic-v{border-radius:999px}
.tabbar button.on .ic{background:var(--vang);border-color:var(--chu)}
.dang-nhap{min-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:12px 4px}
.dang-nhap h1{font-family:'Baloo 2',sans-serif;font-size:24px;margin:0}
.dang-nhap p{margin:0;color:var(--phu);font-size:14px}
.ma-o{height:56px;border:1px solid var(--vien);border-radius:14px;padding:0 14px;font-size:20px;letter-spacing:2px;text-transform:uppercase;background:#fff}
.nho-gon{font-size:12px;color:var(--phu)}
@media (min-width:700px){#app{max-width:560px}.tabbar{max-width:560px}}