/* Web PhinHolic - tông mẫu B (xanh đậm, kem, nâu) chị Mai chọn 26/09/2026. */
:root { --kem:#f7f1e6; --kem3:#fffdf8; --vien:#e6dcc8; --xanh:#3f7a62; --xanh-dam:#23483a; --nau:#a77b4f; --chu:#2a2620; --mo:#7a7062; }
body.phin { background:var(--kem); color:var(--chu); font-family:'Be Vietnam Pro',sans-serif; font-size:15px; overflow-x:hidden; }
body.phin a { color:inherit; }

/* Đầu trang */
.phin-dau { display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--kem3); border-bottom:1px solid var(--vien); }
.phin-thuonghieu { display:flex; align-items:center; gap:10px; text-decoration:none !important; }
.phin-thuonghieu img { width:46px; height:46px; object-fit:contain; mix-blend-mode:multiply; }
.phin-thuonghieu span { font-family:'Lora',serif; font-weight:700; font-size:21px; color:var(--xanh-dam); }
.phin-menu { margin-left:auto; display:flex; gap:22px; flex-wrap:wrap; }
.phin-menu a { color:var(--mo) !important; text-decoration:none !important; padding:6px 0; border-bottom:2px solid transparent; }
.phin-menu a.on, .phin-menu a:hover { color:var(--xanh-dam) !important; font-weight:600; border-color:var(--nau); }
.phin-nut-menu { display:none; margin-left:auto; background:none; border:0; font-size:26px; color:var(--xanh-dam); }

/* Trang chủ: logo to */
.phin-hero { display:flex; align-items:center; justify-content:center; gap:48px; padding:40px 20px 30px; }
.phin-hero-logo { width:240px; height:240px; object-fit:contain; mix-blend-mode:multiply; }
.phin-hero small { color:var(--nau); font-weight:600; letter-spacing:2px; }
.phin-hero h1 { font-family:'Lora',serif; font-weight:600; font-size:44px; line-height:1.15; color:var(--xanh-dam); margin:10px 0 12px; }
.phin-hero p { color:var(--mo); font-size:17px; margin-bottom:22px; }
.phin-nut { display:inline-block; background:var(--xanh-dam); color:#fff !important; font-weight:600; padding:13px 28px; border-radius:999px; text-decoration:none !important; }

.phin-dai { display:flex; flex-wrap:wrap; gap:6px 22px; padding:10px 20px; background:#e6efe9; color:var(--xanh-dam); font-size:14px; }

/* Danh sách ship đồ uống dùng chung (home/banhang/partials/ship-do-uong) - chỉ đổi màu, giữ bố cục. */
.phin-ship .header { position:sticky; top:0; background:var(--kem3); z-index:50; }
.phin-ship .header .mt-2 { margin-top:0 !important; padding:8px 12px; }
.phin-ship #searchForm { background:transparent; font-family:Oswald,sans-serif; }
.phin-ship .scrollmenu { position:static; background:var(--xanh-dam); }
.phin-ship .scrollmenu a { font-family:Oswald,sans-serif; color:#eee4d2; padding:9px 12px; }
.phin-ship .scrollmenu a:hover { background:var(--xanh); color:#fff; }
.phin-ship .pt-80 { padding-top:0; }
.phin-ship h4 { font-family:Oswald,sans-serif; font-weight:500; font-size:26px; color:var(--xanh-dam); margin-top:10px; }
.phin-ship .card { background:var(--kem3); border:1px solid var(--vien); border-radius:14px; }
.phin-ship .title, .phin-ship .title a { font-family:Oswald,sans-serif; font-weight:500; color:var(--chu); }
.phin-ship .price { font-family:'Be Vietnam Pro',sans-serif; color:var(--nau) !important; }
.phin-ship .float-button { background-color:var(--xanh-dam) !important; font-family:Oswald,sans-serif; bottom:14px; right:14px; }

/* Trang đang cập nhật */
.phin-sap-co { text-align:center; padding:80px 20px 100px; }
.phin-sap-co small { color:var(--nau); font-weight:600; letter-spacing:2px; }
.phin-sap-co h1 { font-family:'Lora',serif; font-size:40px; color:var(--xanh-dam); margin:10px 0; }
.phin-sap-co p { color:var(--mo); margin-bottom:24px; }

/* Cuối trang */
.phin-song { display:block; width:100%; height:50px; margin-top:30px; }
.phin-song path { fill:var(--xanh-dam); }
.phin-cuoi { background:var(--xanh-dam); color:#d6e3dc; font-size:14px; line-height:1.8; }
.phin-cuoi-luoi { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:16px 20px 80px; }
.phin-cuoi b { display:block; color:#fff; font-family:'Lora',serif; font-size:16px; margin-bottom:6px; }
.phin-cuoi a { color:#d6e3dc !important; }

/* Nút chat nổi: icon tròn có logo Zalo / Messenger, nhấp nháy nhẹ (bên trái, nút giỏ hàng ở bên phải) */
.phin-chat { position:fixed; left:14px; bottom:16px; z-index:9999; display:flex; flex-direction:column; gap:12px; }
.phin-chat a { width:54px; height:54px; border-radius:50%; display:block; box-shadow:0 8px 20px rgba(0,0,0,.22); position:relative; animation:phin-chat-lac 3s ease-in-out infinite; }
.phin-chat a svg { width:100%; height:100%; display:block; }
.phin-chat a::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:3px solid currentColor; opacity:0; animation:phin-chat-song 2s ease-out infinite; }
.phin-chat .zalo { color:#0068ff; } .phin-chat .messenger { color:#a033ff; animation-delay:1.5s; } .phin-chat .messenger::after { animation-delay:1s; }
@keyframes phin-chat-song { 0% { transform:scale(.85); opacity:.7; } 100% { transform:scale(1.35); opacity:0; } }
@keyframes phin-chat-lac { 0%, 86%, 100% { transform:rotate(0); } 89% { transform:rotate(-12deg); } 92% { transform:rotate(12deg); } 95% { transform:rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .phin-chat a, .phin-chat a::after { animation:none; } }

@media (max-width: 760px) {
    .phin-dau { flex-wrap:wrap; padding:8px 14px; }
    .phin-nut-menu { display:block; }
    .phin-menu { display:none; width:100%; flex-direction:column; gap:0; }
    body.mo-menu .phin-menu { display:flex; }
    .phin-menu a { padding:10px 0; border-bottom:1px solid var(--vien); }
    .phin-hero { flex-direction:column; gap:14px; padding:24px 16px; text-align:center; }
    .phin-hero-logo { width:170px; height:170px; }
    .phin-hero h1 { font-size:30px; }
    .phin-cuoi-luoi { grid-template-columns:1fr 1fr; gap:18px; font-size:13px; }
}

/* Giỏ hàng (home/banhang/partials/gio-hang trong khung PhinHolic): bỏ ảnh bìa theme cũ, đổi màu nút. */
body.phin .gio-hang .edgtf-title { height:auto !important; background:none !important; padding:28px 20px 0; }
body.phin .gio-hang .edgtf-title-image { display:none; }
body.phin .gio-hang .edgtf-title h1, body.phin .gio-hang .edgtf-title h1 span { color:var(--xanh-dam) !important; font-family:'Lora',serif; font-size:34px; }
body.phin .gio-hang h3 { font-family:Oswald,sans-serif; color:var(--xanh-dam); }
body.phin .gio-hang .edgtf-btn, body.phin .gio-hang button[type=submit], body.phin .gio-hang .btn-primary { background-color:var(--xanh-dam) !important; border-color:var(--xanh-dam) !important; color:#fff !important; }
body.phin .gio-hang .shopping-cart-table .tuy-chon-mon { color:var(--mo); }
body.phin .edgtf-content-inner { background:transparent; }
body.phin .gio-hang .edgtf-container { max-width:1160px; width:auto; margin:0 auto; padding:0 20px 20px; background:var(--kem3); border-radius:18px; }
body.phin .gio-hang .edgtf-title { position:static !important; margin-bottom:18px; }
body.phin .gio-hang .edgtf-title-holder, body.phin .gio-hang .edgtf-title .edgtf-container { position:static !important; height:auto !important; background:none; display:block; }
body.phin .gio-hang .woocommerce-cart-form > h3:first-child { display:none; }
@media (max-width: 760px) {
    body.phin .gio-hang .edgtf-container { padding:0 14px 14px; border-radius:0; }
    body.phin .gio-hang .edgtf-title h1, body.phin .gio-hang .edgtf-title h1 span { font-size:28px; }
}
body.phin .gio-hang .edgtf-container-inner { width:auto !important; max-width:100%; }
body.phin .gio-hang .vc_row { margin-left:0; margin-right:0; }

/* Working Space: danh sách thẻ khu vực */
.ws-dau { text-align:center; padding:40px 20px 10px; }
.ws-dau small, .kg-khung small { color:var(--nau); font-weight:600; letter-spacing:1.5px; }
.ws-dau h1 { font-family:'Lora',serif; font-size:40px; color:var(--xanh-dam); margin:8px 0; }
.ws-dau p { color:var(--mo); max-width:560px; margin:0 auto; }
.ws-luoi { max-width:1160px; margin:0 auto; padding:28px 20px 10px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ws-luoi > h2 { grid-column:1/-1; font-family:'Lora',serif; color:var(--xanh-dam); font-size:26px; margin:0; }
.ws-the { background:var(--kem3); border-radius:20px; overflow:hidden; box-shadow:0 10px 26px rgba(60,40,20,.08); text-decoration:none !important; color:var(--chu) !important; display:flex; flex-direction:column; transition:transform .15s; }
.ws-the:hover { transform:translateY(-3px); }
.ws-the-anh { aspect-ratio:4/3; background:#e9e1d1 center/cover no-repeat; }
.ws-the-noi { padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.ws-the h3 { font-family:'Lora',serif; font-size:21px; color:var(--xanh-dam); margin:4px 0 6px; }
.ws-the p { color:var(--mo); font-size:14px; margin:0 0 8px; }
.ws-the-tt { display:flex; gap:14px; font-size:13px; color:var(--mo); margin-bottom:10px; }
.ws-the-gia { margin-top:auto; display:flex; justify-content:space-between; align-items:center; color:var(--nau); }
.ws-the-gia span { color:var(--xanh-dam); font-weight:600; font-size:14px; }
.ws-the-gia i { font-style:normal; }
.ws-trong { grid-column:1/-1; text-align:center; color:var(--mo); padding:40px 0; }

/* Working Space: chi tiết khu vực (kiểu trang workshop HiPs) */
.kg-anh-lon { height:360px; background:#e9e1d1 center/cover no-repeat; }
.kg-khung { max-width:1160px; margin:0 auto; padding:26px 20px 10px; display:grid; grid-template-columns:1fr 360px; gap:34px; align-items:start; }
.kg-lui { color:var(--mo) !important; font-size:14px; }
.kg-trai h1 { font-family:'Lora',serif; font-size:34px; color:var(--xanh-dam); margin:8px 0 4px; }
.kg-phu { color:var(--mo); font-style:italic; }
.kg-tt { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--vien); border-radius:14px; background:var(--kem3); margin:16px 0 8px; }
.kg-tt > div { flex:1; min-width:120px; padding:12px 16px; }
.kg-tt > div + div { border-left:1px solid var(--vien); }
.kg-tt small { display:block; color:var(--mo); font-size:12px; letter-spacing:0; font-weight:400; }
.kg-trai h2 { font-family:'Lora',serif; font-size:22px; color:var(--xanh-dam); margin:26px 0 10px; }
.kg-mo-ta { line-height:1.7; }
.kg-nhom { font-size:12px; font-weight:700; letter-spacing:1px; color:var(--xanh); text-transform:uppercase; margin:14px 0 8px; }
.kg-gois { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.kg-goi { display:block; margin:0; cursor:pointer; }
.kg-goi input { position:absolute; opacity:0; }
.kg-goi-noi { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:12px 14px; border-radius:14px; border:1.5px solid var(--vien); background:var(--kem3); }
.kg-goi-noi b { font-size:15px; }
.kg-goi-noi span { color:var(--mo); font-size:13px; grid-column:1; }
.kg-goi-noi em { font-style:normal; font-weight:700; color:var(--nau); grid-column:2; grid-row:1 / span 2; align-self:center; }
.kg-goi-noi small { grid-column:1/-1; color:var(--mo); font-size:12px; letter-spacing:0; font-weight:400; }
.kg-goi input:checked + .kg-goi-noi { border-color:var(--xanh); background:#e3efe8; }
.kg-bao-gom { padding-left:0; list-style:none; }
.kg-bao-gom li::before { content:'✓ '; color:var(--xanh); font-weight:700; }
.kg-anhs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kg-anhs img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.kg-phai { position:sticky; top:16px; }
.kg-dat { background:var(--kem3); border:1px solid var(--vien); border-radius:20px; padding:20px; box-shadow:0 12px 30px rgba(60,40,20,.08); }
.kg-dat h3 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:22px; }
.kg-dat label { display:block; font-size:13px; color:var(--mo); margin-bottom:10px; }
.kg-dat input, .kg-dat textarea { display:block; width:100%; margin-top:4px; border:1px solid var(--vien); border-radius:10px; padding:8px 10px; background:#fff; color:var(--chu); }
.kg-hai { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kg-ban { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.kg-ban-o { display:flex; gap:8px; align-items:center; font-size:14px; }
.kg-ban-o small { color:#8a8a8a; }
.kg-voucher { background:#fff4d6; border-radius:10px; padding:1px 8px; font-size:13px; }
.kg-bay { position:absolute !important; left:-9999px; }
.kg-tam { display:flex; justify-content:space-between; border-top:1px dashed var(--vien); padding-top:12px; margin:6px 0 12px; color:var(--mo); }
.kg-tam b { color:var(--nau); font-size:18px; }
.kg-dat button { width:100%; border:0; border-radius:999px; background:var(--xanh-dam); color:#fff; font-weight:600; padding:13px; }
.kg-nho { text-align:center; font-size:12px; color:var(--mo); margin:8px 0 0; }
.kg-ok { background:#e3efe8; color:var(--xanh-dam); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:14px; }
.kg-loi { background:#fbe9e7; color:#a33; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13px; }
.kg-khoang { font-size:13px; color:#5a4636; margin:-4px 0 10px; }
.kg-khoang b { font-weight:600; }
@media (max-width: 900px) {
    .ws-luoi { grid-template-columns:1fr 1fr; }
    .kg-khung { grid-template-columns:1fr; }
    .kg-phai { position:static; }
}
@media (max-width: 560px) {
    .ws-luoi { grid-template-columns:1fr; }
    .ws-dau h1 { font-size:30px; }
    .kg-anh-lon { height:220px; }
    .kg-gois, .kg-anhs { grid-template-columns:1fr; }
}

/* Sản phẩm mang về: tối giản, không khung, thẻ nhỏ (chị Mai 26/09) */
.sp-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 22px; padding:16px 20px 0; }
.sp-tabs a { padding:6px 0; color:var(--mo) !important; text-decoration:none !important; font-weight:500; border-bottom:2px solid transparent; }
.sp-tabs a:hover { color:var(--xanh-dam) !important; border-color:var(--nau); }
.sp-nhom { max-width:1080px; margin:0 auto; padding:30px 20px 0; }
.sp-nhom h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:22px; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--vien); }
.sp-luoi { display:grid; grid-template-columns:repeat(5,1fr); gap:40px 34px; }
.sp-the { display:flex; flex-direction:column; }
.sp-the[id] { scroll-margin-top:90px; }
.sp-the:target { outline:2px solid var(--xanh-dam); outline-offset:6px; border-radius:8px; }
.sp-anh { aspect-ratio:1; border-radius:10px; overflow:hidden; background:#efe7d6; }
.sp-anh img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.sp-the:hover .sp-anh img { transform:scale(1.04); }
.sp-the h3 { font-size:14px; font-weight:500; margin:10px 0 4px; line-height:1.4; flex:1; color:var(--chu); }
.sp-duoi { display:flex; justify-content:space-between; align-items:center; }
.sp-duoi b { color:var(--chu); font-weight:600; font-size:14px; }
.sp-duoi .thanh-toan { display:flex; align-items:center; gap:2px; }
.sp-duoi .thanh-toan a { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; text-decoration:none !important; font-weight:600; line-height:1; border:1px solid var(--vien); color:var(--chu) !important; background:transparent; }
.sp-duoi .thanh-toan a.cong-so-luong { border-color:var(--xanh) !important; background:var(--xanh) !important; color:#fff !important; font-size:17px; }
.sp-lua-chon { font-size:12px; color:var(--mo); margin:-2px 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-duoi input { width:24px; border:0; background:transparent; text-align:center; font-size:13px; }
.sp-het { font-size:12px; color:var(--mo); }
.sp-gio { position:fixed; right:14px; bottom:14px; z-index:9998; background:var(--xanh-dam); color:#fff !important; font-family:Oswald,sans-serif; padding:12px 18px; border-radius:12px; text-decoration:none !important; box-shadow:0 8px 20px rgba(35,72,58,.3); }
@media (max-width: 1000px) { .sp-luoi { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 760px) { .sp-luoi { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px) { .sp-luoi { grid-template-columns:1fr 1fr; gap:30px 18px; } .sp-the h3 { font-size:13px; } }
.sp-anh img.sp-khong-anh { object-fit:contain; padding:22%; opacity:.5; }
.sp-luu-y { margin-top:10px !important; font-size:14px; color:var(--nau) !important; }

/* Trang nội dung (Our story): bố cục bài giới thiệu thương hiệu */
.tr-bia { min-height:460px; background:var(--xanh-dam) center/cover no-repeat; display:flex; align-items:flex-end; position:relative; }
.tr-bia::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,40,32,.1) 20%, rgba(20,40,32,.78)); }
.tr-bia-chu { position:relative; max-width:1100px; width:100%; margin:0 auto; padding:40px 24px; color:#fff; }
.tr-bia-chu small { letter-spacing:3px; font-weight:600; opacity:.85; font-size:12px; }
.tr-bia-chu h1 { font-family:'Lora',serif; font-size:60px; line-height:1.05; margin:10px 0; }
.tr-bia-chu p { font-size:18px; opacity:.9; margin:0; font-style:italic; }
.tr-bia-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tr-bia:has(.tr-bia-video)::before { z-index:1; }
.tr-bia:has(.tr-bia-video) .tr-bia-chu { z-index:2; }
.tr-bai { padding:20px 0 30px; }
.tr-cot { max-width:var(--tr-rong, 900px); margin:0 auto; padding:26px 24px; }
.tr-cot h2, .tr-ghep-chu h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:32px; margin-bottom:16px; }
.tr-cot p, .tr-ghep-chu p { font-size:17.5px; line-height:1.85; color:var(--chu); margin-bottom:16px; }
.tr-cot.mo-dau { padding-top:56px; }
.tr-cot.mo-dau p:first-child { font-family:'Lora',serif; font-size:24px; line-height:1.55; color:var(--xanh-dam); }
.tr-cot.mo-dau p:first-child::first-letter { float:left; font-size:78px; line-height:.85; padding:6px 10px 0 0; color:var(--nau); font-weight:700; }
.tr-trich { max-width:var(--tr-rong, 900px); margin:30px auto; padding:10px 24px; text-align:center; font-family:'Lora',serif; font-size:40px; line-height:1.3; color:var(--xanh-dam); font-style:italic; border:0; }
.tr-trich span { display:block; font-size:80px; line-height:.6; color:var(--nau); font-style:normal; }
.tr-moc { background:var(--kem3); margin:0; padding:56px 24px; }
.tr-moc-luoi { max-width:900px; margin:0 auto; position:relative; }
.tr-moc-luoi::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--nau); transform:translateX(-1px); }
.tr-moc-the { position:relative; width:50%; padding:0 46px 26px 0; text-align:right; }
.tr-moc-the:nth-child(even) { margin-left:50%; padding:0 0 26px 46px; text-align:left; }
.tr-moc-the::after { content:''; position:absolute; top:6px; right:-11px; width:22px; height:22px; border-radius:50%; background:var(--xanh-dam); border:4px solid var(--kem3); box-shadow:0 0 0 2px var(--nau); }
.tr-moc-the:nth-child(even)::after { right:auto; left:-11px; }
.tr-moc-anh { display:inline-block; width:150px; aspect-ratio:1; border-radius:50% 50% 18px 18px; overflow:hidden; box-shadow:0 10px 24px rgba(60,40,20,.14); background:#efe7d6; margin-bottom:8px; }
.tr-moc-anh img { width:100%; height:100%; object-fit:cover; }
.tr-moc-nam { display:block; font-family:Oswald,sans-serif; font-weight:500; font-size:34px; color:var(--xanh-dam); }
.tr-moc-the h3 { font-family:'Lora',serif; color:var(--nau); font-size:19px; margin:2px 0 6px; }
.tr-moc-the p { font-size:15.5px; line-height:1.65; color:var(--mo); }
.tr-anh-rong { margin:40px 0; height:520px; background:#ccc center/cover no-repeat; position:relative; display:flex; align-items:flex-end; }
.tr-anh-rong figcaption { position:relative; margin:0 auto 34px; background:rgba(35,72,58,.86); color:#fff; font-family:'Lora',serif; font-size:24px; padding:14px 28px; border-radius:14px; max-width:90%; text-align:center; }
.tr-bai { counter-reset:muc; }
.tr-ghep { counter-increment:muc; position:relative; min-height:62vh; background:var(--xanh-dam) center/cover no-repeat; display:flex; align-items:center; color:#fff; padding:72px 24px; margin:0; }
.tr-ghep::before { content:''; position:absolute; inset:0; background:rgba(14,26,21,.72); }
.tr-ghep-chu { position:relative; max-width:var(--tr-rong, 900px); margin:0 auto; width:100%; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.tr-ghep-chu::before { content:counter(muc, decimal-leading-zero); display:block; font-family:Oswald,sans-serif; font-size:110px; line-height:.9; color:#e8c993; margin-bottom:6px; }
.tr-ghep-chu h2 { color:#fff; }
.tr-ghep-chu p { color:#fff; }
.tr-ghep-anh { display:grid; gap:14px; margin-top:22px; text-shadow:none; }
.tr-ghep-anh.so-2 { grid-template-columns:1fr 1fr; }
.tr-co-so { margin-top:26px; text-shadow:none; }
.tr-co-so h3 { font-family:Lora,serif; color:#e8c993; font-size:22px; margin-bottom:12px; }
.tr-co-so-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.tr-co-so-luoi.bc-6-anh, .tr-co-so-luoi.bc-4-anh { aspect-ratio:4/3; }
.tr-co-so-luoi.bc-6-anh { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
.tr-co-so-luoi.bc-6-anh img:nth-child(4) { grid-column:span 2; grid-row:span 2; }
.tr-co-so-luoi.bc-4-anh { grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); }
.tr-co-so-luoi.bc-4-anh img { grid-column:1; }
.tr-co-so-luoi.bc-4-anh img:nth-child(4) { grid-column:2; grid-row:1 / 4; }
.tr-co-so-luoi.bc-6-anh img, .tr-co-so-luoi.bc-4-anh img { height:100%; aspect-ratio:auto; min-height:0; }
.tr-co-so-luoi img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.tr-ghep-anh img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.tr-cot.ket { max-width:none; background:var(--xanh-dam); padding:110px max(24px, calc((100% - 1160px) / 2)) 70px; margin-top:0; text-align:left; display:grid; grid-template-columns:4fr 6fr; column-gap:64px; align-items:start; }
.tr-cot.ket::before { content:''; grid-column:1; grid-row:1 / span 20; align-self:center; justify-self:center; width:min(100%,380px); aspect-ratio:360/422; background:url('/images/phinholic/our-story/why-not-phin.png') center/contain no-repeat; }
.tr-cot.ket h2 { grid-column:2; color:#fff; font-size:56px; letter-spacing:2px; margin-bottom:34px; }
.tr-cot.ket p { grid-column:2; color:#fff; opacity:.93; max-width:680px; margin:0 0 22px; }
.tr-cot.ket + .tr-trich { max-width:none; margin:0 0 -30px; padding:30px 24px 80px; background:var(--xanh-dam); color:#e8c993; }
.tr-cot.ket + .tr-trich span { color:#e8c993; }
body:has(.tr-cot.ket) .phin-song { display:none; }
body:has(.tr-cot.ket) .tr-bai { padding-bottom:0; }
body:has(.tr-cot.ket) .phin-cuoi { background:var(--xanh-dam); }
body:has(.tr-cot.ket) .tr-cot.ket + .tr-trich { margin-bottom:0; padding-bottom:36px; }
body:has(.tr-cot.ket) .phin-cuoi { padding:0 16px 40px; }
body:has(.tr-cot.ket) .phin-cuoi-luoi { background:rgba(255,255,255,.07); border:1px solid rgba(232,201,147,.25); border-radius:22px; padding:28px 30px; max-width:1100px; }
.tr-bai > .tr-cot.ket:last-child p:last-child { text-align:center; font-family:'Lora',serif; font-style:italic; color:var(--nau); font-size:20px; margin-top:26px; }
@media (max-width: 560px) {
    .tr-bia { min-height:340px; } .tr-bia-chu h1 { font-size:38px; }
    .tr-cot p { font-size:15.5px; line-height:1.65; margin-bottom:12px; }
    .tr-cot.mo-dau p:first-child { font-size:20px; }
    .tr-cot.ket { grid-template-columns:1fr; padding:56px 22px 40px; column-gap:0; } .tr-cot.ket::before { grid-column:1; grid-row:1; width:min(68%,260px); margin-bottom:30px; } .tr-cot.ket h2, .tr-cot.ket p { grid-column:1; } .tr-cot.ket h2 { font-size:34px; margin-bottom:22px; } .tr-cot.ket p { margin-bottom:16px; }
    .tr-trich { font-size:23px; line-height:1.35; margin:14px auto; } .tr-trich span { font-size:56px; }
    .tr-moc { padding:28px 16px; } .tr-moc-luoi::before { left:11px; }
    .tr-moc-the, .tr-moc-the:nth-child(even) { width:100%; margin-left:0; padding:0 0 14px 36px; text-align:left; }
    .tr-moc-nam { font-size:24px; line-height:1.15; } .tr-moc-the h3 { font-size:16px; margin:0 0 2px; } .tr-moc-the p { font-size:14px; line-height:1.45; } .tr-moc-anh { width:96px; margin-bottom:4px; } .tr-moc-the::after { top:3px; width:18px; height:18px; }
    .tr-moc-the::after, .tr-moc-the:nth-child(even)::after { left:0; right:auto; }
    .tr-ghep { min-height:0; padding:36px 18px; } .tr-ghep-chu::before { font-size:48px; margin-bottom:2px; }
    .tr-ghep-chu h2 { font-size:21px; line-height:1.3; margin-bottom:10px; }
    .tr-ghep-chu p { font-size:14.5px; line-height:1.55; margin-bottom:9px; }
    .tr-ghep-anh { margin-top:12px; gap:10px; }
    .tr-co-so { margin-top:16px; } .tr-co-so h3 { font-size:17px; margin-bottom:8px; } .tr-co-so-luoi { grid-template-columns:1fr 1fr; gap:8px; } .tr-co-so-luoi.bc-6-anh { grid-template-columns:repeat(3,1fr); gap:5px; } .tr-co-so-luoi.bc-4-anh { gap:5px; } .tr-co-so-luoi.bc-6-anh img, .tr-co-so-luoi.bc-4-anh img { border-radius:8px; }
    .tr-ghep-anh.so-2 { grid-template-columns:1fr; }
    .tr-cot.ket h2 { font-size:38px; }
    .tr-anh-rong { height:300px; } .tr-anh-rong figcaption { font-size:18px; }
}

/* Trang chính sách */
.cs-noi-dung { max-width:820px; margin:20px auto 30px; padding:28px 32px; background:var(--kem3); border-radius:20px; line-height:1.8; font-size:16px; }
.cs-noi-dung img { max-width:100%; height:auto; }
.cs-noi-dung h1, .cs-noi-dung h2, .cs-noi-dung h3 { font-family:'Lora',serif; color:var(--xanh-dam); }
@media (max-width: 560px) { .cs-noi-dung { padding:20px 16px; border-radius:0; } }

/* Đánh giá khách (trang chủ) */
.dg-khung { max-width:1160px; margin:0 auto; padding:10px 20px 34px; }
.dg-dau { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.dg-dau h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:26px; margin:0; }
.dg-nut { display:flex; gap:8px; flex-wrap:wrap; }
.dg-nut a { font-size:13px; padding:7px 14px; border-radius:999px; border:1px solid var(--vien); background:var(--kem3); color:var(--xanh-dam) !important; text-decoration:none !important; }
.dg-luoi { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; }
.dg-luoi::-webkit-scrollbar { display:none; }
.dg-truot { position:relative; }
.dg-nhan-mau { display:inline-block; background:#f2c14e; color:var(--xanh-dam); font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; }
.dg-the { flex:0 0 320px; scroll-snap-align:start; margin:0; background:var(--kem3); border:1px solid var(--vien); border-radius:18px; padding:18px 20px; display:flex; flex-direction:column; }
.dg-sao { color:#f2a93b; letter-spacing:2px; } .dg-sao span { color:#e3d9c6; }
.dg-the blockquote { margin:10px 0 12px; font-size:15px; line-height:1.65; flex:1; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.dg-the figcaption { font-size:13px; color:var(--mo); }
@media (max-width: 560px) { .dg-the { flex-basis:82%; } }
.dg-uu-dai { background:#fbf1dc; border:1px dashed #e0c58f; color:#7a5a1d; border-radius:12px; padding:10px 14px; font-size:14px; margin:0 0 14px; }

/* Đầu trang Sản phẩm: chữ nhỏ hơn, mỗi câu một dòng trên máy tính (chị Tuyền 26/09) */
.sp-dau p { max-width:none; font-size:15px; margin-bottom:4px; }
.sp-dau p.sp-luu-y { font-size:13.5px; margin-top:4px !important; }
/* Tên danh mục in hoa đồng bộ (chị Tuyền 26/09) */
.sp-tabs a, .sp-nhom h2 { text-transform:uppercase; letter-spacing:.5px; }
.sp-nhom h2 { font-family:Oswald,sans-serif; font-weight:500; font-size:22px; }
/* Chọn ngôn ngữ trên đầu trang (chị Mai 26/09); ẩn ô trùng trong danh sách ship đồ uống */
.phin-ngon-ngu { order:3; margin-left:14px; }
.phin-ngon-ngu .chon-ngon-ngu { border-color:var(--vien) !important; color:var(--xanh-dam) !important; }
.phin-ship .header .chon-ngon-ngu { display:none; }
@media (max-width: 760px) { .phin-ngon-ngu { order:0; margin-left:auto; } .phin-nut-menu { margin-left:6px; } }

/* Liên hệ */
.lh-co-so { max-width:1100px; margin:26px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.lh-the { background:var(--kem3); border-radius:20px; overflow:hidden; box-shadow:0 10px 26px rgba(60,40,20,.07); }
.lh-ban-do { width:100%; height:240px; border:0; display:block; }
.lh-noi { padding:18px 22px 22px; }
.lh-noi h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:22px; margin-bottom:8px; }
.lh-noi p { margin:0 0 6px; color:var(--chu); }
.lh-noi .phin-nut { margin-top:10px; padding:10px 22px; }
.lh-kenh { max-width:1100px; margin:34px auto 0; padding:0 20px; text-align:center; }
.lh-kenh h2, .lh-hop-tac h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:26px; }
.lh-kenh p { color:var(--mo); }
.lh-kenh-nut { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.lh-kenh-nut a { padding:11px 22px; border-radius:999px; color:#fff !important; font-weight:600; text-decoration:none !important; }
.lh-zalo { background:#0068ff; } .lh-messenger { background:linear-gradient(135deg,#0099ff,#a033ff,#ff5280); }
.lh-facebook { background:#1877f2; } .lh-instagram { background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); } .lh-tiktok { background:#111; }
.lh-hop-tac { max-width:1060px; margin:40px auto 10px; padding:26px 30px; background:var(--xanh-dam); color:#e6efe9; border-radius:22px; display:flex; align-items:center; gap:24px; justify-content:space-between; }
.lh-hop-tac h2 { color:#fff; margin-bottom:6px; } .lh-hop-tac p { margin:0; }
.lh-hop-tac .phin-nut { background:#fff; color:var(--xanh-dam) !important; white-space:nowrap; }
@media (max-width: 760px) { .lh-co-so { grid-template-columns:1fr; } .lh-hop-tac { flex-direction:column; align-items:flex-start; margin:30px 16px 10px; } }

/* Vé ưu đãi đánh giá - chị Tuyền chọn mẫu B (kem, viền vàng nét đứt) 26/09 */
.dg-ve { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:0; background:var(--xanh-dam); color:#fff; border-radius:20px; overflow:hidden; box-shadow:0 14px 34px rgba(35,72,58,.25); margin-bottom:22px; }
.dg-ve-trai { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--nau); padding:18px 10px; position:relative; }
.dg-ve-trai::after { content:''; position:absolute; right:-9px; top:0; bottom:0; width:18px; background:radial-gradient(circle at 9px 12px, var(--kem) 7px, transparent 7.5px) 0 0/18px 24px repeat-y; }
.dg-ve-trai small { letter-spacing:2px; font-size:11px; opacity:.9; }
.dg-ve-trai b { font-family:Oswald,sans-serif; font-size:52px; line-height:1; }
.dg-ve-trai span { font-size:12px; opacity:.9; }
.dg-ve-giua { padding:18px 26px; }
.dg-ve-giua h2 { font-family:'Lora',serif; font-size:24px; margin:0 0 4px; color:#fff; }
.dg-ve-giua p { margin:0 0 10px; opacity:.85; font-size:14px; }
.dg-buoc { list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; padding:0; font-size:13px; }
.dg-ve-giua { min-width:0; }
.dg-buoc a { color:inherit; font-weight:600; text-decoration:underline; }
.dg-buoc i { font-style:normal; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#f2c14e; color:var(--xanh-dam); font-weight:700; font-size:12px; margin-right:6px; }
.dg-ve-phai { display:flex; flex-direction:column; gap:8px; padding:18px 24px 18px 0; }
.dg-ve-phai a { background:#f2c14e; color:var(--xanh-dam) !important; font-weight:700; padding:10px 18px; border-radius:999px; text-decoration:none !important; white-space:nowrap; text-align:center; }
.dg-tieu-de { font-family:'Lora',serif; color:var(--xanh-dam); font-size:24px; margin:0 0 12px; }
.dg-ve { background:#fff8e8; color:var(--chu); border:2px dashed #e0b453; box-shadow:none; }
.dg-ve-trai { background:#f2c14e; color:var(--xanh-dam); }
.dg-ve-trai::after { background:radial-gradient(circle at 9px 12px, var(--kem) 7px, transparent 7.5px) 0 0/18px 24px repeat-y; }
.dg-ve-giua h2 { color:var(--xanh-dam); }
.dg-buoc i { background:var(--xanh-dam); color:#fff; }
.dg-ve-phai a { background:var(--xanh-dam); color:#fff !important; }
@media (max-width: 760px) {
    .dg-ve { grid-template-columns:96px 1fr; }
    .dg-ve-trai b { font-size:34px; }
    .dg-ve-giua { padding:14px 16px; } .dg-ve-giua h2 { font-size:18px; }
    .dg-ve-phai { grid-column:1 / -1; flex-direction:row; padding:0 16px 16px; }
    .dg-ve-phai a { flex:1; min-width:0; padding:9px 6px; font-size:12.5px; white-space:normal; }
    .dg-ve-giua p { display:none; }
    .dg-buoc { flex-direction:column; gap:6px; font-size:13px; }
}
/* Khối đánh giá + phiếu ưu đãi ở cuối trang chủ */
.dg-cuoi { padding-top:30px; }
.dg-cuoi .dg-luoi { margin-bottom:22px; }

/* Banner trượt trang chủ (chị Mai 27/09) */
.bn-khung { position:relative; }
.bn-day { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.bn-day::-webkit-scrollbar { display:none; }
.bn-slide { isolation:isolate; }
.bn-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bn-slide { flex:0 0 100%; scroll-snap-align:start; min-height:460px; background:var(--xanh-dam) center/cover no-repeat; position:relative; display:flex; align-items:flex-end; }
.bn-slide::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(20,40,32,.82) 0%, rgba(20,40,32,.55) 45%, rgba(20,40,32,.05) 80%); }
.bn-chu { position:relative; z-index:2; max-width:1160px; width:100%; margin:0 auto; padding:40px 24px 64px; color:#fff; }
.bn-chu > * { max-width:560px; }
.bn-logo { width:88px; height:auto; background:var(--kem3); border-radius:18px; padding:8px; margin-bottom:14px; display:block; }
.bn-chu small { letter-spacing:2.5px; font-weight:600; font-size:12px; color:#f2c14e; }
.bn-chu h1 { font-family:'Lora',serif; font-size:44px; line-height:1.12; margin:8px 0 10px; }
.bn-chu p { font-size:17px; opacity:.9; margin-bottom:20px; }
.bn-chu .phin-nut { background:#f2c14e; color:var(--xanh-dam) !important; }
.bn-mui { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.85); color:var(--xanh-dam); font-size:28px; line-height:1; cursor:pointer; }
.bn-mui.trai { left:14px; } .bn-mui.phai { right:14px; }
.bn-cham { position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:8px; }
.bn-cham button { width:9px; height:9px; border-radius:999px; border:0; background:rgba(255,255,255,.55); padding:0; transition:width .2s; cursor:pointer; }
.bn-cham button.on { width:26px; background:#f2c14e; }
@media (max-width: 760px) {
    .bn-slide { min-height:420px; }
    .bn-slide::before { background:linear-gradient(0deg, rgba(20,40,32,.88) 0%, rgba(20,40,32,.5) 55%, rgba(20,40,32,.1) 100%); }
    .bn-chu { padding:24px 18px 50px; } .bn-chu h1 { font-size:28px; } .bn-chu p { font-size:15px; }
    .bn-logo { width:64px; } .bn-mui { display:none; }
}

/* Ô mời đánh giá gọn, tinh tế (chị Mai 27/09): dải mảnh một hàng, ô % nhỏ, nút viền */
.dg-ve { grid-template-columns:86px 1fr auto; border-radius:14px; border-width:1.5px; margin-top:6px; }
.dg-ve-trai { padding:10px 6px; }
.dg-ve-trai small { font-size:9px; letter-spacing:1.5px; }
.dg-ve-trai b { font-size:30px; }
.dg-ve-trai span { font-size:10px; }
.dg-ve-trai::after { right:-6px; width:12px; background:radial-gradient(circle at 6px 8px, var(--kem) 4.5px, transparent 5px) 0 0/12px 16px repeat-y; }
.dg-ve-giua { padding:10px 18px; }
.dg-ve-giua h3 { font-family:'Lora',serif; font-size:17px; color:var(--xanh-dam); margin:0 0 4px; }
.dg-buoc { font-size:12.5px; color:var(--mo); gap:4px 14px; }
.dg-buoc i { width:17px; height:17px; font-size:10px; margin-right:4px; }
.dg-ve-phai { flex-direction:row; gap:6px; padding:10px 16px 10px 0; }
.dg-ve-phai a { background:transparent !important; color:var(--xanh-dam) !important; border:1.5px solid var(--xanh-dam); padding:6px 12px; font-size:13px; font-weight:600; }
.dg-ve-phai a:hover { background:var(--xanh-dam) !important; color:#fff !important; }
@media (max-width: 760px) {
    .dg-ve { grid-template-columns:70px 1fr; }
    .dg-ve-trai b { font-size:24px; }
    .dg-ve-giua { padding:10px 12px; } .dg-ve-giua h3 { font-size:15px; }
    .dg-ve-phai { padding:0 12px 12px; }
    .dg-ve-phai a { font-size:12.5px; padding:7px 8px; }
}
/* Lọc Working Space theo cơ sở */
.ws-loc { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:18px 20px 0; }
.ws-loc button { border:1px solid var(--vien); background:var(--kem3); color:var(--xanh-dam); border-radius:999px; padding:8px 18px; font-weight:500; cursor:pointer; }
.ws-loc button.on { background:var(--xanh-dam); border-color:var(--xanh-dam); color:#fff; }
.dg-buoc li { display:flex; align-items:flex-start; line-height:1.45; }
.dg-buoc li > span { min-width:0; padding-top:1px; }
.dg-buoc li > i { flex:none; }

/* Tin tức, Tuyển dụng (chị Mai 27/09) */
.bv-khung { max-width:1160px; margin:0 auto; padding:40px 20px 60px; }
.bv-dau { text-align:center; margin-bottom:28px; }
.bv-dau small { color:var(--nau); font-weight:600; letter-spacing:2px; }
.bv-dau h1 { font-family:'Lora',serif; color:var(--xanh-dam); margin:6px 0 8px; }
.bv-dau p { color:var(--mo); max-width:620px; margin:0 auto; }
.bv-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.bv-the { display:flex; flex-direction:column; background:var(--kem3); border:1px solid var(--vien); border-radius:18px; overflow:hidden; color:inherit !important; text-decoration:none !important; transition:transform .15s, box-shadow .15s; }
.bv-the:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.08); }
.bv-anh { height:210px; overflow:hidden; flex-shrink:0; background:var(--vien); }
.bv-anh img { width:100%; height:100%; object-fit:cover; display:block; }
.bv-than { padding:16px 18px 20px; }
.bv-than small { color:var(--mo); font-size:13px; }
.bv-than h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:19px; margin:6px 0 8px; }
.bv-than p { margin:0; font-size:14px; color:var(--mo); line-height:1.6; }
.bv-viec-ds { display:flex; flex-direction:column; gap:14px; max-width:900px; margin:0 auto; }
.bv-viec { display:flex; justify-content:space-between; gap:18px; align-items:center; background:var(--kem3); border:1px solid var(--vien); border-radius:16px; padding:18px 22px; color:inherit !important; text-decoration:none !important; }
.bv-viec:hover { border-color:var(--xanh-dam); }
.bv-viec h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:20px; margin:0 0 8px; }
.bv-viec p { margin:8px 0 0; font-size:14px; color:var(--mo); }
.bv-the-nho { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; }
.bv-viec-phai { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.bv-viec-phai small { font-size:13px; color:var(--mo); }
.bv-nut { background:var(--xanh-dam); color:#fff; font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; white-space:nowrap; }
.bv-het { color:#b3261e !important; }
.bv-trang { margin-top:24px; display:flex; justify-content:center; }
.bv-bai { max-width:760px; margin:0 auto; padding:32px 20px 60px; }
.bv-quay { font-size:14px; color:var(--mo) !important; }
.bv-bai h1 { font-family:'Lora',serif; color:var(--xanh-dam); margin:10px 0 12px; line-height:1.3; }
.bv-ngay { color:var(--mo); }
.bv-anh-lon { width:100%; border-radius:16px; margin:14px 0 4px; display:block; }
.bv-tom-tat { font-size:17px; line-height:1.7; margin:16px 0; font-weight:500; }
.bv-noi-dung { font-size:16px; line-height:1.75; }
.bv-noi-dung h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:21px; margin:26px 0 8px; }
.bv-noi-dung .bv-co-lon { font-size:1.25em; }
.bv-noi-dung .bv-co-nho { font-size:.85em; }
.bv-noi-dung img { width:100%; border-radius:14px; margin:10px 0; }
.bv-video { position:relative; width:100%; aspect-ratio:16/9; margin:10px 0; border-radius:14px; overflow:hidden; background:#000; }
.bv-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.bv-video-file { width:100%; border-radius:14px; margin:10px 0; background:#000; }
.bv-ung-tuyen { background:#fff8e8; border:2px dashed #e0b453; border-radius:18px; padding:20px 22px; margin-top:30px; }
.bv-ung-tuyen h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:21px; margin:0 0 6px; }
.bv-ung-tuyen .phin-nut { margin:8px 8px 0 0; }
.bv-nut-zalo { background:#0068ff !important; } .bv-nut-messenger { background:#8a3ffc !important; }
.bv-khac { margin-top:34px; border-top:1px solid var(--vien); padding-top:18px; display:flex; flex-direction:column; gap:8px; }
.bv-khac h2 { font-family:'Lora',serif; font-size:18px; color:var(--xanh-dam); margin:0 0 4px; }
@media (max-width: 640px) { .bv-viec { flex-direction:column; align-items:flex-start; } .bv-viec-phai { align-items:flex-start; } }

/* Tra cứu đơn (khung PhinHolic) */
.tc-khung { max-width:680px; margin:0 auto; padding:0 20px 60px; }
.tc-tim { display:flex; gap:10px; margin-bottom:22px; }
.tc-tim input { flex:1; min-width:0; border:1px solid var(--vien); border-radius:999px; padding:12px 18px; font-size:16px; background:#fff; }
.tc-tim .phin-nut { border:0; padding:12px 24px; cursor:pointer; }
.tc-khong { text-align:center; color:#b3261e; }
.tc-don { background:var(--kem3); border:1px solid var(--vien); border-radius:18px; padding:20px 22px; }
.tc-dau { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tc-dau h2 { font-family:'Lora',serif; color:var(--xanh-dam); font-size:21px; margin:0; }
.tc-tt { background:var(--xanh-dam); color:#fff; font-size:13px; font-weight:600; padding:4px 12px; border-radius:999px; }
.tc-mon { list-style:none; margin:0; padding:0; }
.tc-mon li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--vien); }
.tc-mon small { display:block; color:var(--mo); }
.tc-ghi-chu { margin:12px 0 0; padding:10px 12px; background:#f6f1e7; border-radius:10px; font-size:14px; line-height:1.5; white-space:pre-line; }
.tc-tong { margin:12px 0 0; }
.tc-tong div { display:flex; justify-content:space-between; padding:3px 0; }
.tc-tong dt { font-weight:400; color:var(--mo); } .tc-tong dd { margin:0; }
.tc-phai dt, .tc-phai dd { font-weight:700; color:var(--xanh-dam); font-size:18px; }
.tc-lai { display:inline-block; margin-top:16px; font-size:14px; }
.sd-khung { max-width:1100px; margin:30px auto; padding:0 16px; }
.sd-ngay { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:10px; font-size:14px; }
.sd-trong { background:#cfe8d5; border:2px solid #5a8f69; } .sd-dat { background:#f3c9c4; border:2px solid #b4544a; } .sd-dang { background:#f7e0b0; border:2px solid #c48a1d; }
.sd-ban-khung { position:relative; width:100%; aspect-ratio:16/10; background:var(--kem3); border:1px solid var(--vien); border-radius:16px; }
.sd-o { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:10px; font-size:clamp(10px,1.6vw,14px); line-height:1.2; padding:2px; cursor:pointer; overflow:hidden; font-family:inherit; }
.sd-o.sd-trong { background:#cfe8d5; border:2px solid #5a8f69; } .sd-o.sd-dat { background:#f3c9c4; border:2px solid #b4544a; cursor:not-allowed; } .sd-o.sd-dang { background:#f7e0b0; border:2px solid #c48a1d; cursor:not-allowed; }
.sd-o.sd-tron { border-radius:50%; } .sd-o.sd-chon { box-shadow:0 0 0 3px var(--xanh-dam); background:#5a8f69; color:#fff; } .sd-o.sd-chon::after { content:'✓'; position:absolute; bottom:2px; right:5px; font-weight:700; }
.kg-da-chon { margin:4px 0 0; font-weight:600; color:var(--xanh-dam); } .sd-o em { position:absolute; top:2px; right:4px; font-style:normal; } .sd-o.sd-tron em { top:12%; right:15%; font-size:.85em; line-height:1; }
.sd-khoi { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; border:2px dashed #8a8a8a; border-radius:6px; font-size:clamp(10px,1.5vw,13px); font-weight:600; line-height:1.2; padding:2px 4px; overflow:hidden; pointer-events:none; }
.sd-khoi.sd-tron { border-radius:50%; } .sd-khoi.m-xam { background:#e6e6e6; color:#444; } .sd-khoi.m-be { background:#f1e3c8; color:#6b5226; border-color:#b59a68; } .sd-khoi.m-xanh { background:#d6e6f5; color:#23476b; border-color:#6d93b8; } .sd-khoi.m-cam { background:#fbe0c8; color:#8a4310; border-color:#d48a4e; }
/* Popup đặt bàn trên sơ đồ (phiếu #2018) */
.sd-pop { border:0; padding:0; background:transparent; width:min(420px, calc(100vw - 32px)); max-height:calc(100vh - 32px); }
.sd-pop::backdrop { background:rgba(30,20,10,.45); }
.sd-pop .kg-dat { position:relative; margin:0; }
.sd-pop .sd-pop-dong { position:absolute; top:10px; right:12px; width:auto; padding:2px 10px; background:transparent; color:var(--mo); font-size:24px; line-height:1; }
/* Popup đặt bàn gọn trên điện thoại (phiếu #2021): chữ ô nhập 16px để iPhone không tự phóng to, popup cuộn bên trong */
.sd-pop[open] { display:flex; flex-direction:column; }
/* CSS nền đặt dialog { display:block } làm popup đóng vẫn hiện (phiếu #2029). */
.sd-pop:not([open]) { display:none; }
.sd-pop .kg-dat { overflow-y:auto; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
.sd-pop .kg-hai > label { min-width:0; }
.sd-pop input, .sd-pop textarea { min-width:0; max-width:100%; -webkit-appearance:none; appearance:none; }
@media (max-width: 560px) {
    .sd-pop { width:calc(100vw - 20px); max-width:calc(100vw - 20px); }
    .sd-pop .kg-dat { padding:14px 14px 12px; border-radius:16px; max-height:calc(100dvh - 20px); }
    .sd-pop .kg-dat h3 { font-size:18px; margin:0 28px 8px 0; }
    .sd-pop .kg-dat label { margin-bottom:6px; font-size:12px; }
    .sd-pop input, .sd-pop textarea { font-size:16px; padding:6px 9px; margin-top:2px; }
    .sd-pop input[type=date], .sd-pop input[type=time] { height:36px; padding:4px 6px; letter-spacing:-.2px; }
    .sd-pop textarea { height:40px; }
    .sd-pop .kg-hai { gap:8px; }
    .sd-pop .kg-tam { margin:4px 0 8px; padding-top:8px; }
    .sd-pop .kg-tam b { font-size:16px; }
    .sd-pop .kg-dat button[type=submit] { padding:11px; position:sticky; bottom:0; }
    .sd-pop .kg-nho { font-size:11px; margin-top:6px; }
}
/* Working Space đặt theo khung giờ, bỏ cột Đặt chỗ bên phải khi khu có sơ đồ (phiếu #2026) */
.kg-khung.kg-khung-mot { grid-template-columns:1fr; }
.sd-ngay label { display:inline-flex; gap:8px; align-items:center; font-weight:600; color:var(--xanh-dam); }
.sd-ngay input, .sd-ngay select, .kg-dat select { border:1px solid var(--vien); border-radius:10px; padding:7px 10px; background:#fff; color:var(--chu); font:inherit; font-size:15px; }
.kg-dat select { display:block; width:100%; margin-top:4px; }
.sd-goi-y { margin:0 0 12px; font-size:14px; color:var(--mo); }
.sd-pop-gio { margin:0 0 10px; font-size:14px; color:var(--chu); }
.sd-o:disabled.sd-trong { opacity:.55; cursor:not-allowed; }
@media (max-width: 560px) {
    .sd-ngay { gap:8px; }
    .sd-ngay input, .sd-ngay select, .sd-pop select { font-size:16px; }
}
/* Phiếu đặt chỗ: voucher của bàn trong phiếu + phiếu xác nhận có mã (phiếu #2032, #2033) */
.sd-pop-voucher { margin:0 0 10px; padding:6px 10px; border-radius:8px; background:#fff4e0; color:#7a4a00; font-size:14px; }
.kg-xac-nhan .kg-dat button[type=button]:not(.sd-pop-dong) { width:100%; margin-top:8px; }
.kg-ma-phieu { font-size:16px; margin:4px 0 10px; }
.kg-ma-phieu b { font-size:24px; letter-spacing:1px; color:var(--xanh-dam); margin-left:6px; }
.kg-phieu { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 10px; font-size:14px; }
.kg-phieu dt { color:var(--mo); }
.kg-phieu dd { margin:0; font-weight:600; }
.kg-moi-dang-nhap { margin:10px 0 0; padding:10px 12px; border-radius:8px; background:#f6efe6; font-size:14px; }
.kg-moi-dang-nhap a { font-weight:600; text-decoration:underline; }
/* Chú thích màu bàn + bàn ẩn xám (phiếu #2035). */
.sd-o.sd-an { background:#e2e2e2; border:2px dashed #9a9a9a; color:#777; cursor:not-allowed; }
.sd-chu-thich { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; margin:12px 0 0; padding:0; font-size:14px; }
.sd-chu-thich li { display:flex; align-items:center; gap:6px; }
.sd-chu-thich i { display:inline-block; width:18px; height:14px; border-radius:4px; }
.sd-chu-thich i.sd-an { background:#e2e2e2; border:2px dashed #9a9a9a; }
/* Thanh "Đã chọn" khi chọn nhiều bàn trên sơ đồ (#2040). */
.sd-thanh-chon { position:sticky; bottom:10px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 0; padding:10px 12px; background:#fff; border:2px solid #5a8f69; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.sd-thanh-chon[hidden] { display:none; }
.sd-thanh-chon > span { min-width:0; overflow-wrap:anywhere; }
.sd-thanh-chon button { flex:0 0 auto; width:auto; padding:9px 20px; border:0; border-radius:999px; background:var(--xanh-dam); color:#fff; font-weight:600; cursor:pointer; }
.sd-o.sd-con { background:#e3d4f3; border:2px solid #7b4fb0; } /* Bàn đặt theo ghế còn chỗ (#2046). */
.sd-chu-thich i.sd-con { background:#e3d4f3; border:2px solid #7b4fb0; }

/* Sơ đồ bàn trên điện thoại (#2113): giữ đúng tỉ lệ, đủ chỗ cho chữ; màn hẹp thì kéo ngang thay vì bóp nhỏ. */
.sd-cuon { width:100%; }
@media (max-width: 640px) {
    .sd-cuon { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; }
    .sd-cuon .sd-ban-khung { min-width:600px; }
    .sd-cuon .sd-o { font-size:12px; }
    .sd-cuon .sd-khoi { font-size:11px; }
}
/* Trang riêng sản phẩm (#2166) + link ảnh/tên thẻ sản phẩm */
a.sp-anh { display:block; }
.sp-the h3 a { color:inherit; text-decoration:none; }
.sp-ct { max-width:1080px; margin:0 auto; padding:30px 20px 40px; }
.sp-ct-duong { font-size:13px; color:var(--chu-nhat, #777); margin-bottom:18px; }
.sp-ct-duong a { color:inherit; }
.sp-ct-the .sp-the { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; gap:10px 44px; align-items:start; }
.sp-ct-the .sp-anh { grid-row:1 / span 3; }
.sp-ct-the .sp-the:hover .sp-anh img { transform:none; }
.sp-ct-the .sp-the h3 { font-family:'Lora',serif; font-size:26px; margin:0; flex:none; color:var(--xanh-dam); }
.sp-ct-the .sp-lua-chon { font-size:15px; line-height:1.6; }
.sp-ct-the .sp-duoi { justify-content:flex-start; gap:24px; }
.sp-ct-the .sp-duoi b { font-size:20px; }
.sp-ct-noi-dung { margin-top:32px; line-height:1.7; font-size:15px; }
.sp-ct-noi-dung img { max-width:100%; height:auto; }
@media (max-width:760px) {
    .sp-ct-the .sp-the { grid-template-columns:1fr; }
    .sp-ct-the .sp-anh { grid-row:auto; }
    .sp-ct-the .sp-the h3 { font-size:22px; }
}