/* =========================================================
   tv-pz-mobile.css (dulichonline.com.vn) - 2026-11-11
   Theo mau travelvietnam.com.vn:
   1) Khoi "Top Du Thuyen ... Gia Dang Tot" tren MOBILE: khong slide, xep doc,
      the ngang (anh trai - thong tin phai), diem danh gia + cau danh gia lien nhau
      trong 1 khung vang. Trang chinh: chi hien 3 the + nut "Xem them".
   2) Trang chinh /du-thuyen-ha-long/: cac nhom chay slide ngang tren mobile.
   3) Desktop: 1-3 the thi gian kin hang.
   Duoc nap trong view/com_cruise/cruise_getlist.php va cruise_itemlist.php
   ========================================================= */
html body .tv-pz .tv-pz-more { display: none; }

/* Khoi danh gia trong the Top (trang nhom khong nap cruise-list.css nen can kieu goc o day) */
html body .tv-pz .tv-rv { margin: 2px 0; }
html body .tv-pz .tv-rv-h { display: flex; align-items: center; gap: 10px; }
html body .tv-pz .tv-rv-sc { flex: none; min-width: 38px; padding: 3px 8px; border-radius: 7px; background: var(--navy, #0B2259); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; }
html body .tv-pz .tv-rv-n { color: var(--muted, #6b7280); font-size: 15px; line-height: 1.4; }
html body .tv-pz .tv-rv-n b { margin-right: 4px; color: var(--navy, #0B2259); font-weight: 600; }
html body .tv-pz .tv-rv-q { position: relative; margin: 8px 0 0; padding: 0 0 0 26px; border: 0; background: none; color: var(--text, #1f2937); font-size: 15px; font-style: italic; line-height: 1.55; }
html body .tv-pz .tv-rv-q::before { content: "\201C"; position: absolute; left: 0; top: -6px; color: #F0A500; font: normal 34px/1 Georgia, serif; }
html body .tv-pz .tv-rv-q p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: inherit; line-height: inherit; }
html body .tv-pz .tv-rv-q cite { display: block; margin-top: 3px; color: var(--muted, #6b7280); font-size: 13.5px; font-style: normal; }
html body .tv-pz .tv-rv-q cite::before { content: "\2014  "; }

@media (max-width: 767px) {

  /* ---------- 1) TOP: xep doc, khong slide ---------- */
  html body .tv-pz .tv-pz-list {
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  html body .tv-pz .tv-pz-list > .tv-pz-c { flex: none; width: 100%; max-width: none; }
  html body .tv-pz .tv-pz-arr,
  html body .tv-pz .tv-pz-dots { display: none !important; }

  /* Tieu de khoi: luon 1 dong, co chu tu co theo be rong man hinh */
  html body .tv-pz .tv-pz-tt > div { min-width: 0; }
  html body .tv-pz p.tv-pz-h {
    white-space: nowrap !important;
    overflow: hidden; text-overflow: ellipsis;
    font-size: min(19px, calc((100vw - 92px) / 19.4)) !important;
    line-height: 1.3 !important;
  }

  /* The ngang gon */
  html body .tv-pz .tv-pz-c {
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-areas:
      "ph t"
      "ph st"
      "ph fx"
      "ph f"
      "rv rv"
      "q  q";
    grid-template-rows: auto auto auto 1fr auto auto;
    column-gap: 11px;
    padding: 10px;
    border-radius: 14px;
  }
  html body .tv-pz .tv-pz-b,
  html body .tv-pz .tv-rv { display: contents; }

  /* Anh */
  html body .tv-pz .tv-pz-ph {
    grid-area: ph; align-self: start;
    aspect-ratio: 4 / 5; height: auto; border-radius: 10px;
  }
  html body .tv-pz .tv-pz-ph img { width: 100%; height: 100%; object-fit: cover; }
  html body .tv-pz .tv-pz-disc { top: 6px; right: auto; left: 6px; padding: 2px 7px; font-size: 11px; }
  html body .tv-pz .tv-pz-dur { display: none; }

  /* Ten */
  html body .tv-pz .tv-pz-t { grid-area: t; margin: 0 0 3px; font-size: 15px; line-height: 1.3; }
  html body .tv-pz .tv-pz-t a {
    font-size: 15px !important; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Sao */
  html body .tv-pz .tv-pz-st { grid-area: st; font-size: 12px; line-height: 1.2; margin: 0 0 4px; }
  html body .tv-pz .tv-pz-st em { font-size: 11px; }

  /* Diem danh gia + cau danh gia: lien nhau trong 1 khung vang */
  html body .tv-pz .tv-rv-h {
    grid-area: rv; display: flex; align-items: center; gap: 6px;
    margin: 10px 0 0; padding: 8px 10px 0;
    border-radius: 10px 10px 0 0; background: #FFF7E6;
    font-size: 12px;
  }
  html body .tv-pz .tv-rv-h:only-child { padding-bottom: 8px; border-radius: 10px; }
  html body .tv-pz .tv-rv-sc { padding: 1px 6px; font-size: 12px; border-radius: 5px; }
  html body .tv-pz .tv-rv-n,
  html body .tv-pz .tv-rv-n * { font-size: 12px !important; }

  /* Thoi gian + Diem tham quan */
  html body .tv-pz .tv-pz-fx { grid-area: fx; display: block; margin: 0; padding: 0; border: 0; }
  html body .tv-pz .tv-pz-fx > div { display: block; margin: 0 0 2px; padding: 0; border: 0; line-height: 1.4; }
  html body .tv-pz .tv-pz-fx dt { display: inline; margin: 0; font-size: 11.5px; font-weight: 400; color: #8a93a3; line-height: 1.4 !important; }
  html body .tv-pz .tv-pz-fx dt::after { content: ": "; }
  html body .tv-pz .tv-pz-fx dd { display: inline; margin: 0; }
  html body .tv-pz .tv-pz-fx dd,
  html body .tv-pz .tv-pz-fx dd * { font-size: 12px !important; line-height: 1.4 !important; }
  html body .tv-pz .tv-pz-fx dd small { color: #6b7280; }

  /* Gia */
  html body .tv-pz .tv-pz-f { grid-area: f; align-self: end; margin: 6px 0 0; padding: 0; border: 0; }
  html body .tv-pz .tv-pz-pc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  html body .tv-pz .tv-pz-pc s { order: 2; font-size: 11.5px; }
  html body .tv-pz .tv-pz-pc b { font-size: 18px; line-height: 1.2; }
  html body .tv-pz .tv-pz-pc small { font-size: 11px; }
  html body .tv-pz .tv-pz-go { display: none; }

  /* Cau danh gia cua khach */
  html body .tv-pz .tv-rv-q {
    grid-area: q; position: relative;
    margin: 0; padding: 6px 10px 8px 30px; border: 0;
    border-radius: 0 0 10px 10px; background: #FFF7E6;
    font-size: 13px; line-height: 1.45;
  }
  html body .tv-pz .tv-rv-q::before {
    content: "\201C";
    position: absolute; left: 9px; top: 4px;
    font: 700 26px/1 Georgia, serif; color: #F0A500;
  }
  html body .tv-pz .tv-rv-q p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0; font-size: 13px; font-style: italic; color: #374151;
  }
  html body .tv-pz .tv-rv-q cite { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal; color: #8a6d1f; }
  html body .tv-pz .tv-rv-q cite::before { content: "\2014  "; }

  /* Trang chinh: chi hien 3 the dau + nut Xem them */
  html body .tv-pz.tv-pz--more:not(.is-open) .tv-pz-list > .tv-pz-c:nth-child(n+4) { display: none; }
  html body .tv-pz .tv-pz-more {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin: 14px 0 0; padding: 12px 14px;
    border: 1px solid #FBD3B5; border-radius: 12px;
    background: #fff; color: #EA580C;
    font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2;
    box-shadow: 0 6px 16px -12px rgba(11, 34, 89, .45);
    cursor: pointer;
  }
  html body .tv-pz .tv-pz-more .tv-i {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  html body .tv-pz .tv-pz-more[hidden] { display: none; }

  /* ---------- 2) TRANG CHINH: cac nhom chay slide ngang ---------- */
  html body .row-cruise-catlist .post-wrapper2 {
    display: flex; flex-wrap: nowrap; gap: 12px;
    margin: 0 -15px; padding: 4px 15px 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding: 0 15px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html body .row-cruise-catlist .post-wrapper2::-webkit-scrollbar { display: none; }
  html body .row-cruise-catlist .post-column2.tv-cl {
    display: flex; flex: 0 0 84%;
    width: auto; max-width: none; min-width: 0;
    margin: 0; padding: 0;
    scroll-snap-align: start;
  }
  html body .row-cruise-catlist .tv-cl-card:hover { transform: none; }
}

/* ---------- 3) DESKTOP: 1-3 the thi gian kin hang ---------- */