/* Màu và phông chữ theo nhận diện thương hiệu Hùng Việt (Bài 3). */
:root {
  --cam: #FF7029; --cam-dam: #C24E12; --cam-nhat: #FFF4EE;
  --xanh-la: #57B33E; --xanh-duong: #0575E7;
  --den: #232323; --xam: #616161; --vien: #E6E6E6; --nen: #F8F8F8; --trang: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Mulish', sans-serif; background: var(--nen); color: var(--den); line-height: 1.6; }
a { color: var(--cam-dam); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 24px; } }

/* Bản nháp: phần chờ Sếp duyệt được tô vàng. Bỏ class "nhap" khi chốt. */
.nhap { outline: 2px dashed #E0B000; outline-offset: 4px; }

/* Đầu trang */
.dau { background: var(--trang); border-bottom: 1px solid var(--vien); position: relative; overflow: hidden; }
.dau::after { content: ""; position: absolute; right: -260px; top: -280px; width: 700px; height: 700px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,112,41,.12) 0deg 6deg, transparent 6deg 13deg);
  -webkit-mask: radial-gradient(circle, transparent 0 20%, #000 21%); mask: radial-gradient(circle, transparent 0 20%, #000 21%); }
.thanh { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; position: relative; z-index: 2; gap: 12px; }
.ten-nho { font-weight: 900; font-size: 18px; color: var(--den); text-decoration: none; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.menu a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--den); }
@media (max-width: 560px) { .menu a:not(.nut) { display: none; } }
.hero { padding: 40px 16px 48px; position: relative; z-index: 1; }
.tag { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--cam-dam); text-transform: uppercase; display: inline-block; }
.hero h1 { font-size: clamp(38px, 8vw, 64px); font-weight: 900; line-height: 1.1; margin-top: 8px; }
.hero h1 span { color: var(--cam); }
.gioi-thieu { max-width: 640px; margin-top: 16px; font-size: 18px; color: var(--xam); }
.hanh-dong { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Nút */
.nut { display: inline-block; background: var(--cam); color: var(--trang); font: inherit; font-weight: 800; font-size: 16px; text-decoration: none;
  border: 2px solid var(--cam); border-radius: 999px; padding: 12px 24px; cursor: pointer; text-align: center; }
.nut:hover { background: var(--cam-dam); border-color: var(--cam-dam); color: var(--trang); }
.nut:disabled { opacity: .6; cursor: wait; }
.nut-vien { background: transparent; color: var(--den); border-color: var(--vien); }
.nut-vien:hover { background: var(--trang); color: var(--cam-dam); border-color: var(--cam); }
.nut-nho { padding: 8px 18px; font-size: 14px; color: var(--trang) !important; }

/* Mục */
section { padding: 56px 16px 8px; }
.so-muc { font-size: 13px; font-weight: 800; color: var(--cam-dam); letter-spacing: 2px; }
h2 { font-size: clamp(26px, 5vw, 32px); font-weight: 900; line-height: 1.2; margin: 4px 0 20px; }
.mo-ta { color: var(--xam); max-width: 720px; margin: -8px 0 24px; }
h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.the { background: var(--trang); border: 1px solid var(--vien); border-radius: 16px; padding: 22px; }
.the p { color: var(--xam); }
.luoi { display: grid; gap: 16px; }
.l2 { grid-template-columns: repeat(2, 1fr); } .l3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .l3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .l2, .l3 { grid-template-columns: 1fr; } }
.du-an { border-top: 4px solid var(--cam); }
.nhan { display: inline-block; font-size: 12px; font-weight: 800; color: var(--cam-dam); background: var(--cam-nhat); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; }
ul.ds, ol.ds { padding-left: 20px; color: var(--xam); margin-bottom: 16px; } .ds li { margin: 6px 0; }
.gia { font-size: 15px; margin-bottom: 12px; } .gia span:first-child { font-size: 28px; font-weight: 900; color: var(--cam-dam); }
.mt { margin-top: 24px; }
.mo { color: var(--xam); font-size: 15px; }

/* Đặt lịch */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-weight: 700; font-size: 15px; background: var(--nen); color: var(--den); border: 1px solid var(--vien); border-radius: 12px;
  padding: 10px 14px; cursor: pointer; min-width: 84px; text-align: center; line-height: 1.3; }
.chip small { display: block; font-weight: 600; font-size: 12px; color: var(--xam); }
.chip:hover { border-color: var(--cam); }
.chip.chon { background: var(--cam); border-color: var(--cam); color: var(--trang); }
.chip.chon small { color: var(--trang); }
form label { display: block; font-weight: 700; font-size: 14px; margin-top: 14px; }
form input, form textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--vien); border-radius: 10px; background: var(--trang); color: var(--den); }
form input:focus, form textarea:focus { outline: 2px solid var(--cam); border-color: var(--cam); }
form .nut { margin-top: 20px; width: 100%; }
@media (min-width: 640px) { form .nut { width: auto; } form { max-width: 560px; } }
.an { position: absolute; left: -9999px; }
.chon-roi { background: var(--cam-nhat); color: var(--cam-dam); font-weight: 800; border-radius: 10px; padding: 10px 14px; }
.loi { color: #C62828; font-weight: 700; margin-top: 12px; min-height: 1em; }
.tra-tien { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; margin-top: 16px; }
@media (max-width: 640px) { .tra-tien { grid-template-columns: 1fr; } }
#qr { width: 100%; max-width: 300px; height: auto; border: 1px solid var(--vien); border-radius: 12px; background: var(--trang); }
.tra-tien dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.tra-tien dt { color: var(--xam); } .tra-tien dd { font-weight: 800; word-break: break-word; }
.trang-thai { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--nen); font-weight: 700; }
.trang-thai.ok { background: #E8F5E9; color: #2E7D32; } .trang-thai.het { background: #FDECEA; color: #C62828; }

/* Sản phẩm */
.sp { display: flex; flex-direction: column; } .sp p { flex: 1; margin-bottom: 16px; }
.sp .nut { align-self: flex-start; }
.chua-co { font-weight: 700; color: var(--xam); font-size: 14px; }
.ghi-chu { font-size: 14px; color: var(--xam); margin-top: 24px; }

.chan { padding: 48px 16px 32px; color: var(--xam); font-size: 14px; }