/* ---------------------------------------------------------------------------
   MÀU CHỦ ĐẠO CỦA SHORTCODE
   Mọi chỗ trước đây đóng cứng tông xanh (#16a34a, #15803d, #0F7A3D, #166534)
   nay suy ra từ --ws-bg-title. Sắc độ tính bằng color-mix pha trắng/đen thay vì
   ghi tay, nên tông nào của theme cũng ra bộ hài hoà.
   Mỗi biến có mã hex đứng trước làm mức lùi cho trình duyệt cũ.
   --------------------------------------------------------------------------- */
:root{
    --pbs-main:      #186B23;
    --pbs-main:      var(--ws-bg-title, #186B23);
    --pbs-main-dark: #0f7a3d;
    --pbs-main-dark: color-mix(in srgb, var(--pbs-main) 82%, #000);
    --pbs-main-deep: #166534;
    --pbs-main-deep: color-mix(in srgb, var(--pbs-main) 66%, #000);
    --pbs-main-t10:  #ecfdf3;
    --pbs-main-t10:  color-mix(in srgb, var(--pbs-main) 10%, #fff);
    --pbs-main-t22:  #d7e6dd;
    --pbs-main-t22:  color-mix(in srgb, var(--pbs-main) 22%, #fff);
}
/* Shortcode PROBUS — tuyến / đánh giá / câu hỏi / thư viện / đếm đánh giá */
.pbs-sc{ margin:16px 0; }
.pbs-sc-title{ font-size:18px; font-weight:800; color:#0f172a; margin-bottom:12px; }

/* Đếm đánh giá */
.pbs-sc-dem{ display:inline-flex; align-items:center; gap:5px; font-size:14px; color:#334155; }
.pbs-sc-dem i{ color:#f4b000; }
.pbs-sc-dem b{ color:#0f172a; font-weight:800; }
.pbs-sc-dem em{ color:#64748b; font-style:normal; }

/* Tuyến đường — thẻ "viên thuốc" 2 cột: chiều ĐI trái, chiều VỀ phải.
   Dùng chung ngôn ngữ thiết kế với khối "Tuyến đường chính" ở trang nhà xe (.nxd2-route),
   nhưng khai lại bằng lớp .pbs-* vì shortcode phải TỰ ĐỦ: nó nhúng được vào bất kỳ trang
   nào, mà CSS của module nhà xe chỉ nạp ở một số trang. */
.pbs-tuyen-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:991px){ .pbs-tuyen-grid{ grid-template-columns:1fr; } }
.pbs-tuyen-item{ display:flex; align-items:center; gap:12px; padding:8px 8px 8px 14px;
    background:#fff; border:1px solid #cbd5e1; border-radius:999px; color:#0f172a;
    box-shadow:0 1px 3px rgba(16,24,40,.06); }
/* Ô trống (chiều về không tồn tại) — giữ lưới thẳng hàng, ẩn hẳn trên mobile */
.pbs-tuyen-empty{ background:transparent; border:0; box-shadow:none; padding:0; }
@media(max-width:991px){ .pbs-tuyen-empty{ display:none; } }
/* Ghim bản đồ đầu mỗi tuyến */
.pbs-tuyen-pin{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
    background:var(--pbs-main-t10); color:var(--pbs-main); font-size:13px; }
/* Tên điểm quá dài thì hàng này tự cuộn ngang, KHÔNG đẩy nút Xem giá xuống dòng */
.pbs-tuyen-line{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
    overflow-x:auto; scrollbar-width:none; }
.pbs-tuyen-line::-webkit-scrollbar{ display:none; }
.pbs-tuyen-tu, .pbs-tuyen-den{ font-size:14px; font-weight:700; color:#0f172a; white-space:nowrap; flex-shrink:0; }
.pbs-tuyen-arrow{ color:#94a3b8; font-weight:700; padding:0 2px; flex-shrink:0; }
/* Nút "Xem giá" — nền lấy theo MÀU NỀN TIÊU ĐỀ của theme (--ws-bg-title) để đồng bộ với
   phần còn lại của site; #186B23 chỉ là giá trị lùi khi biến chưa khai. */
/* Bọc thêm .pbs-sc-tuyen để độ ưu tiên (0,2,0) thắng rule ".noidungchitiet a" (0,1,1) của
   theme — landing page bọc nội dung trong .noidungchitiet nên link mặc định bị tô ĐỎ. */
.pbs-sc-tuyen .pbs-tuyen-xg{ flex:0 0 auto; min-width:104px; display:block; text-align:center;
    text-decoration:none; padding:7px 18px; border-radius:999px; font-size:13px; font-weight:800;
    background:var(--ws-bg-title,#186B23); color:var(--ws-color-title,#fff);
    transition:filter .14s ease; }
.pbs-sc-tuyen .pbs-tuyen-xg:hover,
.pbs-sc-tuyen .pbs-tuyen-xg:focus{ filter:brightness(.9); color:var(--ws-color-title,#fff); text-decoration:none; }
@media(max-width:560px){
    .pbs-tuyen-item{ gap:8px; padding:6px 6px 6px 10px; }
    .pbs-tuyen-pin{ width:26px; height:26px; font-size:12px; }
    .pbs-tuyen-line{ gap:6px; }
    .pbs-tuyen-tu, .pbs-tuyen-den{ font-size:13px; }
    .pbs-tuyen-arrow{ padding:0; }
    .pbs-sc-tuyen .pbs-tuyen-xg{ min-width:84px; padding:6px 12px; font-size:12px; }
}

/* Đánh giá */
.pbs-dg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.pbs-dg-agg{ font-size:14px; color:#334155; } .pbs-dg-agg i{ color:#f4b000; } .pbs-dg-agg b{ color:#0f172a; }
/* Số cột = số đánh giá hiện mỗi trang (--pbs-dg-cols, do shortcode đặt) → mỗi trang gọn
   trong ĐÚNG một hàng, lật trang không làm nhảy chiều cao khối. */
/* Bỏ align-items:start → lưới dùng mặc định stretch, các ô CAO BẰNG NHAU ngay từ đầu
   thay vì so le theo độ dài đánh giá. */
.pbs-dg-list{ display:grid; grid-template-columns:repeat(var(--pbs-dg-cols,2),1fr); gap:12px; }
@media(max-width:991px){ .pbs-dg-list{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .pbs-dg-list{ grid-template-columns:1fr; } }
/* JS gắn cho item ngoài trang đang xem */
.pbs-dg-item[hidden]{ display:none; }

/* Mũi tên lật trang — cùng ngôn ngữ với tab Đánh giá ở trang tuyến (.dv-rv-nav) */
.pbs-dg-pager{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:12px; }
.pbs-dg-pager[hidden]{ display:none; }
.pbs-dg-nav{
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:#fff; color:var(--pbs-main); border:1px solid var(--pbs-main-t22); font-size:16px; line-height:1;
    box-shadow:0 2px 6px -3px rgba(16,24,40,.25);
    transition:background .16s ease, color .16s ease, transform .16s ease;
}
.pbs-dg-nav:not(:disabled):hover{ background:var(--pbs-main); color:var(--ws-color-title,#fff); transform:translateY(-1px); }
.pbs-dg-nav:not(:disabled):active{ transform:translateY(0); }
/* Trang đầu/cuối: vẫn hiện nút, chỉ mờ + khóa con trỏ để thấy rõ là hết đường lật. */
.pbs-dg-nav:disabled{
    opacity:.45; cursor:not-allowed;
    color:#94a3b8; background:#f8fafc; border-color:#e6e9ef; box-shadow:none; transform:none;
}
.pbs-dg-item{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:12px 14px;
    display:flex; flex-direction:column; }
/* Nút "Đọc thêm" luôn nằm đáy ô — ô cao bằng nhau vẫn gọn, không lơ lửng giữa chừng */
/* margin-top:auto đẩy nút xuống đáy ô; align-self giữ nút CĂN TRÁI như trước —
   ô nay là flex column nên mặc định stretch sẽ làm chữ nằm giữa. */
.pbs-dg-item .pbs-dg-more{ margin-top:auto; align-self:flex-start; }
.pbs-dg-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.pbs-dg-stars{ flex:0 0 auto; white-space:nowrap; letter-spacing:1px; }
.pbs-dg-stars i{ color:#f4b000; font-size:13px; }
.pbs-star-off{ color:#dbe3ec; }   /* sao chưa đạt — vẫn in đủ 5 sao để nhìn ra mức ngay */

/* 3 dòng thông tin chuyến (đã đi · tuyến · loại xe) — cùng khuôn với trang đặt vé */
.pbs-dg-meta{ display:flex; flex-direction:column; gap:3px; margin:7px 0 8px; }
.pbs-dg-mi{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--pbs-main); }
.pbs-dg-mi i{ flex:0 0 14px; width:14px; text-align:center; font-size:12px; }

/* Nội dung mặc định CẮT 2 DÒNG; JS bật nút "Đọc thêm" ở thẻ thật sự bị cắt */
/* line-height 1.45 cho gọn. Kèm .pbs-sc-danhgia phía trước để thắng rule chung của
   theme cho thẻ <p> trong .noidungchitiet (landing page bọc nội dung ở đó và đặt
   line-height rộng) — nếu không, dòng chữ trong ô đánh giá bị giãn gấp đôi. */
.pbs-sc-danhgia .pbs-dg-nd{
    margin:0; color:#475569; font-size:13.5px; line-height:1.45; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.pbs-sc-danhgia .pbs-dg-meta{ gap:2px; margin:5px 0 6px; }
.pbs-sc-danhgia .pbs-dg-mi{ line-height:1.35; }
.pbs-dg-nd.mo{ -webkit-line-clamp:unset; overflow:visible; }
.pbs-dg-more{
    margin-top:5px; padding:0; border:0; background:none; cursor:pointer;
    font-size:12.5px; font-weight:700; color:var(--pbs-main); text-decoration:underline;
}
.pbs-dg-more:hover{ color:var(--pbs-main-deep); }
.pbs-dg-more[hidden]{ display:none; }
.pbs-dg-empty{ color:#94a3b8; }
.pbs-dg-form{ margin-top:14px; padding:14px; border:1px solid #e2e8f0; border-radius:14px; background:#fff; }
.pbs-dg-formtitle{ font-weight:800; color:#0f172a; margin-bottom:8px; font-size:14px; }
.pbs-dg-pick{ display:flex; gap:4px; margin-bottom:10px; }
.pbs-dg-star{ border:0; background:none; cursor:pointer; font-size:22px; color:#cbd5e1; padding:0; }
.pbs-dg-star.on{ color:#f4b000; }
.pbs-dg-form textarea{ width:100%; border:1px solid #d7dee7; border-radius:10px; padding:9px 12px; font-size:13.5px; resize:vertical; outline:none; }
.pbs-dg-form textarea:focus{ border-color:var(--pbs-main); }
.pbs-dg-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
.pbs-dg-msg{ font-size:12.5px; font-weight:600; } .pbs-dg-msg.ok{ color:var(--pbs-main); } .pbs-dg-msg.err{ color:#dc2626; }
.pbs-dg-btn{ border:0; cursor:pointer; background:var(--pbs-main); color:var(--ws-color-title,#fff); font-weight:700; padding:8px 18px; border-radius:10px; font-size:13.5px; }
.pbs-dg-btn:hover{ background:var(--pbs-main-dark); } .pbs-dg-btn:disabled{ opacity:.6; }
.pbs-dg-login{ margin-top:12px; padding:12px 14px; border:1px dashed #fca5a5; background:#fef2f2; border-radius:12px; color:#b91c1c; font-weight:600; font-size:13.5px; }
.pbs-dg-login a{ color:var(--pbs-main); font-weight:800; margin-left:6px; }

/* Câu hỏi (accordion) */
.pbs-faq-list{ display:flex; flex-direction:column; gap:10px; }
/* Hỏi đáp: giữ tối giản — gạch phân cách nét đứt thay vì khung thẻ, câu hỏi đang mở
   chỉ đổi màu chữ chứ không tô nền. Cùng ngôn ngữ với hỏi đáp dùng chung
   (question.css / question_item_home.css) để hai nơi nhìn như một. */
.pbs-faq-item{ border:0; border-bottom:1px dashed #dfdfdf; border-radius:0; background:transparent; }
.pbs-faq-item:last-child{ border-bottom:0; }
.pbs-faq-q{ width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:14px 4px; font-size:15.5px; font-weight:600; color:#1d1d1d;
    display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14.5px; }
.pbs-faq-q i{ transition:transform .2s ease; color:#6b7280; }
.pbs-faq-item.open .pbs-faq-q{ color:var(--ws-bg-title,#186B23); }
.pbs-faq-item.open .pbs-faq-q i{ transform:rotate(180deg); }
.pbs-faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; color:#6b6b6b; font-size:14.5px; line-height:1.65; padding:0 4px; }
.pbs-faq-item.open .pbs-faq-a{ max-height:600px; padding:0 4px 14px; }

/* Thư viện ảnh (cuộn ngang) */
.pbs-tv-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scroll-behavior:auto; }
.pbs-tv-scroll::-webkit-scrollbar{ height:6px; } .pbs-tv-scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.pbs-tv-img{ flex:0 0 auto; width:calc((100% - 20px)/3); height:170px; display:block; overflow:hidden; border-radius:14px; border:1px solid #d7dee7; scroll-snap-align:start; cursor:zoom-in; }
.pbs-tv-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.pbs-tv-img:hover img{ transform:scale(1.05); }
@media(max-width:640px){ .pbs-tv-img{ width:calc((100% - 10px)/2); height:140px; } }

/* ===== Shortcode "Thư viện ảnh" (websocode type="thuvienanh") =====
   Thẻ ảnh bo góc, nhãn nằm GÓC DƯỚI TRÁI trên nền chuyển sắc đen — theo mẫu.
   Khoanh trong .pbs-tv-cards để KHÔNG đụng tới trang thư viện của CMS vốn cũng
   dùng .itemgallery (nhãn ở đó vẫn căn giữa như cũ). */
.pbs-tv-cards{ --pbs-tv-caption: #f7d9a0; }
.pbs-tv-cards .itemgallery{
    border-radius: 14px;
    box-shadow: 0 6px 18px -10px rgba(16,24,40,.45);
}
.pbs-tv-cards .itemgallery .image{ border-radius: 14px; }
.pbs-tv-cards .itemgallery .image img{
    /* Khung ảnh cao bằng nhau: ảnh ngang/dọc lẫn lộn vẫn xếp thành một hàng đều.

       height PHẢI là auto. Đặt height:100% cùng aspect-ratio thì chiều cao thành số
       xác định, trình duyệt lấy nó nhân tỉ lệ ra CHIỀU RỘNG và bỏ qua width:100% —
       ảnh hụt vài pixel so với thẻ (đo được 227px trong thẻ 232px). Để auto thì chiều
       rộng bám thẻ, chiều cao suy ra từ tỉ lệ.

       max-width PHẢI khai lại: dinhdangnoidung.css đặt .noidungchitiet img{max-width:98%}
       cho ảnh dán trong nội dung CMS khỏi tràn khung. Shortcode nhúng vào landing page
       nằm ngay trong .noidungchitiet nên dính luôn — ảnh hụt 2% (đo được 227px trong
       thẻ 232px). */
    width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.pbs-tv-cards .itemgallery .altimage{
    text-align: left;
    padding: 26px 14px 10px;
    background: linear-gradient(0deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.35) 55%, rgba(8,8,8,0) 100%);
    color: var(--pbs-tv-caption);
    font-size: 15px; font-weight: 700; letter-spacing: .2px;
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* Bản gốc phóng to nhãn khi rê chuột — chữ căn trái mà phóng to thì lệch khỏi mép,
   nên chỉ đổi độ đậm của nền, giữ nguyên vị trí. */
.pbs-tv-cards .itemgallery:hover .altimage{
    transform: none;
    background: linear-gradient(0deg, rgba(8,8,8,.9) 0%, rgba(8,8,8,.45) 60%, rgba(8,8,8,0) 100%);
}
@media (max-width: 575.98px){
    .pbs-tv-cards .itemgallery .altimage{ font-size: 13.5px; padding: 20px 10px 8px; }
}

/* ===== "Xem thêm / Thu gọn" dùng chung =====
   CẮT bằng cách ẩn item thứ 7 trở đi (lưới 2 cột = 3 hàng) chứ không dùng max-height:
   max-height tính bằng pixel sẽ cắt ngang một hàng khi tên điểm dài làm ô cao lên.
   JS chỉ bật/tắt lớp .is-collapsed — xem resources/layout1/js/jsautoload/xemthem.js */
.pbs-tuyen-grid.is-collapsed > .pbs-tuyen-item:nth-child(n+13){ display: none; }
@media (max-width: 991px){
    /* Lưới về 1 cột → 6 hàng là 6 ô */
    .pbs-tuyen-grid.is-collapsed > .pbs-tuyen-item:nth-child(n+7){ display: none; }
}