/* dlo-cruise.css (SEO-20261106): danh sach du thuyen theo mau travelvietnam.com.vn/du-thuyen-ha-long/ngu-dem/, mau cam Du Lich Online */
html body .dlo-cz-page { --red:#EA580C; --red-d:#C2410C; --red-dd:#7C2D12; --red-bg:#FFEDD5; --gold:#FFD66B; --amber:#F5A623; --navy:#0B3F73; --text:#38435E; --muted:#5A6682; --line:#ECE3DB; --sky:#FFF1E6; --sky-2:#FDE7D6; --sh-sm:0 6px 18px -12px rgba(124,45,18,.28); --sh-md:0 16px 32px -16px rgba(124,45,18,.38); }
/* Khoi "Top Du Thuyen Ha Long Dang Khuyen Mai" - view/mod_cruise/tour-promo.php (2026-10-29).
   Theo mau khoi "Chum Tour Gia Dang Tot" o trang chu: nen #FFF4EC tran het chieu ngang man hinh (box-shadow + clip-path, khong lam tran trang), the trang. */
html body .tv-pz { position: relative; margin: 10px 0 40px; padding: 36px 0 30px; background: #FFF4EC; box-shadow: 0 0 0 100vmax #FFF4EC; clip-path: inset(0 -100vmax); color: var(--text, #38435E); }
html body .tv-pz .tv-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .tv-pz-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
html body .tv-pz-tt { display: flex; align-items: center; gap: 16px; min-width: 0; }
html body .tv-pz-ic { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--red, #EA580C); color: #fff; font-size: 26px; box-shadow: 0 6px 12px -6px rgba(234, 88, 12, .65); }
html body .tv-pz-h { margin: 0; color: var(--navy, #0B2259); font-size: 32px; font-weight: 600; line-height: 1.25; }



html body .tv-pz-arr { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--red, #EA580C); border-radius: 50%; background: #fff; color: var(--red, #EA580C); font-size: 20px; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
html body .tv-pz-arr:hover:not(:disabled) { background: var(--red, #EA580C); color: #fff; }
html body .tv-pz-arr:disabled { opacity: .35; cursor: default; }

html body .tv-pz-list { display: flex; gap: 20px; margin: -10px -10px; padding: 10px 10px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html body .tv-pz-list::-webkit-scrollbar { display: none; }
html body .tv-pz-list > .tv-pz-c { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
html body .tv-pz-c { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px -14px rgba(124, 45, 18, .35); transition: transform .25s, box-shadow .25s; }
html body .tv-pz-c:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -14px rgba(124, 45, 18, .45); }
html body .tv-pz-ph { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-2, #FDE7D6); }
html body .tv-pz-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
html body .tv-pz-c:hover .tv-pz-ph img { transform: scale(1.05); }
html body .tv-pz-disc { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 999px; background: var(--gold, #FFD66B); color: var(--red-dd, #7C2D12); font-size: 15px; font-weight: 700; }
html body .tv-pz-dur { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--red, #EA580C); color: #fff; font-size: 15px; font-weight: 600; }
html body .tv-pz-b { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
html body .tv-pz-t { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.35; }
html body .tv-pz-t a { color: var(--navy, #0B2259); text-decoration: none; transition: color .2s; }
html body .tv-pz-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html body .tv-pz-c:hover .tv-pz-t a { color: var(--red, #EA580C); }
html body .tv-pz-st { display: inline-flex; align-items: center; gap: 2px; color: #F5A623; font-size: 17px; line-height: 1; }
html body .tv-pz-st .off { color: #D5DCEA; }
html body .tv-pz-st em { margin-left: 8px; color: var(--muted, #5A6682); font-size: 15px; font-style: normal; }
html body .tv-pz-fx { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px dashed #F1DCCB; }
html body .tv-pz-fx > div { min-width: 0; }
html body .tv-pz-fx > div.w { grid-column: 1 / -1; }
html body .tv-pz-fx dt { margin: 0; color: var(--muted, #5A6682); font-size: 15px; font-weight: 400; }
html body .tv-pz-fx dd { margin: 2px 0 0; color: var(--navy, #0B2259); font-size: 17px; font-weight: 600; line-height: 1.4; }
html body .tv-pz-fx > div.w dd { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 400; color: var(--text, #38435E); }
html body .tv-pz-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed #F1DCCB; }
html body .tv-pz-pc { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; min-width: 0; line-height: 1.2; }
html body .tv-pz-pc s { flex-basis: 100%; color: var(--muted, #5A6682); font-size: 15px; }
html body .tv-pz-pc b { color: var(--red, #EA580C); font-size: 27px; font-weight: 700; white-space: nowrap; }
html body .tv-pz-pc b.na { font-size: 21px; }
html body .tv-pz-pc small { color: var(--muted, #5A6682); font-size: 15px; }
html body .tv-pz-go { display: inline-flex; flex: none; align-items: center; gap: 3px; min-height: 44px; padding: 0 12px 0 18px; border-radius: 10px; background: var(--red, #EA580C); color: #fff; font-size: 17px; font-weight: 600; transition: background .2s; }
html body .tv-pz-go .tv-i { font-size: 18px; }
html body .tv-pz-c:hover .tv-pz-go { background: var(--red-d, #C2410C); }
@media (max-width: 1199px) {
    html body .tv-pz-list > .tv-pz-c { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
    html body .tv-pz { margin: 4px 0 28px; padding: 26px 0 22px; }
    html body .tv-pz-top { margin-bottom: 16px; }
    html body .tv-pz-tt { gap: 12px; align-items: flex-start; }
    html body .tv-pz-ic { width: 42px; height: 42px; font-size: 21px; }
    html body .tv-pz-h { font-size: 24px; }
    

    
html body .tv-pz-list { gap: 14px; }
    html body .tv-pz-list > .tv-pz-c { flex-basis: 86%; }
    html body .tv-pz-b { padding: 16px 16px 18px; }
    html body .tv-pz-t { font-size: 19px; }
    html body .tv-pz-fx dd { font-size: 16px; }
    html body .tv-pz-pc b { font-size: 24px; }
    html body .tv-pz-go { min-height: 42px; font-size: 16px; }
}
html body .tv-pz-fx dd small { color: var(--muted, #5A6682); font-size: 15px; font-weight: 400; }
/* ===== Ban c (2026-10-29): khoi tran full man hinh, 4 du thuyen / hang de khac biet voi cac nhom ben duoi =====
   --tv-sbw = do rong thanh cuon (script trong tour-promo.php) de khong lam trang bi keo ngang. */
html body .tv-pz { width: calc(100vw - var(--tv-sbw, 0px)); margin-left: calc(50% - (100vw - var(--tv-sbw, 0px)) / 2); margin-right: 0; padding: 40px 0 34px; box-shadow: none; clip-path: none; }
html body .tv-pz-in { max-width: 1680px; margin: 0 auto; padding: 0 40px; }
html body .tv-pz-list > .tv-pz-c { flex-basis: calc((100% - 60px) / 4); }
html body .tv-pz-f { flex-wrap: wrap; }
@media (min-width: 1200px) and (max-width: 1599px) {
    html body .tv-pz-t { font-size: 19px; }
    html body .tv-pz-b { padding: 16px 16px 18px; }
    html body .tv-pz-pc b { font-size: 24px; }
    html body .tv-pz-go { min-height: 42px; padding: 0 10px 0 14px; font-size: 16px; }
}
@media (max-width: 1199px) {
    html body .tv-pz-in { padding: 0 24px; }
    html body .tv-pz-list > .tv-pz-c { flex-basis: calc((100% - 40px) / 3); }
}
@media (max-width: 991px) {
    html body .tv-pz-list > .tv-pz-c { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
    html body .tv-pz { padding: 26px 0 22px; }
    html body .tv-pz-in { padding: 0 15px; }
    html body .tv-pz-list > .tv-pz-c { flex-basis: 86%; }
}
/* ===== Ban d (2026-10-29): nut < > nam tren anh (may tinh), dau cham bao vuot / xem them (moi man hinh) ===== */
html body .tv-pz-wrap { position: relative; }
html body .tv-pz-arr { position: absolute; top: 120px; z-index: 3; width: 48px; height: 48px; border: 0; background: rgba(255, 255, 255, .96); color: var(--red, #EA580C); font-size: 22px; box-shadow: 0 8px 20px -6px rgba(124, 45, 18, .45); transform: translateY(-50%); }
html body .tv-pz-arr.prev { left: -14px; }
html body .tv-pz-arr.next { right: -14px; }
html body .tv-pz-arr:hover:not(:disabled) { background: var(--red, #EA580C); color: #fff; }
html body .tv-pz-arr:disabled { opacity: 0; pointer-events: none; }
html body .tv-pz-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
html body .tv-pz-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #F9C9A6; cursor: pointer; transition: width .25s, background .25s; }
html body .tv-pz-dot.on { width: 36px; background: var(--red, #EA580C); }
html body .tv-pz.no-scroll .tv-pz-arr, html body .tv-pz.no-scroll .tv-pz-dots { display: none; }
@media (max-width: 767px) {
    html body .tv-pz-arr { display: none; }
    html body .tv-pz-dots { margin-top: 6px; }
}
/* ===== Ban e (2026-10-29): tieu de nhom du thuyen =====
   - Khoi khuyen mai: chu do (khac mau voi tieu de nhom danh sach mau navy ben duoi).
   - Mobile: co chu tu co theo be ngang man hinh de khong xuong dong (>= 360px). */
html body .tv-pz-h { color: var(--red, #EA580C); }
html body .tv-pz-tt { align-items: center; gap: 10px; }
html body .tv-pz-ic { width: 32px; height: 32px; border-radius: 9px; font-size: 17px; }
html body .tv-pz-h { font-size: max(16px, min(20px, calc((100vw - 74px) / 17))); line-height: 1.3; }
html body p.tv-pz-h, html body p.tv-pz-t { margin: 0; }
html body p.tv-pz-t { font-weight: 600; }

    .list-search .tv-cz ~ .tv-cz { margin-top: 18px; }
    .tv-cz { position: relative; display: grid; grid-template-columns: clamp(220px, 28%, 320px) minmax(0, 1fr) 210px; overflow: hidden; border: 1px solid var(--line, #E0E7F4); border-radius: 18px; background: #fff; box-shadow: var(--sh-sm); transition: border-color .2s, box-shadow .25s, transform .25s; }
    .tv-cz:hover { border-color: #FFC9A3; box-shadow: var(--sh-md); transform: translateY(-2px); }
    .tv-cz .tv-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .tv-cz-ph { position: relative; display: block; min-height: 230px; overflow: hidden; background: var(--sky-2, #FDE7D6); }
    .tv-cz-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    .tv-cz:hover .tv-cz-ph img { transform: scale(1.05); }
    .tv-cz-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 11px; border-radius: 8px; background: var(--red, #EA580C); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
    .tv-cz-b { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 17px 22px 16px; }
    .tv-cz-t { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
    .tv-cz-h { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.35; }
    .tv-cz-h a { color: var(--navy, #0B2259); text-decoration: none; transition: color .2s; }
    .tv-cz-h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
    .tv-cz:hover .tv-cz-h a { color: var(--red, #EA580C); }
    .tv-cz-st { display: inline-flex; align-items: center; gap: 8px; }
    .tv-cz-stars { display: inline-flex; gap: 1px; color: var(--amber, #F4A100); font-size: 15px; line-height: 1; }
    .tv-cz-stars .off { color: #D5DDEC; }
    .tv-cz-st-l { color: var(--muted, #5A6682); font-size: 12.5px; }
    .tv-cz-r { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text, #38435E); font-size: 13.5px; line-height: 1.5; }
    .tv-cz-r .tv-i { margin-top: 2px; color: var(--red, #EA580C); font-size: 16px; }
    .tv-cz-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
    .tv-cz-chips li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 10px; border-radius: 8px; background: var(--sky, #FFF4EC); color: var(--navy, #0B2259); font-size: 12.5px; line-height: 1.35; }
    .tv-cz-chips li.w { background: var(--red-bg, #FFEDD5); color: var(--red-d, #C2410C); }
    .tv-cz-chips li .tv-i { color: var(--red, #EA580C); font-size: 14px; }
    .tv-cz-chips li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tv-cz-s { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted, #5A6682); font-size: 13.5px; line-height: 1.65; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .tv-cz-hl { position: relative; z-index: 2; margin-top: auto; }
    .tv-cz-hl-tg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: none; color: var(--red, #EA580C); font-weight: 700; font-size: 13.5px; cursor: pointer; }
    .tv-cz-hl-tg .tv-i { font-size: 16px; transition: transform .25s; }
    .tv-cz-hl-tg[aria-expanded="true"] .tv-i { transform: rotate(180deg); }
    .tv-cz-hl-l ul { display: grid; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
    .tv-cz-hl-l li { position: relative; padding-left: 22px; color: var(--text, #38435E); font-size: 13.5px; line-height: 1.5; }
    .tv-cz-hl-l li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--blue, #EA580C); border-bottom: 2px solid var(--blue, #EA580C); transform: rotate(-45deg); }
    .tv-cz-pr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 18px 16px; border-left: 1px solid var(--line, #E0E7F4); background: linear-gradient(180deg, #FFF9F4, #FFEEDF); text-align: center; }
    .tv-cz-pr > small { color: var(--muted, #5A6682); font-size: 12px; }
    .tv-cz-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .tv-cz-row { display: flex; align-items: center; gap: 8px; }
    .tv-cz-old { color: var(--muted, #5A6682); font-size: 12.5px; text-decoration: line-through; }
    .tv-cz-disc { padding: 2px 8px; border-radius: 6px; background: var(--red, #EA580C); color: #fff; font-weight: 700; font-size: 12px; }
    .tv-cz-val { color: var(--red, #EA580C); font-weight: 700; font-size: 24px; line-height: 1.2; white-space: nowrap; }
    .tv-cz-val small { margin-left: 3px; color: var(--muted, #5A6682); font-size: 11.5px; }
    .tv-cz-val.na { color: var(--navy, #0B2259); font-size: 20px; }
    .tv-cz-go { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px 0 18px; border-radius: 12px; background: var(--red, #EA580C); color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background .2s; }
    .tv-cz-go .tv-i { font-size: 16px; }
    .tv-cz:hover .tv-cz-go, .tv-cz-go:hover, .tv-cz-go:focus { background: var(--red-d, #C2410C); color: #fff; text-decoration: none; }
    @media (max-width: 991px) {
        .tv-cz { grid-template-columns: clamp(200px, 30%, 260px) minmax(0, 1fr) 180px; }
    }
    @media (max-width: 767px) {
        .list-search .tv-cz ~ .tv-cz { margin-top: 14px; }
        .tv-cz { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
        .tv-cz-ph { min-height: 0; aspect-ratio: 16 / 10; }
        .tv-cz-b { gap: 9px; padding: 14px 14px 8px; }
        .tv-cz-h { font-size: 16.5px; }
        .tv-cz-pr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab btn" "col btn"; align-items: end; justify-items: start; gap: 1px 10px; padding: 10px 14px 14px; border-left: 0; background: none; text-align: left; }
        .tv-cz-pr > small { grid-area: lab; }
        .tv-cz-col { grid-area: col; align-items: flex-start; gap: 2px; }
        .tv-cz-val { font-size: 21px; }
        .tv-cz-go { grid-area: btn; align-self: end; width: auto; min-height: 40px; margin: 0; padding: 0 10px 0 16px; font-size: 14px; }
    }
    @media (max-width: 380px) {
        .tv-cz-pr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lab" "col" "btn"; gap: 2px; }
        .tv-cz-go { width: 100%; margin-top: 8px; }
    }

    .tv-cz-h1 { margin: 40px 0 22px; }
    .tv-cz-h1 .ico-cruise { margin-right: 4px; color: var(--red, #EA580C); font-size: .9em; vertical-align: -0.05em; }
    .tv-cz-desc { max-width: none; /* truoc: 880px - 2026-10-29 full chieu rong nhu danh sach */ margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line, #E0E7F4); }
        .tv-cz-h1 { margin: 28px 0 16px; }
@media (max-width: 767px) { .tv-cz-h1 { margin: 28px 0 16px; } }

/* Ghi de mau lien ket chung cua site (cam dam !important) cho the du thuyen */
html body .dlo-cz-page .tv-cz-h a, html body .dlo-cz-page .tv-pz-t a { color: #0B3F73 !important; text-decoration: none !important; }
html body .dlo-cz-page .tv-cz:hover .tv-cz-h a, html body .dlo-cz-page .tv-pz-c:hover .tv-pz-t a { color: #EA580C !important; }
html body .dlo-cz-page a.tv-cz-go, html body .dlo-cz-page a.tv-cz-go:hover, html body .dlo-cz-page a.tv-cz-go:focus { color: #fff !important; text-decoration: none !important; }
html body .dlo-cz-page .tv-cz-go { position: relative; z-index: 2; }