/* Chi tiết sản phẩm kiểu marketplace: gallery bên trái, màu sắc bên phải. */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(6,10,14,.76);backdrop-filter:blur(5px)}
.modal.open{display:flex}
.modal .modal-box{position:relative;width:min(1160px,96vw);height:min(720px,90vh);max-width:none;max-height:90vh;background:#fff;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:58% 42%;box-shadow:0 28px 100px rgba(0,0,0,.35)}
.modal .modal-close{position:absolute;z-index:5;right:18px;top:17px;width:36px;height:36px;border:1px solid #e4e6e8;border-radius:50%;background:#fff;color:#1a2027;font-size:24px;line-height:1;cursor:pointer}
.modal .modal-gallery{background:#f5f6f7;min-width:0;min-height:0;padding:22px}
.modal .gallery-layout{height:100%;display:grid;grid-template-columns:82px minmax(0,1fr);gap:14px;min-height:0}
.modal .thumb-column{min-height:0;display:grid;grid-template-rows:30px minmax(0,1fr) 30px;gap:5px}
.modal .modal-thumbs{display:flex;flex-direction:column;gap:9px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-behavior:smooth;padding:2px}
.modal .modal-thumbs::-webkit-scrollbar{display:none}
.modal .modal-thumb{flex:0 0 72px;width:72px;height:72px;border:1px solid #dfe3e7;border-radius:10px;padding:3px;background:#fff;cursor:pointer;overflow:hidden}
.modal .modal-thumb img{width:100%;height:100%;object-fit:contain}
.modal .modal-thumb.active{border:2px solid #e6532f;padding:2px}
.modal .thumb-nav{width:72px;height:28px;border:0;background:transparent;color:#68727d;font-size:19px;cursor:pointer;border-radius:7px;line-height:1}
.modal .thumb-nav:hover{background:#e9ecef}
.modal .modal-image{min-height:0;background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.modal .modal-image img{width:100%;height:100%;object-fit:contain}
.modal .modal-body{min-width:0;background:#fff;overflow:hidden;padding:0}
.modal .modal-scroll{height:100%;overflow-y:auto;padding:52px 38px 34px}
.modal .modal-category{display:inline-block;color:#e6532f;font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}
.modal .modal-body h2{font-size:29px;line-height:1.12;letter-spacing:-.8px;margin:9px 40px 9px 0}
.modal .modal-price{display:block;font-size:18px;color:#e6532f;font-weight:900;margin:0 0 22px}
.modal .variant-picker{margin:0 0 22px;padding:17px 0;border-top:1px solid #e7e9ec;border-bottom:1px solid #e7e9ec}
.modal .variant-picker.empty{display:none}
.modal .variant-title{color:#737d87;font-size:11px;font-weight:800;margin-bottom:11px}
.modal .variant-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.modal .variant-option{min-width:0;border:1px solid #dfe3e7;border-radius:10px;background:#fff;padding:7px 5px 6px;cursor:pointer;text-align:center;color:#20262d}
.modal .variant-option:hover{border-color:#adb5bd}
.modal .variant-option.active{border:2px solid #e6532f;padding:6px 4px 5px}
.modal .variant-option img{display:block;width:100%;height:58px;object-fit:contain;margin-bottom:5px}
.modal .variant-option span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;font-weight:700}
.modal .spec-card{border-top:0}
.modal .spec-title{text-transform:uppercase;color:#8a939d;font-size:10px;font-weight:900;letter-spacing:1.6px;padding:3px 0 9px}
.modal .spec-table{margin:0}
.modal .spec-row{display:grid;grid-template-columns:138px minmax(0,1fr);gap:15px;padding:9px 0;border-bottom:1px solid #edf0f2;font-size:12.5px;line-height:1.5}
.modal .spec-key{color:#7c858f}.modal .spec-value{font-weight:600;color:#2c343d}
.modal .description-free{font-size:13px;line-height:1.7;color:#5f6974;padding:4px 0 10px}
.modal .quote-btn{display:flex;align-items:center;justify-content:space-between;margin-top:24px;width:100%;background:#101318;color:#fff;padding:14px 16px;border:0;border-radius:10px;font-size:13px;font-weight:900;text-decoration:none}
.modal .quote-btn span{font-size:17px}.modal .policy{display:flex;gap:16px;flex-wrap:wrap;color:#6d7680;font-size:11px;margin-top:18px;padding-top:18px;border-top:1px solid #e6e9ed}.modal .policy span{white-space:nowrap}
@media(max-width:900px){.modal .modal-box{grid-template-columns:56% 44%}.modal .modal-scroll{padding:45px 25px 28px}.modal .variant-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.modal{padding:0;align-items:stretch}.modal .modal-box{width:100%;height:100%;max-height:none;border-radius:0;grid-template-columns:1fr;grid-template-rows:48% 52%}.modal .modal-gallery{padding:10px}.modal .gallery-layout{grid-template-columns:62px minmax(0,1fr);gap:8px}.modal .modal-thumb{width:56px;height:56px;flex-basis:56px}.modal .thumb-nav{width:56px}.modal .modal-image{padding:14px}.modal .modal-scroll{padding:26px 20px 28px}.modal .modal-body h2{font-size:24px;margin-right:34px}.modal .modal-close{top:12px;right:12px}.modal .spec-row{grid-template-columns:115px minmax(0,1fr)}.modal .variant-options{grid-template-columns:repeat(3,minmax(0,1fr))}.modal .variant-option img{height:48px}}