/* Trang bán Gói thử — dùng biến màu/chữ của nhan-dien.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0 0 var(--khoang-4); color: var(--mau-chu); }
h1 { font-size: var(--co-chu-1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--co-chu-2); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: var(--co-chu-4); font-weight: 700; line-height: 1.3; }
p { margin: 0 0 var(--khoang-4); }

.khung { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.khung.hep { max-width: 760px; }
.phan { padding: var(--khoang-8) 0; }
.phan-nhat { background: #fff; }
.nhan { font-size: var(--co-chu-7); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--chu-chinh-tren-nen); margin-bottom: var(--khoang-3); }
.nho { font-size: var(--co-chu-7); color: #4A5A60; }
.nut-lon { min-height: 52px; padding: 0 26px; font-size: 17px; text-decoration: none; }
.nut-nho { min-height: 40px; padding: 0 16px; font-size: 15px; text-decoration: none; }
.nut { text-decoration: none; }
.rong { width: 100%; }

/* Đầu trang */
.dau { position: sticky; top: 0; z-index: 20; background: rgba(236,243,246,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--chinh-100); }
.dau-trong { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mau-chu); font-weight: 800; }
.logo img { width: 36px; height: 36px; border-radius: 6px; }

/* Thu hút */
.mo-dau { padding: var(--khoang-8) 0 var(--khoang-8); background: radial-gradient(ellipse at 85% 10%, var(--chinh-100), transparent 60%), var(--mau-nen); }
.mo-dau-luoi { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--khoang-7); align-items: center; }
.phu-de { font-size: var(--co-chu-5); color: #33464D; max-width: 34em; }
.hang-nut { display: flex; flex-wrap: wrap; gap: var(--khoang-3); margin: var(--khoang-5) 0 var(--khoang-4); }
.suat-dong { font-size: 15px; color: #33464D; }
.suat-dong .cham { display: inline-block; vertical-align: 1px; margin-right: 8px; }
.suat-dong.sang { color: var(--mau-chu-nhat); }
.cham { width: 10px; height: 10px; border-radius: 50%; background: var(--mau-nhan); box-shadow: 0 0 0 4px var(--nhan-200); flex: none; }
.het .cham { background: #B4483A; box-shadow: 0 0 0 4px #F3D3CE; }

.bao-cao { background: #fff; border-radius: 10px; box-shadow: var(--bong-lon); padding: var(--khoang-5); border-top: 5px solid var(--mau-chinh); }
.bao-cao-dau { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: var(--khoang-4); gap: 8px; }
.bao-cao-dau .mo { font-weight: 500; font-size: var(--co-chu-7); color: #4A5A60; }
.bao-cao-dong { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--chinh-200); gap: 12px; }
.bao-cao-dong b { font-size: 26px; font-weight: 800; color: var(--mau-chinh); font-variant-numeric: tabular-nums; }
.bao-cao-dong.noi b { color: var(--chu-nhan-tren-nen); }
.bao-cao-chan { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--khoang-4) 0 var(--khoang-3); }
.the-nho { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.the-nho.dat { background: #DDF0E4; color: #1E6B3B; }
.the-nho.khong { background: #F6DEDA; color: #8A3226; }
.the-nho.cho { background: var(--chinh-100); color: var(--chinh-700); }
.minh-hoa { font-size: 12px; color: #5E6B70; margin: 0; font-style: italic; }

/* Thích thú */
.luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--khoang-5); }
.the-kho { position: relative; padding-top: var(--khoang-6); }
.so-to { position: absolute; top: -18px; left: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--mau-nhan); color: var(--mau-chu); font-weight: 800; display: grid; place-items: center; }
.cau-noi { margin-top: var(--khoang-6); font-size: var(--co-chu-5); max-width: 40em; border-left: 4px solid var(--mau-chinh); padding-left: var(--khoang-4); }

.dong-thoi-gian { list-style: none; margin: 0; padding: 0; position: relative; }
.dong-thoi-gian::before { content: ""; position: absolute; left: 54px; top: 8px; bottom: 8px; width: 2px; background: var(--chinh-200); }
.dong-thoi-gian li { display: grid; grid-template-columns: 110px 1fr; gap: var(--khoang-5); padding: var(--khoang-4) 0; position: relative; }
.ngay { justify-self: center; align-self: start; background: var(--mau-chinh); color: var(--mau-chu-nhat); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 99px; position: relative; z-index: 1; white-space: nowrap; }
.dong-thoi-gian h3 { margin-bottom: 6px; }
.dong-thoi-gian p { margin: 0; color: #33464D; }

/* Khao khát */
.luoi-goi { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--khoang-7); align-items: start; }
.cong-gia { display: flex; align-items: center; gap: var(--khoang-4); background: #fff; border-radius: var(--bo-the); padding: var(--khoang-4) var(--khoang-5); box-shadow: var(--bong-nho); margin-bottom: var(--khoang-5); flex-wrap: wrap; }
.cong-gia b { display: block; font-size: 24px; color: var(--mau-chinh); font-variant-numeric: tabular-nums; }
.cong-gia span { font-size: 14px; color: #4A5A60; }
.dau-cong { font-size: 28px; font-weight: 800; color: var(--mau-nhan); }
.ds-tick { list-style: none; padding: 0; margin: 0; }
.ds-tick li { padding: 10px 0 10px 34px; position: relative; border-bottom: 1px solid var(--chinh-100); }
.ds-tick li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 16px; height: 9px; border-left: 3px solid var(--mau-chinh); border-bottom: 3px solid var(--mau-chinh); transform: rotate(-45deg); }
.loi-hua { background: var(--mau-nen-toi); color: var(--mau-chu-nhat); border-radius: 10px; padding: var(--khoang-6); position: sticky; top: 84px; }
.loi-hua h3 { color: var(--mau-nhan); }
.loi-hua .nhe { color: #B9CDD4; font-size: 15px; margin: 0; border-top: 1px solid #2D4A55; padding-top: var(--khoang-4); }

.luoi-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--khoang-4); }
.luoi-4 figure { margin: 0; background: var(--mau-nen); border-radius: var(--bo-the); overflow: hidden; }
.luoi-4 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.luoi-4 figcaption { padding: 12px 14px; }
.luoi-4 figcaption b { display: block; }
.luoi-4 figcaption span { font-size: 13px; color: #4A5A60; }
.ghi-anh { font-size: 12px; color: #5E6B70; margin: var(--khoang-3) 0 0; font-style: italic; }

.ceo { display: grid; grid-template-columns: 300px 1fr; gap: var(--khoang-7); align-items: center; }
.ceo img { border-radius: 10px; background: var(--chinh-100); width: 100%; height: auto; }
.ceo h2 { margin-bottom: 4px; }
.chuc { color: var(--chu-chinh-tren-nen); font-weight: 600; }

.luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--khoang-5); }
blockquote.the { margin: 0; display: flex; flex-direction: column; justify-content: space-between; background: var(--mau-nen); box-shadow: none; }
blockquote p { font-size: 15px; }
blockquote footer { font-size: 13px; color: #4A5A60; }
blockquote footer b { display: block; color: var(--mau-chu); font-size: 15px; }
.hang-logo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--khoang-6); margin-top: var(--khoang-7); }
.hang-logo img { height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; }

details { background: #fff; border-radius: var(--bo-the); margin-bottom: var(--khoang-3); box-shadow: var(--bong-nho); }
summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; position: relative; padding-right: 48px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 22px; color: var(--mau-chinh); }
details[open] summary::after { content: "–"; }
details p { padding: 0 20px 16px; margin: 0; color: #33464D; }

/* Hành động */
.phan-toi { background: var(--mau-nen-toi); color: var(--mau-chu-nhat); }
.phan-toi h2 { color: var(--mau-chu-nhat); }
.nhan-sang { color: var(--nhan-400); }
.luoi-dat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--khoang-7); align-items: start; }
.gia-to { font-size: clamp(40px, 5vw, 56px); font-weight: 800; color: var(--mau-nhan); margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gia-giai { color: #B9CDD4; }
.buoc-nho { padding-left: 20px; color: #D5E2E7; }
.buoc-nho li { margin-bottom: 6px; }
.zalo-phu a { color: var(--nhan-300); }
.o-dat { color: var(--mau-chu); }
.o-dat label { display: block; font-weight: 600; font-size: 15px; margin-bottom: var(--khoang-4); }
.o-dat input:not([type=checkbox]) { display: block; width: 100%; margin-top: 6px; }
.o-tick { display: flex !important; align-items: center; gap: 10px; cursor: pointer; }
.o-tick input { width: 20px; height: 20px; accent-color: var(--mau-chinh); }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.loi { background: #F6DEDA; color: #8A3226; padding: 10px 14px; border-radius: var(--bo-the); font-size: 15px; }
#thanh-toan { text-align: center; }
.tt-qr { margin: var(--khoang-4) auto; border-radius: 8px; border: 1px solid var(--chinh-100); background: #fff; width: 240px; height: 240px; object-fit: contain; }
.tt-bang { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; text-align: left; margin: 0 0 var(--khoang-4); font-size: 15px; }
.tt-bang dt { color: #4A5A60; }
.tt-bang dd { margin: 0; word-break: break-word; }
.chep { font: 600 12px var(--phong-than); border: 1px solid var(--chinh-300); background: var(--chinh-100); color: var(--chinh-700); border-radius: 4px; padding: 2px 8px; cursor: pointer; margin-left: 4px; }
.tt-trang-thai { padding: 12px; border-radius: var(--bo-the); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tt-trang-thai.cho { background: var(--nhan-100); color: var(--nhan-800); }
.tt-trang-thai.xong { background: #DDF0E4; color: #1E6B3B; }
.tt-trang-thai.thieu { background: #F6DEDA; color: #8A3226; }
.xoay { width: 16px; height: 16px; border: 3px solid var(--nhan-300); border-top-color: var(--nhan-700); border-radius: 50%; animation: xoay 1s linear infinite; }
@keyframes xoay { to { transform: rotate(360deg); } }

.chan { background: #0F2027; color: #B9CDD4; padding: var(--khoang-5) 0 96px; font-size: 14px; }
.chan a { color: var(--nhan-300); }
.chan-trong { display: flex; justify-content: space-between; gap: var(--khoang-4); flex-wrap: wrap; }

.thanh-dinh { display: none; }

@media (max-width: 900px) {
  .mo-dau-luoi, .luoi-goi, .luoi-dat, .ceo { grid-template-columns: 1fr; gap: var(--khoang-6); }
  .luoi-4 { grid-template-columns: 1fr 1fr; }
  .luoi-3 { grid-template-columns: 1fr; }
  .ceo img { max-width: 260px; }
  .loi-hua { position: static; }
}
@media (max-width: 640px) {
  .phan { padding: var(--khoang-7) 0; }
  .mo-dau { padding: var(--khoang-6) 0 var(--khoang-7); }
  .luoi-2 { grid-template-columns: 1fr; gap: var(--khoang-6); }
  .hang-nut .nut { flex: 1 1 100%; }
  .dong-thoi-gian::before { left: 14px; }
  .dong-thoi-gian li { grid-template-columns: 1fr; gap: 8px; padding-left: 36px; }
  .ngay { justify-self: start; margin-left: -36px; }
  .hang-logo { gap: var(--khoang-5); }
  .hang-logo img { height: 34px; }
  .thanh-dinh { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; box-shadow: 0 -6px 20px #17262B26; padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px; transition: transform .2s; }
  .thanh-dinh div { display: flex; flex-direction: column; line-height: 1.25; }
  .thanh-dinh div > b { font-size: 18px; color: var(--mau-chinh); }
  .thanh-dinh span { font-size: 12px; color: #4A5A60; }
  .thanh-dinh.an { transform: translateY(110%); }
}

/* Chế độ kiểm AIDA (mở trang với ?kiem=1) */
body.kiem [data-aida] { outline: 3px solid var(--mau-kiem); outline-offset: 6px; position: relative; border-radius: 4px; }
body.kiem [data-aida]::before { content: attr(data-khoi) " · " attr(data-ten-aida); position: absolute; top: -16px; left: 0; z-index: 5; background: var(--mau-kiem); color: #fff; font: 700 12px/1 var(--phong-than); padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
body.kiem [data-aida="thu-hut"] { --mau-kiem: #C0392B; }
body.kiem [data-aida="thich-thu"] { --mau-kiem: #D68910; }
body.kiem [data-aida="khao-khat"] { --mau-kiem: #7D3C98; }
body.kiem [data-aida="hanh-dong"] { --mau-kiem: #1E8449; }
body.kiem .thanh-dinh { position: static; display: flex; margin: 24px 16px; }
body.kiem [data-aida].sang-len { outline-width: 6px; box-shadow: 0 0 0 12px color-mix(in srgb, var(--mau-kiem) 18%, transparent); }