#slideImage a { display: block !important; } .row-item-book .glyphicon-heart { padding: 0px; text-align: center; width: 40px; } #mainImageDetail img { width: 100% !important; display: block; margin: auto; } .comment-box > .comment-input { display: none; } /* Banner tai tro FULL ngang man hinh (chi trang thu vien) */ .wrap-banner-full { width:100vw; max-width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; border-radius:0; } .wrap-banner-full .cqb { border-radius:0; } /* Thanh danh muc ngang: dung component MenuBar (Content/MenuBar/MenuBar.css) */ .menubar-wrap { margin-bottom: 24px; } /* ===== CHONG FOUC: an ngay giao dien cu — KHONG dung :has() (trinh duyet Zalo/WebView cu khong ho tro -> giao dien cu hien nguyen) ===== Class .cq-tv-list / .cq-tv-detail gan vao boi script dau (chay truoc khi body paint). */ .cq-tv-list .page-left { display: none !important; } /* sidebar "Danh muc" cu (moi cap long) */ .cq-tv-list .list-item > .page-right { width: 100% !important; flex: 1 1 100% !important; max-width: 100% !important; } .cq-tv-list .title-page-2 { display: none !important; } /* banner LIBRARY cu */ .cq-tv-list .list-item > .sep20, .cq-tv-list .list-item > .sep10 { display: none !important; } /* khoang trong flash */ .cq-tv-list .list-item > .title-page { display: none !important; } /* tieu de trang cu */ .cq-tvhead__sort { visibility: visible !important; } .cq-tv-list .paging-top { display: none; } .cq-plant .title-page, .cq-plant .product-desc .rating, .cq-plant .product-desc .post-by, .cq-plant .content-detail { display: none !important; } /* ===== CQ PLANT DETAIL REDESIGN (scoped .cq-plant) ===== */ .cq-plant { --g:#2e7d32; --g2:#1b5e20; --line:#e6ebe6; --ink:#222; --mut:#6b7a6b; } /* 3 cot: anh 1/3 | thong tin 2/3 */ .cq-plant .item-2 { float:left; box-sizing:border-box; } .cq-plant .item-2:first-child { width:33.333%; padding-right:26px; } .cq-plant .item-2:last-child { width:66.667%; } @media(max-width:900px){ .cq-plant .item-2{ width:100%!important; float:none; padding-right:0!important; } } /* Anh */ .cq-plant #mainImageDetail { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fafcfa; box-shadow:0 6px 22px rgba(20,60,20,.06); } .cq-plant #mainImageDetail img { border-radius:14px; } .cq-plant #slideImage img { border-radius:8px; } /* Ten cay */ .cq-plant .product-desc .title-page { font-size:30px!important; line-height:1.2; font-weight:800; color:var(--g2); text-transform:none; margin-bottom:6px!important; letter-spacing:-.3px; } .cq-plant .product-desc .rating { font-size:13px; color:var(--mut); } .cq-plant .post-by { color:var(--mut); font-size:13px; margin:2px 0 14px; } /* An phan ban hang (cay khong ban) */ .cq-plant .row-size, .cq-plant .product-price, .cq-plant #btnAddCart, .cq-plant .row-item.hide, .cq-plant #compare, .cq-plant .btncompare, .cq-plant .row-item .product-price { display:none!important; } /* An: sao danh gia + "N danh gia", Nguon, nut tim, Pin it/Email (giu luot xem) */ .cq-plant .product-desc .rating > span:first-child, .cq-plant .row-source, .cq-plant .row-item-book, .cq-plant .social { display:none!important; } /* Nguon */ .cq-plant .row-source { font-size:14px; margin:10px 0; } .cq-plant .row-source .t { color:var(--mut); } /* Nut luu */ .cq-plant .row-item-book { margin-top:10px; } .cq-plant .row-item-book .glyphicon-heart { background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--g); height:40px; } /* Thu gon khoang cach doc (an sep thua tu cac hang da an) */ .cq-plant .product-desc .sep10, .cq-plant .product-desc .sep20 { display:none!important; } .cq-plant .product-desc .rel { margin:0!important; } .cq-plant .product-desc { padding-bottom:0!important; } /* Tags -> pill */ .cq-plant .tags { margin:10px 0 2px; } .cq-plant .tags-name { color:var(--mut); font-size:13px; margin-right:6px; } .cq-plant .tag-item { display:inline-block; background:#eef6ee; color:var(--g2); border:1px solid #d6e8d6; border-radius:999px; padding:5px 13px; margin:0 6px 6px 0; font-size:13px; text-decoration:none; transition:.15s; } .cq-plant .tag-item:hover { background:var(--g); color:#fff; border-color:var(--g); } /* Tieu de section */ .cq-plant .title-page { position:relative; font-size:20px; font-weight:800; color:var(--g2); text-transform:none; padding:10px 0 8px; border-bottom:2px solid var(--line); margin:14px 0 14px; } /* Bang THONG TIN CO BAN -> sach dep */ .cq-plant .content-detail table { width:100%!important; border-collapse:collapse; border:0!important; box-shadow:0 3px 14px rgba(20,60,20,.05); border-radius:12px; overflow:hidden; } .cq-plant .content-detail table td { border:1px solid var(--line)!important; padding:11px 14px!important; font-size:14.5px; line-height:1.6; vertical-align:top; text-align:left!important; } .cq-plant .content-detail table td:first-child, .cq-plant .content-detail table td[rowspan] { background:var(--g); color:#fff; font-weight:700; text-align:center!important; width:auto; } .cq-plant .content-detail table td strong { color:var(--g2); } .cq-plant .content-detail table td[rowspan] strong, .cq-plant .content-detail table td:first-child strong { color:#fff!important; } .cq-plant .content-detail table tr:nth-child(even) td:not(:first-child):not([rowspan]) { background:#f7faf7; } .cq-plant .content-detail { overflow-x:auto; } /* Nhan do tin cay */ .cq-plant .cq-trust { display:inline-flex; align-items:center; gap:6px; background:#eaf7ea; color:var(--g2); border:1px solid #cfe8cf; border-radius:999px; padding:5px 13px; font-size:13px; font-weight:600; margin:4px 0 12px; } .cq-plant .cq-trust.verify { background:#fff8e6; color:#9a6b00; border-color:#f0e0b0; } /* Cay lien quan -> card */ .cq-plant .product-item { text-align:center; } .cq-plant .product-item .img img { border-radius:12px; transition:.2s; } .cq-plant .product-item .img:hover img { transform:translateY(-3px); box-shadow:0 8px 20px rgba(20,60,20,.14); } .cq-plant .product-item .name { color:var(--ink); font-weight:600; } .cq-plant .product-item .price, .cq-plant .product-item .rating { display:none; } .cq-plant .title-box span { font-size:20px; font-weight:800; color:var(--g2); } .cq-lienquan-head { display:flex; align-items:center; gap:10px; background:none !important; padding-left:0 !important; } .cq-lienquan-head .cq-lq-logo { width:26px; height:26px; flex:0 0 26px; background:transparent; } /* ===== Thu vien lien quan: carousel 1 hang, 6 cay/hang, nut luot 2 ben ===== */ .cq-lienquan { position: relative; } .cq-lienquan__track { display: block; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 4px 2px; scrollbar-width: none; } .cq-lienquan__track::-webkit-scrollbar { display: none; } /* specificity cao + !important de THANG rule grid cua listing (.list-item .datalist-content) */ .cq-plant .cq-lienquan__track .datalist-content { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 16px; width: max-content; } .cq-lienquan__track .item-3, .cq-lienquan__track .item-4 { flex: 0 0 auto; min-width: 0 !important; max-width: none !important; overflow: visible; margin: 0 !important; padding: 0 !important; float: none !important; } .cq-lienquan__track .home-standard-card { height: auto; } .cq-lienquan__track .inner-item { margin: 0 !important; padding: 0 !important; width: 100% !important; } .cq-lienquan__track .product-item { width: 100% !important; } .cq-lienquan__track .product-item .img { display: block !important; width: 100% !important; } .cq-lienquan__track .product-item .img img { width: 100% !important; height: auto !important; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; } .cq-lienquan__track .product-item .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.3; margin-top: 6px; } .cq-lienquan__nut { position: absolute; top: 42%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(20,60,20,.18); color: #2e7d32; font-size: 18px; line-height: 1; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; } .cq-lienquan__nut:hover { background: #2e7d32; color: #fff; } .cq-lienquan__prev { left: -10px; } .cq-lienquan__next { right: -10px; } /* ===== CHI SO CAY: icon-field 3 cot (thay bang tho) ===== */ .cq-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin: 6px 0 12px; } .cq-spec-group { background: #fafcfa; border: 1px solid #e6ebe6; border-radius: 14px; padding: 15px 18px; } .cq-spec-group__title { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #2e7d32; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #e6ebe6; } .cq-spec-row { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 2px; padding: 9px 0; border-bottom: 1px dashed #eef2ee; } .cq-spec-row:last-child { border-bottom: 0; } .cq-spec-ic { grid-row: span 2; font-size: 17px; line-height: 1.3; } .cq-spec-lb { font-size: 11.5px; font-weight: 700; color: #7a8a7a; text-transform: uppercase; letter-spacing: .02em; } .cq-spec-vl { font-size: 14px; color: #222; line-height: 1.5; } .cq-spec-vl--trong { color: #b7c0b7; font-style: italic; } .cq-spec-tra { display: block; color: #2e7d32; font-weight: 500; margin-top: 2px; } .cq-spec-sach { display: block; color: #b25a00; font-weight: 500; margin-top: 2px; } .cq-spec-row--mota .cq-spec-mota { white-space: pre-line; line-height: 1.6; color: #333; } .cq-spec-mota.cq-mota-cam { color: #b25a00; } .cq-mota-tag { display: inline-block; background: #fff3e0; color: #b25a00; border: 1px solid #f0d5b0; border-radius: 6px; padding: 1px 7px; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; margin-left: 6px; vertical-align: middle; } .cq-specs-note { font-size: 12px; color: #8a978a; line-height: 1.5; margin: 10px 0 4px; padding: 9px 13px; background: #fafcfa; border: 1px solid #eef2ee; border-radius: 8px; } .cq-specs-note b { color: #b25a00; } .cq-note-baocao { color: #c62828; text-decoration: underline; cursor: pointer; } /* Header thu vien dong nhat (eyebrow + ten nhom + chu thich) */ .cq-tvhead { position: relative; margin: 6px 0 20px; } .cq-tvhead__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9aa7a0; margin: 0 0 2px; } .cq-tvhead__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 30px; font-weight: 800; color: #1b5e20; margin: 0 0 12px; text-transform: uppercase; letter-spacing: -.3px; line-height: 1.1; } .cq-tvhead__ic { font-size: 30px; line-height: 1; } .cq-tvhead__count { font-size: 14px; font-weight: 600; color: #8fc45c; text-transform: none; letter-spacing: 0; } .cq-tvhead__note { font-size: 13px; color: #6f7a6f; line-height: 1.6; background: #f6faf3; border: 1px solid #e3efd6; border-left: 3px solid #8fc45c; border-radius: 8px; padding: 11px 15px; margin: 0; } .cq-tvhead__note b { color: #2e7d32; } .cq-tvhead__phanloai { font-size: 12px; color: #97a29a; line-height: 1.5; margin: 7px 0 0; } .cq-tvhead__phanloai b { color: #6f7a6f; } /* O sap xep dua len header, ngang dong eyebrow (goc phai tren) */ .cq-tvhead__sort { position: absolute; top: -2px; right: 0; float: none !important; margin: 0 !important; width: auto !important; display: flex; align-items: center; gap: 6px; } .cq-tvhead__sort > * { float: none !important; margin: 0 !important; } .cq-tvhead__sort .btn-style, .cq-tvhead__sort .glyphicon-plus { display: none !important; } /* Luoi listing = COPY NGUYEN muc thu vien trang chu (V2Home .home-test-row) */ .list-item .datalist-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-flow: dense; gap: 16px; } .list-item .datalist-content > [class*="item-"] { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } .list-item .datalist-content .inner-item { margin: 0 !important; padding: 0 !important; } /* Mobile: ep 2 cot (khong de minmax rot ve 1 cot) */ @media (max-width: 640px) { .cq-plant .cq-lienquan__track .datalist-content { grid-template-columns: none !important; } .list-item .datalist-content { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .list-item .datalist-content .home-standard-card__body { padding: 8px !important; } .list-item .datalist-content .home-standard-card__title { font-size: 13px !important; } } @media (max-width: 767px) { .cq-tvhead__title { font-size: 22px; } .cq-tvhead__ic { font-size: 22px; } /* Trang chi tiet: anh 1 tam full ngang, bo anh nhan doi (zoom lap hang) + anh thua -> het cot trang + thumb noi */ .cq-anh-hang { display: block !important; } .cq-anh-hang > a { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; margin: 0 0 8px !important; display: block !important; } .cq-anh-hang > a img { transform: none !important; } .cq-anh-hang .cq-anh-dup { display: none !important; } .cq-anh-hang > a:nth-of-type(n+3) { display: none !important; } /* toi da 2 anh tren mobile, con lai xem qua gallery */ /* Header: ten gon lai, ten khoa hoc xuong dong; chip tag pill day du duoi ten */ .cq-cay-ten { font-size: 22px; } .cq-cay-sci { font-size: 16px; margin-left: 0; display: block; margin-top: 2px; } .cq-cay-mark { flex: 0 0 46px; width: 46px; height: 46px; } .cq-mark-ico { width: 22px; height: 22px; } .cq-cay-report { font-size: 12px; top: 0; } .cq-cay-tags { margin-top: 10px; } } @media (max-width: 900px) { .cq-specs { grid-template-columns: 1fr; } } /* ===== Layout: anh 1 hang ngang tren - thong tin duoi - 3 bang chi so ===== */ .cq-plant > .list-item:first-child { display: block; } .cq-plant .item-2 { width: 100% !important; float: none !important; padding: 0 !important; } .cq-plant #mainImageDetail, .cq-plant .item-2:first-child .rel, .cq-plant #slidePopup { display: none !important; } .cq-anh-nguon-line { font-size: 11px; color: #aab3ab; margin: 2px 0 10px; font-style: italic; } /* Gallery anh thuc te — TAT CA tren 1 HANG NGANG */ .cq-real { margin: 0 0 16px; } .cq-real-row { display: flex; gap: 8px; } .cq-real-cell { flex: 1 1 0; min-width: 0; height: 200px; border-radius: 8px; overflow: hidden; background: #eef1f4; cursor: zoom-in; } .cq-real-cell img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; display: block; transition: transform .2s; } .cq-real-cell:hover img { transform: scale(1.05); } .cq-real-credit { font-size: 11px; color: #aab3ab; margin: 6px 0 0; font-style: italic; } @media (max-width: 640px) { .cq-real-cell { height: 96px; } } /* Model 3D D5 Render — viewer 4 anh + "+n" (khong vien rieng, de muc giong nhom khac) */ .cq-d5 { margin: 16px 0 0; } .cq-d5 .cq-spec-group__title { margin-top: 0; } .cq-d5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .cq-d5-cell { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #e9eef2; } .cq-d5-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .cq-d5-cell:hover img { transform: scale(1.05); } .cq-d5-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,30,45,.58); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .02em; } .cq-anh-hang { display: flex; gap: 10px; margin: 0 0 6px; align-items: flex-start; } .cq-anh-hang a { position: relative; overflow: hidden; cursor: zoom-in; background: #f2f6f2; border-radius: 0; flex: 0 0 auto; } .cq-anh-hang img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .cq-anh-hang a:hover img { transform: scale(1.03); } .cq-anh-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(15,20,15,.62); color: #fff; font-size: 14px; font-weight: 600; padding: 5px 12px; border-radius: 8px; pointer-events: none; backdrop-filter: blur(2px); } .cq-anh-hang .cq-anh-dup img { transform: scale(1.5) !important; transform-origin: center; } .cq-anh-hang .cq-anh-dup:hover img { transform: scale(1.56) !important; } /* Header cay: icon nhom + ten + ten khoa hoc + dong gop boi */ .cq-cay-header { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 16px; } .cq-cay-head-main { flex: 1 1 auto; min-width: 0; } /* Vong tron gop: icon nhom (don sac) ben trong + vong danh dau ben ngoai */ .cq-cay-mark { position: relative; flex: 0 0 60px; width: 60px; height: 60px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cq-mark-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .cq-mark-track { fill: #eef6ee; stroke: #cfe6cf; stroke-width: 2.4; } .cq-mark-prog { fill: none; stroke: #2e7d32; stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; transition: stroke-dashoffset .4s ease; } .cq-cay-mark:hover .cq-mark-track { fill: #e3f1e3; stroke: #a9d6a9; } .cq-cay-mark.dadd .cq-mark-track { fill: #e7f4e7; } .cq-cay-mark.dadd .cq-mark-prog { stroke-dashoffset: 0; } .cq-mark-ico { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); fill: #2e7d32; } .cq-cay-ten { margin: 0; font-size: 31px; font-weight: 800; color: #1b5e20; line-height: 1.18; letter-spacing: -.4px; text-transform: none; } .cq-cay-sci { font-size: 31px; font-weight: 400; font-style: italic; color: #9aa79a; margin-left: 10px; } .cq-cay-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; } .cq-cay-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cq-cay-tag { display: inline-flex; align-items: center; padding: 4px 13px; border-radius: 999px; background: #eef6ee; border: 1px solid #cfe6cf; color: #2e7d32; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; } .cq-cay-tag:hover { background: #2e7d32; color: #fff; text-decoration: none; } .cq-cay-tag::before { content: '#'; opacity: .55; margin-right: 3px; } .cq-dd-so { color: #2e7d32; font-weight: 600; } .cq-dd-so b { font-size: 16px; } .cq-dd-xem { color: #8a978a; } .cq-cay-report { position: absolute; top: 2px; right: 0; margin: 0; } .cq-cay-report .btn { padding: 4px 10px; font-size: 13px; color: #8a8f98; background: transparent; border: 0; } .cq-cay-report .btn:hover { color: #c62828; }