/* V1.5.1 - CHI SUA GIAO DIEN SAN PHAM / DAT MAY. KHONG TAC DONG TRANG CHU, CHON VAI, CAU CHUYEN. */
.product-v15-note{margin:0 0 18px;padding:13px 16px;border:1px solid #e7dadf;background:#fff8fa;border-radius:14px;color:#705c65;font-size:13px}
.product-v15-note b{color:var(--brand)}

.pd-v15{padding:28px 0 56px;background:#fff}
.pd-v15 .pd-shell{width:min(1280px,calc(100% - 28px));margin:auto}
.pd-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--muted);font-weight:700;font-size:13px}
.pd-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:34px;align-items:start}
.pd-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pd-gallery-item{position:relative;background:#f3f0f1;border-radius:20px;overflow:hidden;min-height:360px;border:1px solid var(--line)}
.pd-gallery-item:first-child{grid-column:1/-1;min-height:620px}
.pd-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.pd-gallery-item .pd-index{position:absolute;left:12px;bottom:12px;background:rgba(29,24,27,.68);color:#fff;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.05em}
.pd-panel{position:sticky;top:90px;border:1px solid var(--line);border-radius:22px;background:#fff;padding:26px;box-shadow:0 16px 42px rgba(55,43,52,.07)}
.pd-code{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:800}
.pd-panel h1{font-family:Georgia,'Times New Roman',serif;font-size:40px;line-height:1.08;margin:8px 0 12px;color:var(--ink)}
.pd-lead{color:var(--muted);margin:0 0 18px}
.pd-feature-line{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0}
.pd-feature-line div{padding:13px 8px;border-right:1px solid var(--line)}
.pd-feature-line div:last-child{border-right:0}
.pd-feature-line b,.pd-feature-line small{display:block}.pd-feature-line b{font-size:10px;letter-spacing:.08em;color:var(--muted)}.pd-feature-line small{margin-top:4px;font-size:12px;font-weight:700}
.pd-price-box,.pd-fabric-choice{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbf8f9;margin:14px 0}
.pd-price-box label,.pd-fabric-choice h3{font-weight:800;font-size:13px;margin:0 0 8px;display:block}.pd-fabric-choice h3{font-family:inherit;font-size:15px}
.pd-height-row{display:flex;gap:8px}.pd-height-row input{flex:1;min-width:0;height:46px;border:1px solid #d9cdd2;border-radius:12px;padding:0 12px;font:inherit;background:#fff}.pd-height-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(154,79,104,.1)}
.pd-price-result{margin-top:10px;color:var(--brand);font-weight:800;font-size:23px}.pd-price-result small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.pd-fabric-choice p{font-size:12px;color:var(--muted);margin:0 0 11px}.pd-fabric-actions{display:flex;gap:8px;flex-wrap:wrap}.pd-choice-status{margin-top:10px;padding:9px 10px;border-radius:10px;background:#fff;border:1px dashed #dbcbd2;font-size:12px}.pd-choice-status b{color:var(--brand)}
.pd-main-actions{display:grid;gap:9px;margin-top:16px}.pd-main-actions .btn{width:100%;min-height:50px}.pd-microcopy{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.pd-details{margin-top:20px;border-top:1px solid var(--line);padding-top:17px}.pd-details h3{font-family:inherit;font-size:14px;margin:0 0 8px}.pd-detail-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #f0eaed;font-size:12px}.pd-detail-row span:first-child{color:var(--muted)}.pd-detail-row span:last-child{text-align:right;font-weight:700}

.fabric-select-modal,.order-v15-modal{position:fixed;inset:0;z-index:120;display:none}.fabric-select-modal.open,.order-v15-modal.open{display:block}.v15-modal-bg{position:absolute;inset:0;background:rgba(28,23,26,.58);backdrop-filter:blur(4px)}
.fabric-select-card{position:relative;z-index:1;width:min(1180px,calc(100% - 24px));height:min(90vh,900px);margin:5vh auto;background:#fff;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 90px rgba(20,14,18,.25)}
.fabric-select-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start}.fabric-select-head>div{flex:1}.fabric-select-head h2{font-family:Georgia,'Times New Roman',serif;font-size:30px;margin:3px 0 4px}.fabric-select-head p{margin:0;color:var(--muted);font-size:13px}.v15-close{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:22px;cursor:pointer}
.fabric-tools{padding:12px 22px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.fabric-tools input{flex:1;min-width:220px;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 13px}.fabric-count{font-size:12px;color:var(--muted);white-space:nowrap}.fabric-count b{color:var(--ink)}
.fabric-grid-v15{flex:1;overflow:auto;padding:16px 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-content:start;background:#faf8f9}.fabric-card-v15{border:2px solid transparent;border-radius:15px;background:#fff;padding:0;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 4px 14px rgba(55,43,52,.05)}.fabric-card-v15.selected{border-color:var(--brand);box-shadow:0 0 0 3px rgba(154,79,104,.1)}.fabric-card-v15 img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}.fabric-card-v15>span.fabric-code-v15{display:flex;justify-content:space-between;gap:6px;padding:8px 9px;font-size:11px;font-weight:800}
.fabric-select-bottom{padding:12px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff}.fabric-selected-text{font-size:12px}.fabric-selected-text b{color:var(--brand)}.fabric-bottom-actions{display:flex;gap:8px;flex-wrap:wrap}

.order-v15-card{position:relative;z-index:1;width:min(720px,calc(100% - 24px));max-height:92vh;overflow:auto;margin:4vh auto;background:#fff;border-radius:22px;padding:24px;box-shadow:0 30px 90px rgba(20,14,18,.25)}.order-v15-card .v15-close{position:absolute;right:14px;top:14px}.order-v15-card h2{font-family:Georgia,'Times New Roman',serif;font-size:32px;margin:5px 48px 7px 0}.order-v15-card>p{color:var(--muted);font-size:13px}.order-summary-v15{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fbf8f9;margin:14px 0}.order-summary-v15 img{width:88px;height:106px;object-fit:cover;border-radius:10px}.order-summary-v15 b,.order-summary-v15 small{display:block}.order-summary-v15 small{margin-top:4px;color:var(--muted)}
.order-fabric-v15{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);padding:12px;border-radius:14px;margin:12px 0}.order-fabric-v15 label{font-size:10px;color:var(--muted);font-weight:800}.order-fabric-v15 strong,.order-fabric-v15 small{display:block}.order-fabric-v15 small{font-size:11px;color:var(--muted)}.order-fabric-v15 .btn{min-height:38px;padding:0 11px;font-size:11px}
.order-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.order-field{display:grid;gap:6px}.order-field.full{grid-column:1/-1}.order-field label{font-size:11px;font-weight:800}.order-field input,.order-field textarea{border:1px solid var(--line);border-radius:12px;padding:11px 12px;font:inherit}.order-field textarea{min-height:90px;resize:vertical}.order-privacy{font-size:11px;color:var(--muted);margin:12px 0}.order-success-v15{display:none;text-align:center;padding:28px 8px}.order-success-v15.show{display:block}.order-success-mark{width:58px;height:58px;border-radius:50%;background:#e8f3ef;color:#2f6762;display:grid;place-items:center;font-size:28px;margin:auto}.order-success-v15 h3{font-family:Georgia,'Times New Roman',serif;font-size:28px;margin:10px 0 5px}.order-success-v15 p{color:var(--muted)}

@media(max-width:980px){.pd-layout{grid-template-columns:1fr}.pd-panel{position:static}.pd-gallery-item:first-child{min-height:520px}.fabric-grid-v15{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.pd-v15{padding-top:14px}.pd-layout{gap:16px}.pd-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px}.pd-gallery-item,.pd-gallery-item:first-child{flex:0 0 88%;min-height:510px;grid-column:auto;scroll-snap-align:start}.pd-panel{padding:18px;border-radius:18px}.pd-panel h1{font-size:31px}.pd-feature-line div{padding:10px 5px}.pd-height-row{display:grid}.pd-fabric-actions{display:grid;grid-template-columns:1fr}.fabric-select-card{height:94vh;margin:3vh auto}.fabric-select-head{padding:16px}.fabric-select-head h2{font-size:25px}.fabric-tools{padding:10px 16px}.fabric-grid-v15{padding:12px 14px;grid-template-columns:repeat(2,1fr);gap:9px}.fabric-select-bottom{padding:10px 14px;display:block}.fabric-bottom-actions{margin-top:8px;display:grid;grid-template-columns:1fr 1fr}.order-v15-card{padding:18px;margin:2vh auto}.order-form-grid{grid-template-columns:1fr}.order-field.full{grid-column:auto}.order-fabric-v15{display:block}.order-fabric-v15>div:last-child{margin-top:9px;display:flex;gap:6px}}


/* V1.5.5 - FIX BANG MAU TRONG DAT MAY: khong de img lazy bi xep/collapse trong modal an. */
.fabric-grid-v15{grid-auto-rows:max-content}
.fabric-card-v15{display:block;min-width:0;height:auto}
.fabric-thumb-v15{display:block;width:100%;aspect-ratio:4/5;position:relative;overflow:hidden;background:linear-gradient(110deg,#f4eff1 8%,#fbf8f9 18%,#f4eff1 33%);background-size:200% 100%;animation:fabricV15Shimmer 1.2s linear infinite}
.fabric-thumb-v15 img{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity .16s ease}
.fabric-thumb-v15.loaded{animation:none;background:#f3eef0}
.fabric-thumb-v15.loaded img{opacity:1}
.fabric-thumb-v15.error{animation:none;background:#f3eef0}
.fabric-thumb-v15.error:after{content:'Không tải được ảnh';position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;color:#8b7a82;font-size:11px;font-weight:700}
.fabric-code-v15{display:flex!important;min-height:36px;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px;font-size:11px;font-weight:800;background:#fff;color:var(--ink)}
.fabric-card-v15.selected .fabric-code-v15:after{content:'✓ Đã chọn';color:var(--brand)}
@keyframes fabricV15Shimmer{to{background-position-x:-200%}}


/* =========================================================
   V1.5.6 — PRODUCT MEDIA / FONT / BRAND HEADER
   ========================================================= */

/* Font dễ đọc tiếng Việt hơn ở khu sản phẩm. */
body.product-detail-v156 .pd-panel h1,
body.product-detail-v156 .fabric-select-head h2,
body.product-detail-v156 .order-v15-card h2,
body.product-detail-v156 .order-success-v15 h3,
body.product-list-v156 .pagehead h1,
body.product-list-v156 .consult h2,
body.product-list-v156 .product h3{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.035em;
}

/* Gallery mới: một hàng, mỗi lần xem một ảnh, vuốt ngang được. */
body.product-detail-v156 .pd-gallery{display:block;min-width:0}
.pd-media-v156{min-width:0}
.pd-media-stage-v156{
  position:relative;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#f5f1f2;
  box-shadow:0 14px 36px rgba(55,43,52,.06);
}
.pd-image-mode-v156{position:relative}
.pd-image-viewport-v156{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}
.pd-image-viewport-v156::-webkit-scrollbar{display:none}
.pd-image-track-v156{display:flex;width:100%}
.pd-slide-v156{
  flex:0 0 100%;
  width:100%;
  margin:0;
  aspect-ratio:4/5;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#f3eef0;
}
.pd-slide-v156 img{display:block;width:100%;height:100%;object-fit:cover}
.pd-media-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  background:rgba(255,255,255,.88);color:var(--ink);font-size:32px;line-height:1;
  display:grid;place-items:center;cursor:pointer;z-index:4;
  box-shadow:0 8px 26px rgba(25,18,22,.16);
}
.pd-media-arrow.prev{left:14px}.pd-media-arrow.next{right:14px}
.pd-media-counter-v156{
  position:absolute;right:14px;bottom:14px;z-index:4;
  display:flex;align-items:center;gap:5px;
  background:rgba(28,23,26,.72);color:#fff;border-radius:999px;
  padding:7px 11px;font-size:11px;font-weight:700;
}
.pd-media-switch-v156{
  display:flex;gap:8px;margin:12px 0 10px;padding:5px;
  width:max-content;max-width:100%;background:#f4eef0;border:1px solid var(--line);border-radius:999px;
}
.pd-media-switch-v156 button{
  min-width:112px;height:42px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  font:700 13px "Be Vietnam Pro",system-ui,sans-serif;cursor:pointer;padding:0 16px;
}
.pd-media-switch-v156 button span{font-size:10px;opacity:.7}
.pd-media-switch-v156 button.active{background:#fff;color:var(--brand);box-shadow:0 3px 12px rgba(66,44,56,.08)}
.pd-media-switch-v156 button:disabled{opacity:.38;cursor:not-allowed}
.pd-thumbs-v156{
  display:flex;gap:8px;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:thin;
}
.pd-thumb-v156{
  flex:0 0 76px;width:76px;height:92px;padding:0;border:2px solid transparent;border-radius:12px;
  overflow:hidden;background:#eee;cursor:pointer;opacity:.7;
}
.pd-thumb-v156.active{border-color:var(--brand);opacity:1;box-shadow:0 0 0 2px rgba(154,79,104,.12)}
.pd-thumb-v156 img{width:100%;height:100%;object-fit:cover}
.pd-video-mode-v156{min-height:520px;display:grid;place-items:center;padding:18px;background:#f7f3f4}
.pd-video-mode-v156[hidden]{display:none!important}
#pdVideoStage{width:100%}
.pd-native-video-v156{width:100%;max-width:620px;margin:auto}
.pd-native-video-v156 video{
  display:block;width:100%;max-height:720px;aspect-ratio:4/5;object-fit:contain;background:#111;border-radius:16px;
}
.pd-tiktok-v156{width:min(430px,100%);aspect-ratio:9/16;margin:auto;background:#111;border-radius:16px;overflow:hidden}
.pd-tiktok-v156 iframe{width:100%;height:100%;border:0;display:block}
.pd-open-tiktok-v156{display:block;text-align:center;margin:10px auto 0;color:var(--brand);font-weight:800;font-size:12px}
.pd-tiktok-link-v156{max-width:430px;margin:auto;text-align:center;padding:26px}
.pd-tiktok-link-v156 img{width:150px;aspect-ratio:4/5;object-fit:cover;border-radius:14px;margin:0 auto 14px}
.pd-tiktok-link-v156 b{display:block;font-size:18px}.pd-tiktok-link-v156 p{color:var(--muted);font-size:12px}
.pd-video-sources-v156{display:flex;gap:8px;overflow-x:auto;margin:0 0 8px}
.pd-video-sources-v156 button{
  flex:0 0 auto;min-height:38px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 14px;
  font-weight:800;font-size:11px;cursor:pointer;color:var(--muted)
}
.pd-video-sources-v156 button.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Header: logo lớn hơn để nhận diện thương hiệu rõ hơn. */
.header .brand{gap:12px}
.header .brand img{width:64px;height:64px}
.header .brand strong{font-size:24px}
.header .headrow{min-height:94px;grid-template-columns:285px 1fr 240px}

/* Modal màu: nhãn chỉ nói bảng màu & họa tiết, không hiển thị tổng số bảng. */
body.product-detail-v156 .fabric-count{font-weight:800;color:var(--brand)}

/* Desktop: ảnh bên trái vẫn gọn để phần đặt may nằm song song. */
@media(min-width:981px){
  body.product-detail-v156 .pd-layout{grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr)}
}

/* Tablet */
@media(max-width:980px){
  .header .headrow{grid-template-columns:270px 1fr auto}
  .header .brand img{width:58px;height:58px}
  .pd-video-mode-v156{min-height:480px}
}

/* Mobile */
@media(max-width:680px){
  .pd-media-stage-v156{border-radius:16px}
  .pd-slide-v156{aspect-ratio:4/5}
  .pd-media-arrow{width:40px;height:40px;font-size:28px}
  .pd-media-arrow.prev{left:8px}.pd-media-arrow.next{right:8px}
  .pd-media-counter-v156{right:9px;bottom:9px}
  .pd-media-switch-v156{width:100%;display:grid;grid-template-columns:1fr 1fr;border-radius:14px}
  .pd-media-switch-v156 button{min-width:0;width:100%;border-radius:10px}
  .pd-thumb-v156{flex-basis:64px;width:64px;height:78px}
  .pd-video-mode-v156{min-height:440px;padding:10px}
  .header .headrow{min-height:74px}
  .header .brand img{width:50px;height:50px}
  .header .brand strong{font-size:20px}
}

.order-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
