/* Phần thêm cho website bán tài liệu: thẻ sản phẩm, trang sản phẩm, xem demo PDF, nút Zalo nổi */
.hang-chip{display:flex;flex-wrap:wrap;gap:6px}
.hang-chip .chip{margin-bottom:6px}
.chip-ghim{background:var(--chinh);color:var(--tren-chinh, #fff);margin-left:6px}

.the-sp{display:flex;flex-direction:column;background:var(--the, #fff);border:1px solid var(--vien, #e5e5e5);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.the-sp:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.the-sp.an{display:none}
.the-sp-bia{position:relative;aspect-ratio:4/3;background:var(--nen-2);overflow:hidden}
.the-sp-bia img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dau-ghim,.dau-demo{position:absolute;top:12px;font-size:.72rem;font-weight:800;padding:5px 10px;border-radius:99px;letter-spacing:.02em}
.dau-ghim{left:12px;background:var(--nhan);color:#fff}
.dau-demo{right:12px;background:rgba(255,255,255,.92);color:var(--chinh)}
.the-sp-than{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.the-sp-than h3{margin:0;font-size:1.15rem;line-height:1.35}
.the-sp-than p{margin:0 0 10px;color:var(--chu-nhat, #555);font-size:.95rem;line-height:1.55}
.the-sp-chan{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.o-gia{display:flex;flex-direction:column;line-height:1.2}
.gia{font-weight:800;color:var(--chinh);font-size:1.1rem}
.gia-lh{font-size:.9rem}
.gia-phu{font-size:.8rem;color:var(--chu-nhat, #666)}
.o-gia-lon .gia{font-size:1.6rem}
.o-gia-lon .gia-lh{font-size:1.1rem}
.o-gia-lon .gia-phu{font-size:.92rem;margin-top:4px}

.dau-sp{padding:36px 0 48px}
.dau-sp-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.dau-sp h1{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.2;margin:8px 0 14px}
.dau-sp-anh img{width:100%;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);display:block}
.danh-cho{margin:0 0 12px}
.ds-tick{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.ds-tick li{position:relative;padding-left:30px;line-height:1.55}
.ds-tick li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--chinh) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.hop-mua{background:var(--the, #fff);border:1px solid var(--vien, #e5e5e5);border-radius:18px;padding:20px 22px;display:grid;gap:14px}
.hop-mua .hang-nut{display:flex;flex-wrap:wrap;gap:10px}
.ghi-chu-mua{margin:0;font-size:.88rem;color:var(--chu-nhat, #666)}

.hop-demo{background:var(--the, #fff);border:1px solid var(--vien, #e5e5e5);border-radius:18px;overflow:hidden;margin-top:18px}
.hop-demo-dau{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.hop-demo-dau h3{margin:0;font-size:1.05rem;flex:1;min-width:200px}
.hop-demo-dau span{font-size:.85rem;color:var(--chu-nhat, #666)}
.hop-demo-dau .hang-nut{display:flex;gap:8px;flex-wrap:wrap}
.xem-pdf{display:block;width:100%;height:78vh;border:0;border-top:1px solid var(--vien, #e5e5e5);background:#525659}

.hop-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--toi);color:#fff;border-radius:22px;padding:30px 34px}
.hop-cta h2{color:#fff;margin:0 0 6px}
.hop-cta p{margin:0;opacity:.85}
.ghi-chu-trang{margin-top:28px;color:var(--chu-nhat, #666);text-align:center}

.nut-zalo{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:10px;background:#0068FF;color:#fff;text-decoration:none;border-radius:99px;padding:8px 18px 8px 8px;box-shadow:0 12px 30px -10px rgba(0,104,255,.7);font-weight:700}
.nut-zalo-tron{width:40px;height:40px;border-radius:50%;background:#fff;color:#0068FF;display:grid;place-items:center;font-size:.78rem;font-weight:900}
.nut-zalo:hover{transform:translateY(-2px)}

@media (max-width:980px){.dau-sp-in{grid-template-columns:1fr}.dau-sp-anh{order:-1;max-width:460px}}
@media (max-width:760px){
  .xem-pdf{display:none}
  .nut-zalo{padding:8px}
  .nut-zalo-chu{display:none}
  .hop-cta{padding:24px 20px}
}

/* một sản phẩm duy nhất trong khối: thẻ nằm ngang */
.luoi-don .the-sp{flex-direction:row;max-width:980px}
.luoi-don .the-sp-bia{width:46%;flex:none;aspect-ratio:4/3}
.luoi-don .the-sp-than{padding:28px 32px;justify-content:center}
.luoi-don .the-sp-than h3{font-size:1.5rem}
@media (max-width:760px){.luoi-don .the-sp{flex-direction:column}.luoi-don .the-sp-bia{width:100%}.luoi-don .the-sp-than{padding:18px 20px 20px}}