.slick-product-prev{left:20px} .slick-product-next{right:20px} .slick-arrow,.slick-dots{opacity:1} .slick-dots{bottom:.625rem;display:flex;left:50%;position:absolute;z-index:2;--tw-translate-x:-50%;align-items:center;background-color:#090d1480;border-radius:100px;justify-content:center;padding:.125rem .375rem;transform:translate(var(--tw-translate-x),0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);width:auto} .slick-dots li{margin:0} .slick-dots li button{background-color:#ffffff80;border-radius:9999px;height:.375rem;margin:.25rem;padding-left:.125rem;padding-right:.125rem;transition-delay:0s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:ease;width:.375rem} .slick-dots li.slick-active button{width:1.2rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important} .slick-product-prev,.slick-product-next{width:40px;height:40px;background-color:#f3f4f6} .slick-product-prev,.slick-product-next{font-size:16px;color:black} .slick-product-prev,.slick-product-next,.slick-next,.slick-prev{width:40px;height:40px} .slick-product-prev,.slick-product-next{font-size:16px} .box-detail-info{gap:50px} .box-detail-info .detail-info-left{width:45%} .pre-order h2{color:#D0764A;text-align:center;font-size:40px;margin:0} /* ===== "Chọn iPhone phù hợp với bạn" — Figma LDP-iPhone-2026 node 25:3354 ===== */ .pre-order .header-title{font-size:24px;line-height:24px;font-weight:700;color:#424242} .detail-info-right .box-product-option{font-size:15px} .detail-info-right .box-product-option .label{display:block;font-size:14px;font-weight:600;color:#191919;margin-bottom:12px} /* .detail-info-right .box-product-option.color{flex-direction:unset;position:relative;height:70px} */ .detail-info-right .box-product-option .list-option{display:flex!important;gap:12px} .detail-info-right .box-product-option .item-option{padding:8px;min-height:auto;height:54px;box-sizing:border-box;border:1px solid #dadee3;border-radius:10px;background:#fff} .detail-info-right .box-product-option .item-option:before{display:none} .box-product-option .item-option.selected:before{display:none} #option-version .item-option.selected{border-color:#191919;position:relative} #option-version .item-option.selected:after{content:"\0069";font-family:icomoon!important;position:absolute;right:-1px;bottom:-1px;width:24px;height:18px;line-height:18px;font-size:11px;color:#fff;text-align:center;background:linear-gradient(135deg,#191919,#191919);border-radius:8px 0 8px 0} /* min-width:0 bắt buộc để 4 ô rộng đều nhau — flex item mặc định có min-width:auto, khiến ô chữ dài ("Đỏ hồng") không co được ngang bằng ô chữ ngắn ("Tím") dù đã có flex:1 */ .detail-info-right .box-product-option .list-option .option-color-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 0;min-width:0;padding:8px 12px;border:1px solid #dadee3;border-radius:10px;box-sizing:border-box;cursor:pointer} /* Tối đa 4 màu trên 1 dòng, vượt quá thì xuống dòng. Dùng grid auto-fit: 4 cột khi đủ màu, khi ít hơn 4 màu các cột trống tự co lại để các ô vẫn giãn đầy dòng */ .detail-info-right .box-product-option .list-option#option-color{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(calc(50% - 9px),1fr));gap:12px;width:100%} .detail-info-right .box-product-option .list-option#option-color .option-color-item span{font-size:14px;font-weight:600;color:#323539;white-space:normal;text-align:center;min-width:0} /*.detail-info-right .box-product-option .item-option span{color:white;line-height:unset;font-size:17px} */ .box-order .order-btn{background:linear-gradient(90deg,#7f2e37 0%,#e05161 100%)!important;width:fit-content;min-width:300px;margin:auto;padding:12px 32px;height:54px;box-sizing:border-box;border-radius:40px;display:flex;align-items:center;justify-content:center;text-decoration:none} .box-order.product-action{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px} .box-order.product-action .price-bg { border-radius: 8px; flex-direction: column; gap: 8px; outline: none; justify-content: center; display: flex; flex: 1 1 calc(50% - 6px); text-align: center; background: #F2F2F6; border: 1px solid #F2F2F6; color: #424242; padding: 8px 12px; box-sizing: border-box } .box-order.product-action .price-bg label{font-size:14px;font-weight:400} .box-order.product-action .price-bg strong{font-size:20px;font-weight:700} .box-order.product-action .price-end, .box-order.product-action .box-order-btn{flex:1 1 100%} /*.box-order .order-btn:hover{background:linear-gradient(90deg,#f1ceb3 0%,#D0764A 100%)} */ .box-order .order-btn strong{font-size:20px;line-height:24px;font-weight:700;white-space:nowrap} #option-color .item-option-iphone17{border:1px solid #eaebf0;min-height:unset;height:30px;width:30px;flex-shrink:0;border-radius:8px;padding:0;cursor:pointer} #option-version .item-option{justify-content:center;flex:1;text-align:center;box-sizing:border-box} .detail-info-right .box-product-option #option-version span{white-space:nowrap} .title-text{font-size:20px;color:white;font-weight:600} .detail-info-right .box-product-option .list-option#option-color .option-color-item:has(.item-option-iphone17.selected) { border-color: #191919 } .installment{color:black;text-align:center;font-size:15px} .installment i{font-size:13px} /*#option-version .item-option.active,#option-version .item-option:hover,#option-version .item-option.selected{background:#4486f9;box-shadow:0 0 20.8px 4px #5291E966} */ .detail-info-right .box-price{display:flex;align-items:center;gap:8px;font-weight:600;justify-content:center;font-size:14px;color:#424242} .detail-info-right .box-price .item-box-price{display:flex;text-align:center;align-items:center;gap:8px} .detail-info-right .box-price strong{font-size:20px;line-height:24px;font-weight:700;color:#d02b26} .display-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center} .display-grid .one{grid-column:span 1} .display-grid .three{grid-column:span 3;text-align:center;justify-content:center} .btn-loadtab{text-align:center;padding:40px 0 0;display:flex;align-items:stretch;justify-content:center;gap:20px} .btn-loadtab a{flex:1 1 0;color:#424242;font-weight:700;padding:12px 16px;border-radius:12px;background-color:#ffffff;border:1px solid #eaebf0;display:flex;text-align:center; flex-direction:column;gap:8px;align-items:center;justify-content:center;cursor:pointer} .btn-loadtab a strong{display:flex;align-items:center;justify-content:center;gap:4px;font-size:20px;line-height:28px;white-space:nowrap} .btn-loadtab a i{margin-right:0;font-size:20px} .btn-loadtab a span{font-size:16px;line-height:24px;font-weight:700} .btn-loadtab a:hover,.btn-loadtab a.selected{background:linear-gradient(90deg,#7f2e37 0%,#52161d 100%);border-color:transparent;color:#fff} .price-end{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-style:normal;font-weight:600;font-size:14px;color:#191919;margin:0} .price-end strong{color:#d02b26;font-size:24px;line-height:30px;font-weight:700} .box-tabcontent{background:unset} .box-tabcontent.selected{background:#4486f9} #tabContent{padding:30px} #tabContent .container{width:unset;min-width:unset} .product-detail .box-header .header-name h1{font-size:24px;line-height:30px;font-weight:700;color:#424242;text-align:center;margin:0} .product-detail .box-header .header-name h1 i{font-size:22px} #boxcontent .item{position:relative;border:1px solid #C9C9C9} .bg-content{display:flex;justify-content:space-around;text-align:center;-webkit-align-items:inherit;align-items:inherit} .bg-content a{font-size:25px;color:#fff;padding:30px 0;font-weight:700;position:relative} .bg-content a.active::before{content:"";position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:16px solid #3498db} .LastPrice{display:none} #id-ss-series-menu { position: sticky; top: 130px; left: 0; width: 100%; transition: top 0.3s ease; z-index: 1000; background: #0B0B0B } header.hidden + .w-container.body-wrapper #id-ss-series-menu{top:0;z-index:9} /* ===== Nav "Scroll Bar Header" — Figma LDP-iPhone-2026 node 243:87989 ===== */ .ss-series-menu{background:transparent;z-index:1} .ss-series-menu .inner .ss-menu-scroll{width:100%;padding:0} #id-ss-series-menu .container{padding:12px 24px;box-sizing:border-box} .ss-menu-scroll ul{display:flex;align-items:center;gap:20px;margin:0;padding:0} .ss-menu-scroll ul li{padding:0!important;height:40px;display:flex;align-items:center} .ss-menu-scroll ul li.scroll-item button:before{content:unset} /* nhóm link giữa (Ưu đãi thanh toán, Member, ...) nhận flex:1 để tự căn giữa phần còn lại giữa logo và CTA */ .ss-menu-scroll ul li.menu-links-cell{flex:1 1 auto;justify-content:right;min-width:0} .ss-menu-scroll ul li.menu-links-cell ul.menu-links{display:flex;align-items:center;justify-content:center;gap:20px;margin:0;padding:0;list-style:none;min-width:0} .ss-menu-scroll ul li.menu-links-cell ul.menu-links li{padding:0!important;height:40px;display:flex;align-items:center} .ss-menu-scroll ul li button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;width:fit-content;margin:0;padding:10px 16px;border-radius:60px;background:transparent;color:#FFF;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;transition:background .25s ease} /* #id-ss-series-menu thêm vào để thắng specificity rule dùng chung ".ss-series-menu .inner .active{background:unset;color:black}" (Content/Landding/css/web.css) — rule đó có 3 class trong khi rule gốc chỉ có 2, khiến trạng thái active bị đen trùng nav thay vì sáng như hover */ #id-ss-series-menu .ss-menu-scroll ul li button:hover, #id-ss-series-menu .ss-menu-scroll ul li button.active { background: linear-gradient(243.41deg, #e05161 4.85%, #7f2e37 92.34%); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .ss-menu-scroll ul li.cta{order:1;flex:0 0 auto} .ss-menu-scroll ul li.cta button{background:linear-gradient(243.41deg,#e05161 4.85%,#7f2e37 92.34%);color:#fff;font-size:16px;font-weight:700} .ss-menu-scroll ul li.cta button:hover{filter:brightness(1.12)} /* CTA chỉ có trạng thái hover — ép về đúng 1 style bất kể JS scroll-spy có gắn thêm class .active */ .ss-menu-scroll ul li.cta button.active{background:linear-gradient(243.41deg,#e05161 4.85%,#7f2e37 92.34%)!important;color:#fff!important;filter:none!important} /* logo Apple Authorised Reseller */ #id-ss-series-menu .logo{position:relative;top:0;width:auto;height:40px;flex:0 0 auto;min-width:0;overflow:visible;background:none;border-radius:0} #id-ss-series-menu .logo a{display:flex;align-items:center;gap:10px;height:40px;border-bottom:0;text-decoration:none} #id-ss-series-menu .logo a i { font-size: 32px; line-height: 1; color: #f4f4f4 } #id-ss-series-menu .logo a span { color: #f4f4f4; font-size: 13px; font-weight: 600; line-height: 20px; text-align: start } .ss-series-menu ul li a{border-bottom:0} .ss-series-menu ul li a:hover{border-bottom-color:unset} /* ===== Shell "Body" — Figma LDP-iPhone-2026 node 8:575 ===== */ .w-container.body-wrapper{background:#0b0b0b} .body-wrapper main{display:block;padding:0 0 40px} /* Card trắng bo 12px, cách nhau 40px; rộng chuẩn 1200 (khớp .container toàn hệ thống) — .container bên trong mỗi card phải fill 100% vì bản thân card đã lo việc giới hạn 1200, để .container tự 1200 sẽ tràn ra ngoài do card có padding 20px hai bên */ .body-wrapper main > section, .body-wrapper main > .box-content{box-sizing:border-box;width:1200px;max-width:100%;margin:0 auto 40px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 2px rgba(0,0,0,.05)} .body-wrapper main > section:last-child{margin-bottom:0} .body-wrapper main > section .container, .body-wrapper main > .box-content .container{width:100%;min-width:0} /* Banner: ảnh bo góc tràn khối, không khung trắng */ .body-wrapper main > section.ld-banner { padding: 12px 0 0 0; background: transparent; box-shadow: none; overflow: hidden } /* Banner slider — Figma node 48:9677 (1280x530): không ép ảnh giãn hết khung khi ảnh gốc/ CDN trả về nhỏ hơn container */ .ld-banner .container{padding:0} .ld-banner .v5-list-items{width:100%;max-width:1200px;margin:0 auto} /* Khung banner cố định 1200x375 - dùng aspect-ratio thay vì height cứng để tại shell 1200px ra đúng 375px, còn khi cửa sổ hẹp hơn thì co đúng tỉ lệ */ .ld-banner .v5-list-items a{display:block;width:100%;aspect-ratio:1200/375;overflow:hidden} .ld-banner .v5-list-items a img{width:100%;height:100%;object-fit:cover;display:block} /* Nav canh đúng mép card */ #id-ss-series-menu .container{width:1200px;min-width:1200px} .slick-list{margin-left:0;margin-right:0} .slide-product-slick .slick-slide{margin:0 6px} .header-title{font-size:24px;margin:0;padding:0;text-align:center} .list-product .slick-dots li button,.list-news .slick-dots li button,.box-top-slider .slick-dots li button,.box-ref .slick-dots li button{background:#ffffff80} .no-Slider.box-product-container .list-product{gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))} .no-Slider .list-product .product-item{max-width:unset;width:100%;margin:0 6px;} .slide-product-slick.list-product .product-item{margin:0 6px} .no-Slider .list-product .product-item .info-item{display:flex;flex-direction:column;gap:12px} .list-product .product-item a.img{display:block;margin:0 auto} .list-product .product-item a.img img{max-width:180px;max-height:180px} .list-product .product-item h3{flex-grow:unset;text-align:center} .list-product .product-item h3 a{color:var(--blackText);font-size:12px;font-weight:600} .list-product .product-item .price{padding:0 0;font-size:15px;display:flex;justify-content:space-around;justify-items:stretch;flex-direction:column;gap:10px} .list-product .product-item .price span{display:flex;justify-content:center} .list-product .product-item .price span span{font-size:11px;background:#FD475A;color:white;border-radius:5px;padding:2px 4px;margin-left:8px;font-weight:600} .list-product .product-item .price strong{color:var(--redText);line-height:18px} .list-product .product-item .price strike{font-size:13px;line-height:18px;color:#C9C9C9} .apple-button{display:flex;justify-content:space-between;flex-wrap:wrap;line-height:33px;width:100%} .apple-button span:first-child a{color:#fff} .apple-button span:first-child{background:#009981;border-radius:24px;padding:0 15px;text-align:center;text-transform:uppercase} .apple-button span:last-child a{text-align:center;text-transform:uppercase;color:#009981;font-weight:600;display:flex;align-items:center;gap:4px} .box-grid-container{display:grid;grid-gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))} .box-ref{padding:unset;border-radius:unset;margin-top:unset} .box-ref .box-ref-header{padding:12px 12px 0 12px;display:flex;flex-direction:column;gap:12px} .box-ref .box-ref-header .head{font-size:15px;font-weight:600} .display-box .box-image img{max-width:100%;display:block} .box-ref .slide-product-slick{padding-bottom:30px;overflow:hidden} .box-ref .v5-list-items .v5-item{position:relative;margin:0 6px} .box-ref .v5-list-items .slick-slide{position:relative;margin:0 6px} .box-ref .v5-list-items .v5-item .last-price{position:absolute;top:5px;right:5px;background:#FF0200;padding:4px;display:flex} .box-ref .v5-list-items .v5-item .last-price:before{content:" ";width:8px;height:8px;background:#fff;border-radius:16px;margin:auto 5px auto 0} .box-ref .v5-list-items .v5-item .last-price .bg{background:#fff;padding:3px 8px;border-radius:6px;display:flex;flex-direction:column;justify-content:center;justify-items:center} .box-ref .v5-list-items .v5-item .last-price .bg strong{font-size:9px} .box-ref .v5-list-items .v5-item .last-price .bg label{font-size:10px;margin-top:-2px;font-weight:bold} .box-ref .v5-list-items .v5-item .last-price{border-radius:4px;background:#fb706f} .box-ref .v5-list-items .v5-item .cover{position:absolute;width:95%;top:105px;text-align:center} .box-ref .v5-list-items .v5-item h3{padding:0;margin:0 0 0 0;font-size:15px} .box-ref .v5-list-items .v5-item .price-offer{margin-bottom:10px;background:#FD475A;padding:4px 8px;border-radius:5px;color:#fff;text-align:center;display:flex;flex-direction:column} .box-ref .v5-list-items .v5-item .price-offer label{font-size:11px;font-weight:500;display:block;margin-bottom:5px} .box-ref .v5-list-items .v5-item .price-offer strong{font-size:15px} .box-ref .v5-list-items .v5-item .price-tradein{margin-bottom:10px;background:#DBF9EB;padding:4px 8px;border-radius:5px;color:#009981;text-align:center;display:flex;flex-direction:column} .box-ref .v5-list-items .v5-item .price-tradein label{font-size:11px;font-style:normal;font-weight:500;display:block;margin-bottom:5px} .box-ref .v5-list-items .v5-item .price-tradein strong{font-size:15px} .box-ref .v5-list-items .v5-item{background:#fff;border-radius:6px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;justify-items:start;border:1px solid #ededed;gap:12px} .box-ref .v5-list-items .v5-item .info-item{display:flex;flex-direction:column;gap:12px} .box-ref .v5-list-items .v5-item a.img{display:block;margin:0 auto} .box-ref .v5-list-items .v5-item a.img img{max-width:180px;max-height:180px} .box-ref .v5-list-items .v5-item h3{flex-grow:unset;text-align:center} .box-ref .v5-list-items .v5-item h3 a{color:var(--blackText);font-size:15px;font-weight:600} .box-ref .v5-list-items .v5-item .price{padding:0 0;font-size:15px;display:flex;justify-content:start;justify-items:start;gap:10px} .box-ref .v5-list-items .v5-item .price span{display:flex;justify-content:center} .box-ref .v5-list-items .v5-item .price span span{font-size:11px;background:#FD475A;color:white;border-radius:5px;padding:2px 4px;margin-left:8px;font-weight:600} .box-ref .v5-list-items .v5-item .price strong{color:#1d2c53;line-height:18px;font-size:16px} .box-ref .v5-list-items .v5-item .price strike{font-size:13px;line-height:18px;color:#C9C9C9} .box-ref .v5-list-items .v5-item .specs{background:var(--ligtWhiteGrayBg);border-radius:5px;padding:8px 12px 2px 12px;margin-bottom:10px} .box-ref .v5-list-items .v5-item .specs ul{list-style:none;padding:0;margin:0} .box-ref .v5-list-items .v5-item .specs ul li{padding-bottom:6px;display:flex;color:#191919;font-size:12px} .box-ref .v5-list-items .v5-item .specs ul li label{margin-right:8px;display:flex;flex-direction:column;align-items:flex-start} .box-ref .v5-list-items .v5-item .specs ul li label.icon{font-size:14px} .box-ref .v5-list-items .v5-item .specs ul li div{flex-grow:3;display:flex;flex-direction:column;align-items:flex-start} .box-ref .v5-list-items .v5-item .specs ul li div span{display:block;line-height:18px} .box-ref .v5-list-items .v5-item .promotion{background:#FFDFD4;padding:8px 12px;border-radius:6px;color:#FC521D;text-align:center;font-size:12px;display:flex;justify-content:center;justify-items:center} .box-ref .v5-list-items .v5-item .promotion i{font-size:18px;margin-right:5px} .box-ref .v5-list-items .v5-item .promotion strong{line-height:18px} .box-ref .v5-list-items .v5-item .note{background:#F3F3F3;padding:4px 8px;border-radius:5px;text-align:center;margin-top:10px} .box-ref .v5-list-items .v5-item .quick-buy{padding:10px 0} .box-ref .v5-list-items .v5-item .quick-buy a{background:linear-gradient(180deg,#E33648 0%,#C72433 100%);color:#fff;padding:0 16px;border-radius:4px;line-height:36px} .box-ref .v5-list-items .v5-item .quick-buy a{display:flex;justify-content:center;justify-items:center} .box-ref .v5-list-items .v5-item .quick-buy a i{font-size:17px;margin-right:5px;line-height:36px} .box-ref .v5-list-items .v5-item .quick-buy a:hover{background:linear-gradient(180deg,#E33648 100%,#C72433 0%)} .box-ref .v5-item .promotion-list{margin-top:12px} .fls-price{padding:8px;border-radius:5px;gap:8px;display:flex;flex-direction:column;background:#D42D01;width:calc(100% - 16px)} .fls-price .bg{gap:8px;display:flex;flex-direction:column} .fls-price span{font-weight:600;line-height:150%;letter-spacing:0;color:#FEE57E} .fls-price label{color:#FFFFFF;font-weight:700;font-size:20px;line-height:150%;letter-spacing:0;text-align:center} /*timeline*/ /*.time-title{font-size:32px;text-align:center;margin:28px 0 32px 0} .timeline{position:relative;height:50px;margin-bottom:100px} .progress-bar{position:absolute;height:10px;background:#ddd;margin-bottom:20px;width:100%;top:50%} .current-time{height:100%;background:#B64400;width:0;transition:width 1s ease} .event{position:relative;display:flex;flex-direction:column;align-items:center;border-left:2px solid transparent;transition:border-color 1s ease} .circle{width:40px;height:40px;background-color:#3498db;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:22px;color:#191919;background:linear-gradient(222deg,#ADADAD 20%,#FFFFFF 101%);border:3px solid #757575} .description{font-size:16px;font-weight:bold;transition:opacity 0.3s ease;white-space:nowrap} .event.active .circle{background:linear-gradient(222deg,#E5CFC2 20%,#FFFFFF 101%);border:3px solid #B64400} .event.active .time-info{opacity:1;color:#B64400} .info-timeline{display:flex} .event{text-align:center;position:absolute;border-radius:50%;top:80%;transform:translateY(-50%);text-align:center;color:#fff;display:flex;justify-content:center;align-items:center;gap:8px} .event .time-info{display:flex;flex-direction:column;gap:8px;color:black} .date{font-size:18px} .title-event p{position:absolute;font-size:15px;font-weight:bold;color:#757575;bottom:0} .event1{left:28%} .event2{left:65%} .event3{left:91%} #event1{left:10%} #event2{left:50%;transform:translateX(-50%) translateY(-50%)} #event3{left:90%;transform:translateX(-100%) translateY(-50%)} .progress-bar .current-time{border-radius:4px 0 0 4px} */ /* ===== "Các mốc sự kiện" — Figma LDP-iPhone-2026 node 25:3028 ===== */ .event-timeline-section{background:linear-gradient(82.57deg,#e05161 0%,#7a2c35 99.85%)!important;box-shadow:none!important} .event-timeline-section .header-title{color:#fff;font-size:24px;line-height:30px;margin-bottom:0} .event-timeline-section .pd-10px-20px{display:flex;flex-direction:column;gap:20px;padding:0} .timeline{display:flex;align-items:flex-start;position:relative;padding:46px 0 0} .timeline:before{content:"";position:absolute;left:0;right:0;top:88px;height:6px;background:#fff;border-radius:20px;z-index:0} .timeline-item{flex:1 1 0;text-align:center;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:0} .date{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#7f2e37,#e05161);color:#fff;font-weight:600;padding:4px 20px;border-radius:40px;margin:0 0 -20px;font-size:16px;line-height:24px;white-space:nowrap} .desc{box-sizing:border-box;width:100%;background:#fff;color:#424242;border-top:3px solid #e15161;border-radius:12px;padding:24px 12px 12px;font-size:16px;line-height:1.3;font-weight:600} .timline-title{flex:1 1 0;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;bottom:auto;width:auto} .timline-title::after { content: ""; display: block; width: 30px; height: 28px; background: url('../img/timeline-pin.svg') center/contain no-repeat; } .label-top{text-align:center;font-size:16px;color:#fff;font-weight:600;white-space:nowrap} .timline-title:last-child{width:auto;padding:0;white-space:nowrap;left:auto} .w-container-sld{min-width:1164px;width:1164px;margin:0 auto;padding:0;background:unset} /* ===== "Đồng hành cùng iPhone mới của bạn" — Figma LDP-iPhone-2026 node 59:9921 ===== */ /* Khối nằm trên card trắng chung của trang (bỏ nền cam cũ), tiêu đề dùng màu chữ mặc định #191919 */ .combo-together{background:transparent} /* .w-container-sld cố định 1164px (dùng chung với CategoryPage) sẽ tràn khỏi card 1200 đã trừ padding - trong khối này cho fill 100% */ .combo-together .w-container-sld{width:100%;min-width:0} .combo-together .header-title{font-size:24px;line-height:30px;font-weight:700;color:#191919} /* Banner mua kèm: bo góc 12px, ảnh tràn khối */ .combo-together .v5-list-items a img{border-radius:12px} /* Tabs nhóm phụ kiện (LDiPhone18ComboGroup): active nền đỏ, mặc định viền đỏ chữ đỏ */ .Together{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .Together .item{display:flex;align-items:center;justify-content:center;height:54px;padding:14px 20px;border:1px solid #dd5060;border-radius:5px;background:#fff;color:#dd5060;font-size:16px;font-weight:700;line-height:1.5;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease} .Together .item:hover{background:#fdecee;color:#dd5060} .Together .item.active{background:#dd5060;border-color:#dd5060;color:#fff} /* Khung sản phẩm mua kèm (LDiPhone18Combo): viền xám bo 8px như Figma */ .combo-together .ComboGroup-slick .product-item{border:1px solid #eaebf0;border-radius:8px;padding:32px 12px 12px;background:#fff;box-sizing:border-box} /* slick để slide cao tự do -> các khung cao lệch nhau khi sản phẩm không có giá gạch/flash sale. Ép track flex + cho từng cấp stretch bằng flex (height:100% vô tác dụng vì cha không có chiều cao xác định) */ .combo-together .ComboGroup-slick .slick-track{display:flex;align-items:stretch} .combo-together .ComboGroup-slick .slick-slide{height:auto} .combo-together .ComboGroup-slick .slick-slide > div, .combo-together .ComboGroup-slick .item-slick{display:flex;align-self:stretch} .combo-together .ComboGroup-slick .item-slick > .product-item{flex:1 1 auto} /* --- Nội dung card theo Figma node 83:15720: toàn bộ căn trái, ảnh bên trái - cột thông số bên phải --- */ .combo-together .product-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left} .combo-together .product-item .product-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%} .combo-together .product-item .product-media{display:flex;flex-direction:row;align-items:flex-start;gap:8px;width:100%} /* Figma: ảnh 146 + gap 8 + cột thông số 48 = 202 > 200 nội dung card, nên giữ cột thông số đúng 48px và cho khung ảnh co lại phần dư */ .combo-together .product-item .product-image{display:flex;align-items:center;justify-content:center;flex:1 1 auto;width:auto;max-width:146px;min-width:0;height:148px;margin:0} .combo-together .product-item .product-image a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0} .combo-together .product-item .product-image img{width:130px;height:132px;max-width:100%;object-fit:contain} .combo-together .product-item .product-image a{max-width:100%} /* Cột thông số: mỗi mục icon tròn 24px + nhãn 8px, rộng 48px, căn giữa trong cột */ .combo-together .product-item .product-specs{display:flex;flex:0 0 48px;flex-direction:column;align-items:center;gap:8px;min-width:0} .combo-together .product-item .spec-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:48px;max-width:100%} .combo-together .product-item .spec-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:4px;background:#f0f1f3;border-radius:20px;box-sizing:border-box;flex-shrink:0} .combo-together .product-item .spec-icon i{font-size:12px;line-height:1;color:#64748b} .combo-together .product-item .spec-text{font-size:8px;line-height:12px;font-weight:400;color:#64748b;text-align:center;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} /* Figma xếp giá trên - tên sản phẩm dưới; đổi thứ tự bằng flex order để giữ nguyên markup partial dùng chung */ .combo-together .product-item .product-info{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;text-align:left} .combo-together .product-item .product-info .price{order:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;width:100%} .combo-together .product-item .product-info .price strong{font-size:18px;line-height:28px;font-weight:700;color:#d02b26} .combo-together .product-item .product-info .price .sale-off{display:flex;align-items:center;gap:6px} .combo-together .product-item .product-info .price .sale-off strike{font-size:12px;line-height:16px;font-weight:400;color:#c8c8c8} /* Tên sản phẩm: 2 dòng, cắt bằng ellipsis như Figma (h=40px) */ .combo-together .product-item .product-info .title{order:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;height:40px;font-size:14px;line-height:20px;font-weight:500;color:#475263;text-align:left} /* Mũi tên/dots slider: dùng style chung của trang, không custom riêng cho khối này */ .box-product-container,.box-news{background:unset} .pd-top-20px{padding-top:20px} .pd-top-10px{padding-top:10px} .pd-20px{padding:20px} .pd-10px-20px{padding:10px 20px} .pd-20px-0px{padding:20px 0} .pd-10px-0px{padding:10px 0} .slick-initialized .slick-slide{text-align:start;justify-content:center} .mr-top-20px{margin-top:20px} .mr-0-6px{margin:0 6px} /*chọn iphone phù hợp*/ .ip16-fit-table { margin: 10px 0 20px 0 } .ip16-fit-table h2 { font-size: 32px; text-align: center; margin: 18px 0 25px 0 } .ip16-fit-table.explore-more-iphone .container { background-color: #fff; padding: 12px; border-radius: 10px; border: 2px solid #e9c0a2 } .ip16-fit-table .explore-more-list { display: flex; flex-direction: column; gap: 20px; } .ip16-fit-table .explore-more-list .explore-more-item { display: block; } .ip16-fit-table .explore-more-list .explore-more-item img { width: 100%; height: auto; display: block; border-radius: 10px; } .margin-0-6px{ margin:0 6px; } .pj16-item .promotion-list { display: none } .btn-shop-sale { text-align: center; padding: 10px 16px; width: fit-content; margin: auto; background: #D0764A; font-weight: 500; border-radius: 26px; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; font-size: 16px; cursor: pointer; } .btn-shop-sale:hover { background: #9e4215; } .status-bar { display: flex; justify-content: center; justify-items: center; margin-bottom: 35px; } .status-bar-container { display: inline-block; } .status-bar .steps { display: flex; justify-content: center; justify-items: center; position: relative; margin: 0 120px; } .status-bar .steps .border { border-top: 3px solid #C9C9C9; position: absolute; top: 50%; width: 100%; } .status-bar .steps .item { z-index: 9999; background: #fff; margin-right: 140px; display: flex; flex-direction: column; justify-content: center; justify-items: center; color: #C9C9C9; } .status-bar .steps .item:last-child { margin-right: 0; } .status-bar .steps .item i { font-size: 25px; height: 25px; width: 25px; margin: 0 auto; padding: 10px; border-radius: 28px; border: 1px solid #C9C9C9; display: block; margin-bottom: 10px; } .status-bar .steps .item label { font-size: 13px; font-weight: bold; } .status-bar .steps .active { color: #009981; } .status-bar .steps .active i { border: 1px solid #009981; } .select-product { } .select-product .vip-normal { display: flex; justify-content: center; justify-items: center; margin-bottom: 20px; } .select-product .vip-normal a, .select-product .vip-normal a:link, .select-product .vip-normal a:visited { font-size: 15px; font-weight: bold; color: #191919; display: block; padding: 12px 65px; margin: 0 10px; text-decoration: none; } .select-product .vip-normal a.current { background: #009981; border-radius: 10px; color: #fff; } .select-product .vip-normal a i { font-size: 13px; margin-right: 10px; } .select-product .order-infomation { border: 1px solid #C9C9C9; border-radius: 10px; padding: 20px; display: flex; margin-bottom: 20px; box-shadow: none; } .select-product .order-infomation .image { padding: 0 20px; display: flex; flex-direction: column; justify-content: center; } .select-product .order-infomation .text-note { flex-grow: 4; font-size: 15px; } .select-product .order-infomation .text-note .title { font-weight: bold; } .order-infomation .text-note .title, .order-infomation .text-note .verion-color-note, .order-infomation .text-note .vip-note, .order-infomation .text-note p { margin: 0 0 5px 0; padding: 0; } .order-infomation .text-red { color: #FD475A; } .vip-note p.bg-red { padding: 6px 8px; background: #FFDADE; color: #FD475A; border-radius: 5px; } .select-product .select-options { } .select-product .select-options .options { margin-bottom: 30px; } .select-product .select-options .options h3 { font-size: 15px; font-weight: bold; padding: 0; margin: 0 0 20px 0; } .select-product .select-options .options .lists { display: flex; } .select-product .select-options .options .lists a { cursor: pointer; width: 172px; display: flex; margin-right: 10px; justify-content: center; justify-items: center; border: 1px solid #C9C9C9; border-radius: 10px; } .select-product .select-options .options .lists a label { display: block; padding: 15px 0; font-size: 15px; font-weight: bold; color: #333; cursor: pointer; } .select-product .select-options .options .lists a .image { display: flex; flex-direction: column; justify-content: center; justify-items: center; margin: 0 10px; } .select-product .select-options .options .lists a .image img { height: 30px; } .select-product .select-options .options .lists-colors { flex-wrap: wrap; row-gap: 10px; } .select-product .select-options .options .lists-colors a { justify-items: start; justify-content: start; box-sizing: border-box; width: calc(25% - 7.5px); } .select-product .select-options .options .lists-colors a:nth-child(4n) { margin-right: 0; } .select-product .select-options .options .lists a.current, .select-product .select-options .options .lists a:hover { border: 1px solid #009981; position: relative; } .select-product .select-options .options .lists a i { position: absolute; display: none; bottom: 0; right: 0; background: #009981; color: #fff; border-radius: 10px 0 6px 0; padding: 4px 10px; font-size: 8px; } .select-product .select-options .options .lists a.current i, .select-product .select-options .options .lists a:hover i { display: block; } form.ip15 .submit { display: flex; justify-content: center; justify-items: center; margin-bottom: 15px; } /* màu/bo góc của nút chuyển xuống khối "Nút submit / xác nhận" phía dưới (dùng chung với .submit a.final) */ form.ip15 .submit button { outline: none; border: none; } .form-user label > input[type="checkbox"] { display: none; } .form-user label > input[type="checkbox"] + *::before { content: ""; display: inline-block; vertical-align: bottom; width: 1rem; height: 1rem; margin-right: 0.3rem; border-radius: 10%; border-style: solid; border-width: 0.1rem; border-color: red; flex-shrink: 0; } .form-user label > input[type="checkbox"]:checked + * { color: teal; } .form-user label > input[type="checkbox"]:checked + *::before { content: "✓"; color: white; text-align: center; background: teal; border-color: teal; } .form-user label > input[type="checkbox"] + * { display: inline-flex; padding: 5px 0; } .custom-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: .6em; background-position: calc(100% - 1.3em) center; background-repeat: no-repeat; } .custom-select select::-ms-expand { display: none; } .form-user { font-size: 15px; } .form-user h3 { font-size: 15px; font-weight: bold; margin: 0 0 20px 0; padding: 0 } .form-user h4 { font-size: 15px; font-weight: bold; margin: 0 0 8px 0; padding: 0 } .form-user .row { margin-bottom: 20px; } .form-user .row2col { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 10px; } .form-user .form-control { display: flex; padding: unset; border: unset; } .control-icon { display: flex; width: 100%; } .control-icon i { display: block; font-size: 20px; margin: 0 auto; border: 1px solid #C9C9C9; border-right: none; border-radius: 5px 0 0 5px; padding: 8px 0 8px 8px; color: #999; } .form-user .form-control .control-icon input[type=tel], .form-user .form-control .control-icon input[type=text], .form-user .form-control .control-icon input[type=email], .form-user .form-control .control-icon select { border-left: none; border-radius: 0 5px 5px 0; flex-grow: 5; padding-left: 8px; } .form-user .form-control .err { border-color: #FD475A !important; color: #FD475A !important; background: #FFDADE; } .form-user .form-control ::placeholder { color: #C9C9C9; } .form-user .form-control input[type=tel], .form-user .form-control input[type=text], .form-user .form-control input[type=email], .form-user .form-control select { padding: 12px; border-radius: 5px; border: 1px solid #C9C9C9; color: #191919; flex-grow: 4; outline: none; } .form-user .form-radio { display: flex; } .form-user .form-radio .item { margin-right: 40px; } .form-user .form-radio span.label { font-weight: bold; display: block; padding: 2px 0; } section.success { margin-bottom: 20px; } section.success .text { border: 1px solid #c9c9c9; border-radius: 10px; padding: 20px; font-size: 15px; } /* ===== Popup "thành công" — Figma node 38:4080: icon + tiêu đề gradient, giữ nguyên nội dung recap bên dưới ===== */ section.success .text .success-icon{display:block;width:80px;height:auto;margin:0 auto 12px} section.success .text h1 { text-align: center; font-size: 24px; font-weight: 700; background: linear-gradient(90deg,#7f2e37 0%,#e55363 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== Nút submit / xác nhận (popup đăng ký-đặt trước-đặt hàng) — Figma node 99:25620 ===== */ form.ip15 .submit button, .submit a.final { background: linear-gradient(90deg,#7f2e37 0%,#e05161 100%); padding: 14px 40px; color: #fff !important; font-size: 16px; font-weight: bold; border-radius: 40px; } form.ip15 .submit button:hover, .submit a.final:hover { background: linear-gradient(90deg,#7f2e37 0%,#e05161 100%); opacity: .92; } .table > :not(:first-child) { border-top: 0 } strong { font-weight: 600 !important; } .trade-in {margin:20px 0} .trade-in h2 {font-size: 30px;text-align: center;margin: 28px 0 15px 0;} .slider-tradein {margin-right:-10px;} .trade-in .item {display:block;border:2px solid #E9C0A2; border-radius:10px; margin:0 6px; padding:10px 10px 0 10px; text-align:center; background-image: linear-gradient(#E5CFC2, #fff);} .trade-in .item h4 {font-size:24px; font-weight:600; margin:0; padding:0; white-space:nowrap;} .trade-in .item h4 i {font-size:24px;} .trade-in .item .row {padding-top:10px; display:flex; flex-direction:column; text-align:center;} .trade-in .item .row label {font-size:13px;} .trade-in .item .row strong {font-size:24px;} .trade-in .item .row-bg { margin:15px 0; background:#E9C0A2; padding:6px; border-radius:5px; } .trade-in .item a.btn-tradein {position:relative; height:110px; display:flex; overflow:hidden; justify-content:center; justify-items:center; cursor:pointer;} .trade-in .item a.btn-tradein img {position:absolute;} .trade-in .item a.btn-tradein label {position:absolute; cursor:pointer; bottom:0; display:block; padding:6px 20px; background:#E9C0A2; border-radius:5px 5px 0 0; text-transform:uppercase; color:#191919; font-weight:700; font-size:13px;} /*Chuyên trang*/ .page-content { font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; font-size: 14px; } .page-content a, .page-content a * { color: #333; } .page-content a:hover { color: #009981 } .page-content p { line-height: 1.5; text-align: justify } .page-content h2 { font-size: 20px; } .page-content h3 { font-size: 18px; } .page-content h4 { font-size: 16px; } .page-content h5 { font-size: 15px; } .page-content .table-content-border { border-collapse: collapse; border: 1px #ccc solid; width: 100%; } .page-content .table-content-border tr, .page-content .table-content-border th, .page-content .table-content-border td { border: 1px #ccc solid; } .page-content .table-content-border td, .page-content .table-content-border th { padding: 8px 10px; } .page-content .table-content-border ul { margin: 0; padding: 4px 0 4px 15px; } /* ===== "Giải đáp nhanh cùng Hoàng Hà Mobile" (QnA) — Figma LDP-iPhone-2026 node 145:26358 ===== */ .Product-QnA{background:transparent;border-radius:0;margin:0;display:flex;flex-direction:column;gap:20px;counter-reset:qna} .Product-QnA .head{background:none;border-radius:0;padding:0;margin:0;justify-content:center;text-align:center;text-transform:uppercase;font-size:20px;line-height:28px;font-weight:700;color:#424242;gap:13px} .Product-QnA .head img{width:30px;height:auto} .Product-QnA .QnAList{border:1px solid #eaebf0;border-radius:8px;background:#fafafb;padding:12px;margin-bottom:0} .Product-QnA ul li{background:transparent;border-radius:0;padding:0;margin-bottom:0;cursor:pointer} .Product-QnA ul .question-QnA{counter-increment:qna} .Product-QnA ul .question-QnA:hover{background:transparent;color:inherit} .Product-QnA ul .question-QnA:hover a span{color:inherit} .Product-QnA ul li a,.Product-QnA ul li a:link,.Product-QnA ul li a:visited{color:#424242;align-items:center;gap:12px;text-decoration:none} .Product-QnA ul li a span{font-weight:600;font-size:16px;line-height:24px;margin:0} .Product-QnA ul li a span:before{content:counter(qna)". "} .Product-QnA ul li a:after{content:"+";font-family:inherit;width:24px;height:24px;line-height:24px;border-radius:50%;background:rgba(0,153,129,.15);color:#009981;font-size:16px;font-weight:700;text-align:center;flex-shrink:0;margin-left:0} .Product-QnA ul li:hover a:after{color:#009981} .Product-QnA ul .question-QnA:has(+ .answer-QnA.active) a:after{content:"−"} .Product-QnA ul li:last-child{border:none;background:transparent;padding:0;text-align:left} .Product-QnA ul li:last-child span{font-size:16px;line-height:22px;color:#424242} .Product-QnA .answer-QnA.active{margin-top:12px} /* CSS gốc của slick không được nạp trên landing này - không file CSS nào khai báo .slick-list{overflow:hidden}. Các slider khác chỉ hiện 1 slide nên track vừa khung, không lộ lỗi; riêng slider mua kèm nhiều slide thì track (rộng gấp nhiều lần khung) tràn ra ngoài, đẩy rộng cả trang. Clip lại đúng hành vi chuẩn của slick. */ .combo-together .ComboGroup-slick .slick-list{overflow:hidden} /* ===== "Định giá máy cũ. Lên đời iPhone mới" — Figma LDP-iPhone-2026 node 59:14874 ===== */ .trade-in h2{font-size:24px;line-height:30px;font-weight:700;color:#191919;text-align:center;margin:0} /* Hàng 3 icon (Định giá nhanh / Thu cũ / Lên đời) - Figma xuất sẵn 1 ảnh 388x125 */ .trade-in .trade-in-features{display:flex;justify-content:center;margin:8px 0 20px} .trade-in .trade-in-features img{width:388px;max-width:100%;height:auto;display:block} /* Card thu cũ: nền gradient đen -> đỏ, viền đỏ, chữ trắng (thay bộ màu kem cũ) */ .trade-in .item{border:2px solid #dd5060;border-radius:12px;background:linear-gradient(0deg,#191919 0%,#b2414d 100%);padding:8px 12px 0;color:#fff} .trade-in .item h4{font-size:16px;line-height:28px;font-weight:700;color:#fff;white-space:nowrap} .trade-in .item h4 i{font-size:16px} .trade-in .item .row{padding-top:4px;gap:0} .trade-in .item .row label{font-size:12px;line-height:24px;font-weight:500;color:#fff} .trade-in .item .row strong{font-size:20px;line-height:24px;font-weight:700;color:#fff} .trade-in .item .row-bg{margin:8px 0 0;background:#dd5060;border-radius:8px;padding:4px} .trade-in .item .row-bg label,.trade-in .item .row-bg strong{color:#fff} .trade-in .item a.btn-tradein label{background:#dd5060;border-radius:8px 8px 0 0;padding:2px 12px;font-size:14px;line-height:24px;font-weight:700;color:#fff;text-transform:uppercase} /* ===== "Thu cũ đổi mới các loại máy" (nội dung nạp AJAX từ /Landing/LDGetRenew/Index) ===== */ .renew-exchange{margin-top:32px} .renew-exchange > .header-title{font-size:24px;line-height:30px;font-weight:700;color:#191919;text-align:center;margin:0 0 20px} /* ô tìm kiếm theo Figma: rộng 650, cao 54, viền #eaebf0, bo 8, đổ bóng nhẹ */ .renew-exchange .renew-search{display:flex;justify-content:center} .renew-exchange .renew-search .input{display:flex;align-items:center;gap:8px;width:650px;max-width:100%;height:54px;padding:12px 16px;box-sizing:border-box;background:#fff;border:1px solid #eaebf0;border-radius:8px;box-shadow:0 2px 2px rgba(0,0,0,.1)} .renew-exchange .renew-search .input i{font-size:20px;color:#64748b} .renew-exchange .renew-search .input input{flex:1 1 0;min-width:0;border:none;outline:none;font-size:14px;line-height:20px;color:#191919;background:transparent} .renew-exchange .renew-search .input input::placeholder{color:#64748b} /* Nút "Định giá điện thoại của bạn" - Figma không có nút này trong block, giữ lại làm CTA nhưng đưa về tông đỏ cho đồng bộ */ .trade-in .btn-shop-sale{background:#dd5060;border-radius:40px;font-weight:700} /* Lưới sản phẩm thu cũ: StyleRenew.min.css (nạp kèm response AJAX) chỉ style .product-card, KHÔNG khai báo .renew-product-grids - mỗi landing phải tự định nghĩa, thiếu thì card xếp block full width (vỡ form). */ .renew-exchange .renew-product-grids{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:20px} .renew-exchange .product-card{border:1px solid #eaebf0;border-radius:8px;padding:12px;gap:8px;height:100%;box-sizing:border-box} .renew-exchange .product-image-box{display:flex;align-items:center;justify-content:center} .renew-exchange .product-img-wrapper{width:100%} .renew-exchange .product-img-wrapper img{width:100%;height:150px;object-fit:contain;display:block} /* Figma xếp: giá thu cũ -> tên sản phẩm -> nút; markup gốc là tên -> giá -> nút nên đảo bằng flex order */ .renew-exchange .product-info-box{display:flex;flex-direction:column;align-items:stretch;gap:8px} .renew-exchange .product-price-row{order:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;line-height:18px;color:#64748b} .renew-exchange .product-price-row .price-now{font-size:18px;line-height:28px;font-weight:700;color:#d02b26} .renew-exchange .product-name{order:2;margin:0;font-size:14px;line-height:20px;font-weight:500;color:#475263;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:40px} .renew-exchange .product-subsidy{order:3;font-size:12px;line-height:18px;color:#64748b;display:flex;gap:4px} .renew-exchange .product-btn{order:4;background:#dd5060;color:#fff;border:0;border-radius:8px;height:38px;font-size:13px;font-weight:700;width:100%} .renew-exchange .product-btn:hover{background:#c8404f} /* Card có/không có dòng "Trợ giá đến" -> nút lệch nhau; cho info-box giãn hết và đẩy nút xuống đáy */ .renew-exchange .product-info-box{flex:1 1 auto} .renew-exchange .product-btn{margin-top:auto} /* --- Khớp Figma node 59:14874: tab danh mục kiểu gạch chân, chip sắp xếp, bỏ phần Figma không có --- */ /* Tabs: partial render