/* VITIMEX – Landing THEO BỘ MẪU (page.ldp-bo) v12.1 – bổ sung cho ldp-akb.css + ldp-nhom.css.
   Mỗi landing = 1 dòng tab BO_MAU. Ảnh chính theo từng mã (ảnh AI trên Haravan Files, chưa có thì hiện ảnh thật).
   Chỉ tác động trong #ldp. Không dùng "gap" của flex, "inset", "aspect-ratio" (chạy được máy cũ). */

/* slider ảnh theo mã: khung 4:5, điện thoại thấp thì giới hạn chiều cao để thấy giá ngay màn đầu */
.ldp-b .ldp-slide{padding-bottom:0;height:124vw;max-height:60vh;min-height:330px;cursor:pointer;background:#eceae6}
@media (min-width:621px){.ldp-b .ldp-slide{height:auto;max-height:none;min-height:0;padding-bottom:124%}}
.ldp-b .ldp-slide img{object-position:50% 22%}
.ldp-b.ldp-b--q .ldp-slide img{object-position:50% 70%}
.ldp-b .ldp-slider.is-go .ldp-slides{-webkit-scroll-snap-type:none;scroll-snap-type:none}
#ldp img.is-real{object-fit:contain!important;object-position:50% 40%!important;background:#f3f1ee}
.ldp-b .ldp-slide img.is-real{padding-bottom:40px}
.ldp-b .ldp-note{display:none;top:10px;left:10px;right:auto;bottom:auto}
.ldp-b .has-ai .ldp-note{display:block}
.ldp-b .ldp-count-img{left:auto;right:10px;top:10px;bottom:auto}
.ldp-b .ldp-slide .ldp-tag{display:none}
.ldp-b .ldp-arrow{width:40px;height:40px;margin-top:-20px;opacity:.9}
.ldp-b .ldp-arrow svg{width:20px;height:20px}

/* dải dưới ảnh: màu đang xem + giá (nằm trên ảnh để thấy giá ngay màn đầu) */
#ldp .ldp-bcap{position:absolute;left:0;right:0;bottom:0;margin:0!important;display:-webkit-flex;display:flex;-webkit-align-items:flex-end;align-items:flex-end;-webkit-justify-content:space-between;justify-content:space-between;padding:34px 14px 11px;font-size:15.5px;line-height:1.3;color:#fff;pointer-events:none;
  background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.58));background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.58))}
.ldp-bcap span{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ldp-bcap b{color:#ffd76a;font-size:22px;font-weight:800;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ldp-b .ldp-arrow{top:46%}

/* ô màu: cuộn ngang khi nhiều mã */
.ldp-b .ldp-bthumbs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 12px 2px;margin:0}
.ldp-b .ldp-bthumbs::-webkit-scrollbar{display:none}
.ldp-b .ldp-bthumbs button{-webkit-flex:0 0 66px;flex:0 0 66px;width:66px;margin:0 3px;padding:3px 3px 4px;border-radius:10px}
.ldp-b .ldp-bthumbs img{width:56px!important;height:56px!important;object-fit:cover;border-radius:7px;margin:0 auto;background:#f3f1ee}
.ldp-b .ldp-bthumbs span{font-size:11.5px;font-weight:700;line-height:1.2;margin-top:3px;height:28px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}

#ldp.ldp-b .ldp-h1{font-size:27px}
/* giá + thông tin nhanh */
.ldp-bprice{display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline;-webkit-flex-wrap:wrap;flex-wrap:wrap;background:#fff5f5;border:1.5px solid #f3c9cb;border-radius:14px;padding:10px 14px;margin:12px 0 4px;line-height:1.25}
.ldp-bprice span{font-weight:700;color:#5b6070;margin-right:6px}
.ldp-bprice strong{color:var(--red);font-size:30px;font-weight:800;margin-right:8px}
.ldp-bprice del{color:#7a7f8c;font-size:17px;font-weight:600;margin-right:8px}
.ldp-bprice small{display:block;width:100%;color:var(--muted);font-size:14px;margin-top:3px}

/* lưới màu: ảnh thật để khách xem đúng màu */
.ldp-b .ldp-card__img .ldp-tag{top:auto;bottom:8px;left:8px;font-size:12px;padding:3px 9px}
.ldp-real{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin:-4px 0 12px!important}

/* ảnh gợi ý mặc (ảnh AI bối cảnh) – chỉ hiện khi đã có ảnh */
.ldp-scene__row{display:-webkit-flex;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;padding:0 12px}
.ldp-scene__row::-webkit-scrollbar{display:none}
.ldp-scene figure{position:relative;-webkit-flex:0 0 84%;flex:0 0 84%;width:84%;margin:0 4px;scroll-snap-align:center;border-radius:14px;overflow:hidden}
.ldp-scene figure:only-child{-webkit-flex-basis:100%;flex-basis:100%;width:100%}
.ldp-scene .ldp-ratio--45{padding-bottom:124%}
.ldp-scene figcaption{position:absolute;left:10px;bottom:10px;right:10px;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ldp-scene .ldp-note{display:block;top:10px;left:10px;right:auto;bottom:auto}

/* khung chọn size: ảnh AI (thứ 2) hiện trọn khung */
.ldp-ps__g figure{position:relative}
.ldp-ps__ai img{object-fit:contain!important;background:#f3f1ee}
.ldp-ps__ai .ldp-note{display:block;top:8px;left:8px;right:auto;bottom:auto}

/* mã mới thêm từ bộ mẫu (đồng bộ trực tiếp) */
.ldp-card.is-new .ldp-card__b{background:var(--ok)}

/* v12.1 khối đặt hàng 1 chỗ: 1 màu → 2 size (+ số lượng) → 3 họ tên, SĐT, địa chỉ. Không pop-up, không tab */
.ldp-pick{padding-top:24px}
.ldp-pick .ldp-sub{margin-bottom:12px!important}
.ldp-pk{background:#fff;border:1.5px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;padding:4px 12px 6px}
.ldp-pick #dat-hang{background:#fff;border:1.5px solid var(--line);border-top:1px dashed #d5d2cb;border-radius:0 0 16px 16px;padding:2px 12px 14px}
.ldp-pk[hidden]+#dat-hang{border-top:1.5px solid var(--line);border-radius:16px;padding-top:14px}
.ldp-pick .ldp-lbl{margin:14px 0 8px!important;-webkit-flex-wrap:wrap;flex-wrap:wrap;line-height:1.25}
.ldp-pk-real{font-size:13px;font-weight:500;color:var(--muted);margin-left:8px}
.ldp-pk-col{font-size:15px;font-weight:700;color:var(--red);margin-left:8px}
/* ô màu (ảnh thật) */
.ldp-pk-cols{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -4px}
.ldp-pk-c{position:relative;display:block;width:31%;width:calc(33.333% - 8px);margin:4px;padding:0 0 7px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-align:center;font-family:inherit;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.ldp-pk-c .ldp-ratio{background:#f3f1ee}
.ldp-pk-c b{display:block;font-size:14px;line-height:1.25;margin:6px 4px 0;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ldp-pk-c small{display:block;font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap}
.ldp-pk-c.is-on{border-color:var(--red);box-shadow:0 0 0 1.5px var(--red)}
.ldp-pk-c.is-on:after{content:"\2713";position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-size:16px;font-weight:800;line-height:26px;text-align:center}
.ldp-pk-cols.is-4 .ldp-pk-c{width:23%;width:calc(25% - 6px);margin:3px;border-radius:10px;padding-bottom:6px}
.ldp-pk-cols.is-4{margin:0 -3px}
.ldp-pk-cols.is-4 .ldp-pk-c b{font-size:13px;margin-top:5px}
.ldp-pk-cols.is-4 .ldp-pk-c small{font-size:11px}
.ldp-pk-cols.is-4 .ldp-pk-c.is-on:after{width:22px;height:22px;line-height:22px;font-size:14px;top:4px;right:4px}
.ldp-pk-g{width:100%;margin:6px 4px 0!important;font-weight:800;font-size:16px;color:var(--navy)}
/* size: nút to, dòng nhỏ cân nặng */
.ldp-pk-sizes{margin:0 -4px 2px}
.ldp-pk-sizes button{width:31%;width:calc(33.333% - 8px);min-width:0;height:auto;min-height:56px;padding:6px 4px;line-height:1.15;font-family:inherit}
.ldp-pk-sizes b{display:block;font-size:19px;font-weight:800}
.ldp-pk-sizes small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;white-space:nowrap}
.ldp-pk-sizes button.is-ask b{font-size:15px}
.ldp-pk-sizes button.is-on small{color:#d9def0}
.ldp-pk-live{font-size:13.5px;color:var(--muted);margin:0 0 4px!important}
.ldp-pk-live:empty{display:none}
.ldp-pk-help{margin:2px 0 8px}
.ldp-pk-help[hidden]{display:none}
.ldp-pk-help summary{display:block;list-style:none;cursor:pointer;color:var(--navy2);font-weight:700;font-size:15.5px;padding:8px 0}
.ldp-pk-help summary::-webkit-details-marker{display:none}
.ldp-pk-help summary:before{content:"\25B8";display:inline-block;margin-right:6px}
.ldp-pk-help[open] summary:before{content:"\25BE"}
.ldp-pk-help .ldp-sizer{margin:2px 0 6px}
.ldp-pk-help .ldp-sizer__t{display:none}
.ldp-pk-tip{font-size:14.5px;line-height:1.45;color:#6b4a00;background:#fff8e1;border-radius:10px;padding:9px 12px;margin:2px 0 10px!important}
.ldp-pk-tip[hidden]{display:none}
.ldp-pk-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;margin:6px 0 10px;font-weight:800;font-size:17px;color:var(--navy)}
.ldp-pk-sum{background:#f6f5f2;border-radius:10px;padding:10px 12px;font-size:15.5px;line-height:1.45;margin:0 0 8px!important}
.ldp-pk-sum:empty{display:none}
.ldp-pk-sum span{color:var(--muted)}
.ldp-pk-sum .is-p{color:var(--red)}
.ldp-pk-more{display:block;width:100%;min-height:48px;margin:0 0 8px;border:1.5px dashed var(--navy2);border-radius:12px;background:#fff;color:var(--navy2);font-family:inherit;font-size:16px;font-weight:800;cursor:pointer}
.ldp-pk-more[hidden]{display:none}
.ldp-pk-msg{font-size:15px;font-weight:700;line-height:1.4;margin:0 0 6px!important}
.ldp-pk-msg:empty{display:none}
.ldp-pk-msg.is-ok{color:var(--ok)}
.ldp-pk-msg.is-bad{color:var(--red)}
.ldp-pk-added{font-weight:800;color:var(--ok);margin:10px 0 6px!important}
.ldp-pick .ldp-cart{margin-top:6px}
.ldp-pick .ldp-fld--s input{min-height:48px;font-size:16px}
.ldp-pick .ldp-check{margin:0 0 12px;padding:10px 12px}
@media (max-width:360px){.ldp-pk{padding:4px 8px 6px}.ldp-pick #dat-hang{padding:2px 8px 12px}.ldp-pk-c b{font-size:13px}.ldp-pk-sizes small{font-size:11px}}

@media (max-width:360px){.ldp-bprice strong{font-size:26px}.ldp-b .ldp-bthumbs button{-webkit-flex-basis:60px;flex-basis:60px;width:60px}.ldp-b .ldp-bthumbs img{width:50px!important;height:50px!important}}

/* Trang landing theo bộ: ẩn nút nổi của theme, đường dẫn breadcrumb */
body[class*="temp-page-ldp-bo"] .vtm-float-contact,
body[class*="temp-page-ldp-bo"] hrv-loyalty,
body[class*="temp-page-ldp-bo"] #hrv-loyalty,
body[class*="temp-page-ldp-bo"] .back-to-top,
body[class*="temp-page-ldp-bo"] #back-to-top{display:none!important}
body[class*="temp-page-ldp-bo"] .breadcrumb-wrapper,
body[class*="temp-page-ldp-bo"] .breadcrumb-shop{display:none!important}

/* v13.1 – khi có giảm giá (giá gốc thật trên web, hoặc giá sale landing ghi ở Google Sheet) */
#ldp .ldp-bprice.is-sale{background:#fff0f0;border-color:#efb3b8}
#ldp .ldp-bprice .ldp-off{display:inline-block;background:var(--red);color:#fff;font-size:15px;font-weight:800;line-height:1.2;padding:4px 9px;border-radius:8px;margin-right:8px;-webkit-align-self:center;align-self:center}
#ldp .ldp-bprice del{text-decoration:line-through}
#ldp .ldp-save{display:block;width:100%;font-style:normal;font-weight:700;font-size:15px;color:var(--ok);margin-top:2px}
#ldp .ldp-offb{position:absolute;left:10px;top:10px;z-index:2;background:var(--red);color:#fff;font-size:15px;font-weight:800;line-height:1;padding:7px 10px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}
#ldp .has-ai .ldp-offb{top:40px}
#ldp .ldp-pk-off{position:absolute;left:5px;top:5px;z-index:1;background:var(--red);color:#fff;font-style:normal;font-size:12px;font-weight:800;line-height:1;padding:4px 6px;border-radius:6px}
#ldp .ldp-bcap b s{font-size:14px;font-weight:600;color:#fff;opacity:.85;margin-left:4px}
#ldp .ldp-pk-sum s,#ldp .ldp-line__s s{color:var(--muted);font-weight:400;font-size:.9em;margin-left:3px}
#ldp .ldp-pk-c small em{font-style:normal;font-weight:700;color:var(--red)}
#ldp .ldp-pk-c small em:before{content:" · ";color:var(--muted);font-weight:400}
#ldp .ldp-pk-cols.is-4 .ldp-pk-c small em{display:block}
#ldp .ldp-pk-cols.is-4 .ldp-pk-c small em:before{content:none}
#ldp .ldp-pk-cols.is-4 .ldp-pk-off{font-size:11px;padding:3px 5px;left:3px;top:3px}

/* v13.2 – bảng size (trong khối đặt hàng + mục "Bảng size" trên trang) */
#ldp .ldp-size__t{font-weight:800;color:var(--navy);font-size:16px;margin:14px 0 6px!important}
#ldp .ldp-size__t span{font-weight:600;color:var(--muted)}
#ldp .ldp-size__t b{color:var(--red)}
#ldp .ldp-size__note{font-size:14px;color:var(--muted);margin:-4px 0 6px!important}
#ldp .ldp-size{margin:6px 0 12px}
#ldp .ldp-size td,#ldp .ldp-size th{padding:9px 8px}
#ldp .ldp-pk-help .ldp-size{font-size:15px}
#ldp .ldp-pk-help .ldp-size tbody tr{cursor:pointer;-webkit-tap-highlight-color:transparent}
#ldp .ldp-size tr.is-on td{background:#0b1537;color:#fff}
#ldp .ldp-size tr.is-on td:first-child{color:#fff}
#bang-size .ldp-btn{margin-top:6px}