:root { --chinh: #2e7d4f; --cam: #f08a24; --nen: #fff; --nen2: #f4f7f2; --chu: #1b2420; --phu: #5c6b63; --vien: #dfe7e1; }
@media (prefers-color-scheme: dark) { :root { --nen: #101613; --nen2: #17201b; --chu: #e6eee9; --phu: #a0b0a7; --vien: #26332c; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.65 "Segoe UI", system-ui, sans-serif; background: var(--nen); color: var(--chu); }
a { color: var(--chinh); }
.khung { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.dau { border-bottom: 1px solid var(--vien); background: var(--nen); position: sticky; top: 0; z-index: 5; }
.dau .khung { display: flex; align-items: center; justify-content: space-between; min-height: 58px; flex-wrap: wrap; gap: 8px; }
.logo { font-weight: 800; font-size: 19px; color: var(--chu); text-decoration: none; }
nav a { margin-left: 16px; color: var(--phu); text-decoration: none; font-weight: 600; font-size: 15px; }
.cong-khai { background: var(--nen2); font-size: 13px; color: var(--phu); padding: 6px 0; }
.hero { background: linear-gradient(160deg, #1d4d33, var(--chinh)); color: #fff; padding: 64px 0; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 12px; line-height: 1.2; }
.hero p { max-width: 680px; opacity: .92; }
.muc { padding: 48px 16px 8px; }
.nut, .nut-phu { display: inline-block; border-radius: 10px; padding: 9px 16px; font-weight: 700; text-decoration: none; font-size: 15px; }
.nut { background: var(--cam); color: #fff; }
.nut-phu { border: 1px solid var(--vien); color: var(--chu); }
.nut.lon { padding: 13px 24px; font-size: 17px; }
.loc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.loc button { border: 1px solid var(--vien); background: var(--nen); color: var(--chu); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 15px; cursor: pointer; }
.loc button.chon { background: var(--chinh); color: #fff; border-color: var(--chinh); }
.luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.the-sp { border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: var(--nen); }
.the-sp[hidden] { display: none; }
.anh-the { background: linear-gradient(150deg, var(--mau), #0e1a14); color: #fff; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; }
.anh-the span { font-size: 64px; line-height: 1; }
.anh-the small { opacity: .85; margin-top: 6px; }
.than-the { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.than-the h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; }
.than-the h3 a { color: var(--chu); text-decoration: none; }
.than-the p { margin: 0 0 10px; font-size: 15px; color: var(--phu); }
.hang { color: var(--chinh) !important; font-weight: 700; font-size: 14px !important; }
.hanh-dong { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.luoi-bai { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding-bottom: 48px; }
.the-bai { border: 1px solid var(--vien); border-left: 5px solid var(--cam); border-radius: 12px; padding: 16px; text-decoration: none; color: var(--chu); }
.the-bai h3 { margin: 0 0 6px; font-size: 18px; }
.the-bai p { margin: 0; color: var(--phu); font-size: 15px; }
.bai { max-width: 820px; padding-top: 24px; padding-bottom: 48px; }
.bai h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.25; margin: 8px 0; }
.duong-dan, .tac-gia, .nho { color: var(--phu); font-size: 14px; }
.dan { font-size: 19px; }
.video { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; margin-top: 16px; }
.video img, .video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.play { position: absolute; inset: 0; margin: auto; width: 76px; height: 54px; border-radius: 14px; background: #e62117; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hai-cot section { background: var(--nen2); border-radius: 12px; padding: 4px 18px; }
.canh-bao { border: 1px solid #e0a43a; background: rgba(240, 138, 36, .1); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.mua { text-align: center; margin: 28px 0 8px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid var(--vien); padding: 8px 10px; text-align: left; }
th { background: var(--nen2); }
.chan { border-top: 1px solid var(--vien); color: var(--phu); font-size: 13px; padding: 16px 0; margin-top: 24px; }
@media (max-width: 680px) { .hai-cot { grid-template-columns: 1fr; } nav a { margin: 0 12px 0 0; } }