@charset "UTF-8"; /* ========================================================================== Trade-in ("Thu cũ lên đời") block for modules/iphone15 Layout/behaviour cloned from modules/autumn (points.css) so that the autumn module itself is never modified. Compiled with: sass modules/iphone15/assets/css/tradein.scss modules/iphone15/assets/css/tradein.css --source-map ========================================================================== */ /* ---- grid helper (5-column row, same as autumn's col-md-2dot4) ---- */ .col-md-2dot4 { position: relative; width: 100%; min-height: 1px; padding-right: 5px; padding-left: 5px; } @media (min-width: 768px) { .col-md-2dot4 { float: left; flex: 0 0 20%; max-width: 20%; } } @media (max-width: 767px) { .col-md-2dot4.col-xs-6 { width: 50%; float: left; } } .block-tradein .left { margin-bottom: 20px; } /* ---- teaser bar (image 1.jpg) — centered on screen ---- */ .tradein-teaser { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #e9e9ea; border-radius: 999px; padding: 8px 8px 8px 10px; margin: 15px auto; cursor: pointer; max-width: 400px; width: 100%; } .tradein-teaser__left { display: flex; align-items: center; gap: 10px; } .tradein-teaser__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); } .tradein-teaser__text { font-size: 15px; font-weight: bold; color: #222; } .tradein-teaser__btn { background-color: #1e8e04; color: #fff; border: none; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: bold; white-space: nowrap; cursor: pointer; } .tradein-teaser__btn:hover { background-color: #17700a; } @media (max-width: 767px) { .tradein-teaser { max-width: 100%; } .tradein-teaser__text { font-size: 13px; } .tradein-teaser__btn { padding: 8px 12px; font-size: 12px; } } /* ---- categories/search/grid modal — big & wide like the autumn page, always above the site's fixed header ---- */ .tradein-modal { z-index: 1111112; } .tradein-modal .modal-dialog { width: 1140px; max-width: 96%; margin: 150px auto 30px; } .tradein-modal .modal-content { border-radius: 16px; overflow: hidden; } .tradein-modal .modal-header { border-bottom: 1px solid #eee; } .tradein-modal .modal-title { font-size: 18px; font-weight: bold; text-transform: uppercase; color: #1e8e04; margin: 0; } .tradein-modal .modal-body { max-height: calc(100vh - 230px); overflow-y: auto; padding: 20px 25px 30px; } @media (max-width: 767px) { .tradein-modal .modal-dialog { width: 100%; max-width: 100%; margin: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .tradein-modal .modal-content { height: 100%; border-radius: 0; display: flex; flex-direction: column; } .tradein-modal .modal-body { max-height: none; flex: 1; padding: 20px 12px 10px; } } /* Bootstrap's shared backdrop must stay at the very bottom of the stack — the modal itself (re-parented to , see tradein.js) already carries its own very high z-index, so the backdrop only needs to sit under everything positioned, never above the modal content. */ .modal-backdrop { z-index: 0; } .tradein-loading { padding: 40px 0; color: #999; text-align: center; } .search_autumn { width: 400px; max-width: 100%; margin: auto; position: relative; } .search_autumn .input_name { width: 100%; height: 40px; padding: 10px 15px; border: 1px solid #d4d4d4; border-radius: 3px; } .search_autumn .icon_ { position: absolute; top: 11px; right: 12px; cursor: pointer; } .list_prd { margin-top: 20px; } .list_prd .nav1 { display: flex; justify-content: center; border-bottom: unset; margin-bottom: 20px; flex-wrap: wrap; width: 100%; padding-left: 0; list-style: none; } .list_prd .nav1 > li { margin: 6px; } .list_prd .nav1 > li > a { display: inline-block; padding: 9px 18px; font-weight: bold; color: #1e8e04; font-size: 13px; border: 1px solid #1e8e04; border-radius: 3px; cursor: pointer; } .list_prd .nav1 > li.active > a, .list_prd .nav1 > li > a:hover { color: #fff !important; background-color: #1e8e04 !important; border: 1px solid #1e8e04 !important; } @media (max-width: 767px) { .list_prd .nav1 { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 15px; } .list_prd .nav1 > li { margin: 3px; flex: 0 0 auto; } .list_prd .nav1 > li > a { padding: 6px 12px; font-size: 11px; white-space: nowrap; } } .row_autumn { margin-right: -5px; margin-left: -5px; display: flex; flex-wrap: wrap; } .item_prd { padding: 15px; border: 1px solid #dadada; border-radius: 4px; margin-bottom: 10px; height: calc(100% - 10px); } .item_prd a { display: block; color: #000; } .item_prd .box_img { position: relative; } .item_prd .box_img .sticky img { margin: auto; } .item_prd .text_subsidy { display: block; font-size: 12px; line-height: 1.5; padding: 5px; border: 1px solid #e5e7eb; background: #f3f4f6; border-radius: 5px; margin-bottom: 8px; } .item_prd h3 { font-size: 14px; line-height: 20px; color: #000; margin-top: 15px; margin-bottom: 10px; min-height: 40px; } .item_prd p { margin-bottom: 0; } .item_prd p span { display: inline-block; font-size: 16px; font-weight: bold; color: #e42014; } @media (max-width: 767px) { .item_prd { padding: 10px 8px; } .item_prd p { font-size: 12px; } .item_prd p span { font-size: 14px; } } .more_view { text-align: center; margin-top: 10px; margin-bottom: 10px; } .more_view a { display: inline-block; color: #1e8e04; font-weight: bold; cursor: pointer; } /* ---- item detail popup (site-wide #wrapper-popup-3 / .full2 containers) ---- Must stack ABOVE .tradein-modal (z-index: 1111112): the item detail popup opens from inside the category/grid modal, so it needs to win that race. */ .full2 { z-index: 1111113; overflow-y: scroll; } .wrapper-popup-3 { width: 900px; position: fixed; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 6%; display: none; background: #fff; z-index: 1111114; border-radius: 16px; overflow: hidden; } @media (max-width: 900px) { .wrapper-popup-3 { width: 100%; height: 100%; top: 0; border-radius: 0; } } .tradein-detail.all { height: 90vh; overflow-y: auto; padding: 20px; } .tradein-detail #close-cart, .tradein-detail .tradein-close { float: right; margin-top: -10px; margin-right: -10px; font-size: 26px; color: #999; line-height: 1; text-decoration: none; } .tradein-detail .title_ab { font-size: 20px; line-height: 24px; color: #1e8e04; text-transform: uppercase; font-weight: bold; margin-bottom: 20px; margin-top: 0; } .tradein-detail .body_a .left_body { width: 160px; float: left; margin-right: 0; } .tradein-detail .body_a .right_body { width: calc(100% - 160px); float: left; } .tradein-detail .body_a .right_body .name_p { line-height: 30px; } .tradein-detail .body_a .right_body .name_p span { display: inline-block; font-weight: bold; } .tradein-detail .body_a .right_body .ngoaihinh, .tradein-detail .body_a .right_body .ngoaihinh1 { font-weight: bold; } .tradein-detail .body_a .right_body .ngoaihinh1 { margin-top: 20px; } .tradein-detail .body_a .right_body .list_autm .item_au { padding: 12px; font-weight: bold; cursor: pointer; border: 1px solid #dadada; border-radius: 2px; } .tradein-detail .body_a .right_body .list_autm .item_au:hover { border: 1px solid #1e8e04; } .tradein-detail .body_a .right_body .list_autm .item_au span { font-weight: normal; } .tradein-detail .body_a .right_body .list_autm .active { border: 1px solid #1e8e04; } .tradein-detail .body_a .right_body .list_combo { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } @media (max-width: 767px) { .tradein-detail .body_a .right_body .list_combo { grid-template-columns: 1fr; } } .tradein-detail .body_a .right_body .list_combo .item_combo { padding: 12px; border: 1px solid #dadada; line-height: 20px; cursor: pointer; border-radius: 2px; } .tradein-detail .body_a .right_body .list_combo .item_combo .name_combo { margin-bottom: 12px; display: block; } .tradein-detail .body_a .right_body .list_combo .item_combo .price_combo { margin-bottom: 0; color: #e42014; } .tradein-detail .body_a .right_body .list_combo .active { border: 1px solid #1e8e04; } .tradein-detail .body_a .right_body .price_expected { line-height: 24px; font-weight: bold; margin-top: 8px; margin-bottom: 20px; } .tradein-detail .body_a .right_body .price_expected .price_10 { font-size: 18px; color: #e42014; margin-left: 10px; } .tradein-detail .body_a .right_body .note_au { margin-bottom: 10px; font-size: 13px; color: #777; } @media (max-width: 767px) { .tradein-detail .body_a .left_body { float: unset; width: 100%; } .tradein-detail .body_a .left_body img { margin: auto; display: block; max-width: 160px; } .tradein-detail .body_a .right_body { float: unset; width: 100%; } } @media (max-width: 767px) { .tradein-detail.all { height: 100vh; } } .tradein-detail .sbm { margin-bottom: 0; } .tradein-detail .sbm a { display: inline-block; font-size: 14px; line-height: 26px; text-transform: uppercase; font-weight: bold; padding: 10px 30px; color: #fff; background-color: #1e8e04; border-radius: 999px; } #style-44::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #f5f5f5; } #style-44::-webkit-scrollbar { width: 5px; background-color: #1e8e04; } #style-44::-webkit-scrollbar-thumb { background-color: #1e8e04; border: 2px solid #1e8e04; } /* ---- trade-in products slider (image 2.jpg) ---- */ .tradein-slider-section { margin: 25px 0; padding: 0 10px; position: relative; /* circular prev/next arrows — drawn with CSS borders instead of the slick icon font, so the chevron always renders the same regardless of font loading, and so it's easy to size up to match 2.jpg. */ } .tradein-slider-section .slick-prev, .tradein-slider-section .slick-next { width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); z-index: 2; } .tradein-slider-section .slick-prev:before, .tradein-slider-section .slick-next:before { display: none; } .tradein-slider-section .slick-prev:hover, .tradein-slider-section .slick-prev:focus, .tradein-slider-section .slick-next:hover, .tradein-slider-section .slick-next:focus { background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); } .tradein-slider-section .slick-prev:after, .tradein-slider-section .slick-next:after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-top: 2.5px solid #555; border-right: 2.5px solid #555; } .tradein-slider-section .slick-prev { left: -24px; } .tradein-slider-section .slick-prev:after { transform: translate(-25%, -50%) rotate(-135deg); } .tradein-slider-section .slick-next { right: -24px; } .tradein-slider-section .slick-next:after { transform: translate(-75%, -50%) rotate(45deg); } .tradein-slider-section { /* dots: small grey circles, active one becomes a wide red pill — matches 2.jpg */ } .tradein-slider-section .slick-dots { position: static; margin-top: 16px; line-height: 0; } .tradein-slider-section .slick-dots li { width: 8px; height: 8px; margin: 0 4px; transition: width 0.2s ease; } .tradein-slider-section .slick-dots li button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #d9d9d9; } .tradein-slider-section .slick-dots li button:before { display: none; } .tradein-slider-section .slick-dots li.slick-active { width: 22px; } .tradein-slider-section .slick-dots li.slick-active button { width: 22px; border-radius: 5px; background: #e42014; } @media (max-width: 767px) { .tradein-slider-section { padding: 0 10px; } .tradein-slider-section .slick-prev, .tradein-slider-section .slick-next { width: 38px; height: 38px; } .tradein-slider-section .slick-prev:after, .tradein-slider-section .slick-next:after { width: 9px; height: 9px; } } .tradein-slider .slick-list { margin: 0 -8px; } .tradein-slider .slick-track { display: flex !important; } .tradein-slider .slick-slide { height: auto; display: flex !important; /* the plain
slick wraps around each slide's markup */ } .tradein-slider .slick-slide > div { width: 100%; display: flex; } .tradein-slide { padding: 0 8px; width: 100%; display: flex; } .tradein-slide .item_prd { display: flex; flex-direction: column; background: #fff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 10px; width: 100%; color: #000; text-align: left; cursor: pointer; } .tradein-slide__img { display: flex; align-items: center; justify-content: center; height: 160px; margin-bottom: 12px; } .tradein-slide__img img { max-height: 100%; max-width: 100%; -o-object-fit: contain; object-fit: contain; margin: auto; } .tradein-slide .sticky { width: 100%; } .tradein-slide .sticky img { margin: auto; } .tradein-slide__name { font-size: 13px; font-weight: bold; line-height: 18px; height: 36px; margin: 0 0 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tradein-slide__price { font-size: 13px; color: #444; margin-bottom: 14px; } .tradein-slide__price span { color: #e42014; font-weight: bold; } .tradein-slide__offset { display: block; text-align: center; background-color: #fff; color: #000; border: 1px solid #1e8e04; font-weight: bold; font-size: 12px; padding: 8px; border-radius: 999px; margin-top: auto; margin-bottom: 8px; } .tradein-slide__cta { display: block; text-align: center; background-color: #1e8e04; color: #fff; font-weight: bold; font-size: 13px; padding: 9px 10px; border-radius: 999px; } /* ---- "Đặt trước ngay" upgrade modal (modal.jpg), opened from the tradein-detail popup's "Đổi ngay" button — same green/red theme as .tradein-detail above ---- */ .upgrade-detail__label { font-weight: bold; margin: 20px 0 10px; } .upgrade-detail__label:first-child { margin-top: 0; } .upgrade-detail__product { display: flex; align-items: center; gap: 15px; padding: 12px; border: 1px solid #dadada; border-radius: 8px; margin-bottom: 10px; } .upgrade-detail__product img { width: 70px; height: 70px; -o-object-fit: contain; object-fit: contain; flex: 0 0 70px; } .upgrade-detail__product-info { flex: 1; } .upgrade-detail__change-old { flex: 0 0 auto; border: 0; border-radius: 6px; background: #fff1f2; color: #d71920; font-weight: bold; padding: 12px 18px; cursor: pointer; } .upgrade-detail__change-old:hover, .upgrade-detail__change-old:focus { background: #ffe4e6; color: #b81218; } .upgrade-detail__name { font-weight: bold; margin-bottom: 6px; } .upgrade-detail__price { color: #e42014; font-weight: bold; margin-bottom: 0; } .upgrade-detail__pills { display: flex; flex-wrap: wrap; gap: 10px; } .upgrade-detail .upgrade-pill { display: inline-block; padding: 10px 18px; border: 1px solid #dadada; border-radius: 999px; font-weight: bold; font-size: 13px; cursor: pointer; } .upgrade-detail .upgrade-pill:hover { border-color: #1e8e04; } .upgrade-detail .upgrade-pill.active { border-color: #1e8e04; color: #1e8e04; background: rgba(30, 142, 4, 0.08); } .upgrade-detail .upgrade-color-pill { width: 36px; height: 36px; padding: 4px; border-radius: 50%; vertical-align: middle; } .upgrade-detail .upgrade-color-pill__swatch { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #e5e5e5; } .upgrade-detail__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #eee; } .upgrade-detail__diff { font-weight: bold; margin-bottom: 0; } .upgrade-detail__diff span { color: #e42014; font-size: 18px; margin-left: 6px; } .upgrade-detail__submit { display: inline-block; padding: 12px 30px; background-color: #1e8e04; color: #fff; font-weight: bold; text-transform: uppercase; border-radius: 999px; cursor: pointer; } .upgrade-detail__submit:hover { background-color: #17700a; color: #fff; } @media (max-width: 767px) { .upgrade-detail__footer { flex-direction: column; align-items: stretch; text-align: center; } .upgrade-detail__submit { text-align: center; } .upgrade-detail__change-old { width: 100%; margin-top: 10px; } } @media (max-width: 767px) { .upgrade-detail__product { flex-wrap: wrap; } .upgrade-detail__product-info { flex: 1 1 calc(100% - 85px); } }/*# sourceMappingURL=tradein.css.map */