/*
 * Trang chi tiết sản phẩm: khung giá, nút mua, cột phải (yêu cầu giao diện 5, 09/2026, kiểu anphatpc.com.vn).
 * Markup trong parts/sanpham-chi-tiet.php.
 */

/* --- Khung giá xám --- */
#overview .ccn-khung-gia{margin:12px 0 14px;padding:14px 16px;background:#f5f6f8;border:1px solid #e6e8ec;border-radius:10px;}
#overview .ccn-khung-gia .dong{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:3px 0;font:400 15px/24px Roboto, Arial;color:#222;}
#overview .ccn-khung-gia .nhan{flex:0 0 120px;color:#555;}
#overview .ccn-khung-gia .niem-yet s{color:#888;}
#overview .ccn-khung-gia .niem-yet .giam{padding:0 6px;border-radius:4px;background:#e30019;font:600 13px/20px Roboto, Arial;color:#fff;}
#overview .ccn-khung-gia .ban b{font:700 28px/34px Roboto, Arial;color:#e30019;}
#overview .ccn-khung-gia .ban b.lien-he{font-size:20px;}
#overview .ccn-khung-gia .ban .vat{font-size:13px;color:#777;}

/* Giá Build PC: ô nổi bật */
#overview .ccn-khung-gia .gia-build{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:8px 0 6px;padding:8px 12px;
	background:#fff7e6;border:1px dashed #ff7e00;border-radius:8px;font:400 15px/24px Roboto, Arial;}
#overview .ccn-khung-gia .gia-build .nhan{flex:0 0 108px;color:#b35900;font-weight:600;}
#overview .ccn-khung-gia .gia-build b{font:700 22px/28px Roboto, Arial;color:#ff6a00;}
#overview .ccn-khung-gia .gia-build small{flex-basis:100%;font-size:13px;color:#8a6d3b;}

/* Ưu đãi của SP trong khung */
#overview .ccn-khung-gia .pro-offer{margin-top:8px;padding:10px 12px 6px;background:#fff;border:1px solid #f3c9c9;border-radius:8px;}
#overview .ccn-khung-gia .pro-offer .title{padding:0 0 6px;font:600 16px/24px Roboto, Arial;color:#e30019;}

/* --- Nút mua --- */
#overview .ccn-nut-mua{margin:0 0 12px;}
#overview .ccn-nut-mua .nut{display:block;padding:9px 10px;border-radius:8px;text-align:center;color:#fff;transition:filter .2s ease, box-shadow .2s ease;}
#overview .ccn-nut-mua .nut:hover{filter:brightness(1.08);box-shadow:0 4px 12px rgba(16,24,40,.18);}
#overview .ccn-nut-mua .nut b{display:block;font:700 17px/22px Roboto, Arial;text-transform:uppercase;}
#overview .ccn-nut-mua .nut small{display:block;font:400 13px/18px Roboto, Arial;opacity:.92;}
#overview .ccn-nut-mua .nut-do{background:linear-gradient(to bottom,#ff3838,#c8000a);}
#overview .ccn-nut-mua .nut-do b{font-size:20px;line-height:26px;}
#overview .ccn-nut-mua .hai-nut{display:flex;gap:8px;margin-top:8px;}
#overview .ccn-nut-mua .hai-nut .nut{flex:1;}
#overview .ccn-nut-mua .nut-xanh{background:linear-gradient(to bottom,#3481bc,#0a4fb5);}
#overview .ccn-nut-mua .nut-la{background:linear-gradient(to bottom,#1d8a55,#0a663c);cursor:pointer;}
#overview .ccn-nut-mua .nut-la.dac{background:linear-gradient(to bottom,#8a8f98,#5f646c);}
#overview .ccn-nut-mua .thanh-toan{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;font:400 14px/20px Roboto, Arial;color:#555;}
#overview .ccn-nut-mua .thanh-toan em{display:inline-flex;align-items:center;gap:6px;font-style:normal;color:#333;}
#overview .ccn-nut-mua .thanh-toan i{font-size:20px;color:#0a663c;}

/* --- Cột phải --- */
#overview-right #uudai{border-radius:10px;border-color:#e0e3e8;}
#overview-right .ccn-hop-phai{margin-top:12px;padding:12px 15px;border:1px solid #e0e3e8;border-radius:10px;background:#fff;}
#overview-right .ccn-hop-phai .tieu-de{margin-bottom:8px;font:600 16px/22px Roboto, Arial;color:#0a663c;text-transform:uppercase;}
#overview-right .ccn-hop-phai.hotline .so{display:block;font:700 22px/30px Roboto, Arial;color:#e30019;}
#overview-right .ccn-hop-phai.hotline .so i{margin-right:6px;}
#overview-right .ccn-hop-phai.tro-giup li{padding:5px 0;border-bottom:1px dashed #e6e8ec;list-style:none;}
#overview-right .ccn-hop-phai.tro-giup li:last-child{border-bottom:0;}
#overview-right .ccn-hop-phai.tro-giup a{font:400 15px/20px Roboto, Arial;color:#333;}
#overview-right .ccn-hop-phai.tro-giup a:hover{color:#e30019;}
#overview-right .ccn-hop-phai.tro-giup i{width:12px;color:#0a663c;}

@media (max-width:640px){
	#overview .ccn-khung-gia .nhan{flex-basis:100%;}
	#overview .ccn-nut-mua .hai-nut{flex-direction:column;}
}

/* --- Thông số kỹ thuật có cấu trúc (yêu cầu giao diện 4) --- */
#content table.ccn-ts{width:100%;max-width:100%;border-collapse:collapse;border:1px solid #e3e6ea;font:400 15px/22px Roboto, Arial;color:#222;}
#content table.ccn-ts td{padding:8px 12px;border:0;border-bottom:1px solid #eceef1;vertical-align:top;}
#content table.ccn-ts td.ten{width:40%;color:#555;background:#fafbfc;}
#content table.ccn-ts tr.chan td{background:#f5f7f9;}
#content table.ccn-ts tr.chan td.ten{background:#f0f2f5;}
#content table.ccn-ts tr.nhom th{padding:9px 12px;background:#e8f2ec;border-bottom:1px solid #d5e6db;text-align:left;font:700 15px/22px Roboto, Arial;color:#0a663c;text-transform:uppercase;}
.ccn-ts-khung{position:relative;}
.ccn-ts-xem{display:block;margin:12px auto 0;padding:9px 22px;border:1px solid #0a663c;border-radius:20px;background:#fff;font:500 15px/20px Roboto, Arial;color:#0a663c;cursor:pointer;}
.ccn-ts-xem:hover{background:#0a663c;color:#fff;}
.ccn-ts-popup{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);}
.ccn-ts-popup[hidden]{display:none;}
.ccn-ts-popup .hop{display:flex;flex-direction:column;width:100%;max-width:860px;max-height:90vh;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.ccn-ts-popup .dau{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #e6e8ec;}
.ccn-ts-popup .dau b{display:block;font:700 18px/24px Roboto, Arial;color:#0a663c;text-transform:uppercase;}
.ccn-ts-popup .dau span{display:block;font:400 14px/20px Roboto, Arial;color:#555;}
.ccn-ts-popup .dong{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:#f0f2f5;font:400 24px/34px Arial;color:#333;cursor:pointer;}
.ccn-ts-popup .dong:hover{background:#e30019;color:#fff;}
.ccn-ts-popup .than{padding:14px 18px 18px;overflow-y:auto;}
body.ccn-ts-mo{overflow:hidden;}
@media (max-width:640px){
	/* Điện thoại: popup gần tràn màn hình, lề trong nhỏ, cột tên hẹp để nội dung dùng hết chiều ngang. */
	#content table.ccn-ts td{padding:6px 8px;font-size:14px;line-height:20px;}
	#content table.ccn-ts td.ten{width:30%;overflow-wrap:anywhere;}
	#content table.ccn-ts tr.nhom th{padding:7px 8px;font-size:14px;}
	.ccn-ts-popup{padding:6px;}
	.ccn-ts-popup .hop{max-height:calc(100vh - 12px);border-radius:8px;}
	.ccn-ts-popup .dau{padding:10px 10px 8px 12px;}
	.ccn-ts-popup .dau b{font-size:16px;line-height:22px;}
	.ccn-ts-popup .dau span{font-size:13px;line-height:18px;}
	.ccn-ts-popup .than{padding:6px;}
}

/* ===== Đợt 2 (kiểu An Phát) ===== */

/* --- Ảnh sản phẩm: ảnh lớn + mũi tên + "1 / N", ô Hình sản phẩm / Thông số --- */
#product-image.ccn-anh{position:relative;}
.ccn-anh .ccn-anh-lon{position:relative;border:1px solid #e6e8ec;border-radius:10px;background:#fff;overflow:hidden;}
.ccn-anh .ccn-anh-lon .muc{display:none;aspect-ratio:4/3;}
.ccn-anh .ccn-anh-lon .muc.dang{display:flex;align-items:center;justify-content:center;}
.ccn-anh .ccn-anh-lon img{display:block;max-width:100%;max-height:100%;object-fit:contain;}
.ccn-anh .chuyen{position:absolute;top:50%;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;background:rgba(255,255,255,.95);
	box-shadow:0 2px 8px rgba(16,24,40,.25);font-size:24px;line-height:38px;color:#0a663c;cursor:pointer;}
.ccn-anh .chuyen:hover{background:#0a663c;color:#fff;}
.ccn-anh .chuyen.lui{left:10px;}
.ccn-anh .chuyen.toi{right:10px;}
.ccn-anh .ccn-anh-duoi{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;padding:6px 10px;background:#f5f6f8;border-radius:6px;font:400 14px/20px Roboto, Arial;color:#555;}
.ccn-anh .ccn-anh-duoi .phong-to{color:#0a4fb5;}
.ccn-anh .ccn-anh-o{display:flex;gap:10px;justify-content:center;margin-bottom:12px;}
.ccn-anh .ccn-anh-o .o{display:flex;flex-direction:column;align-items:center;width:92px;text-align:center;font:500 13px/17px Roboto, Arial;color:#333;}
.ccn-anh .ccn-anh-o .khung{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:4px;border:1px solid #d8dbe0;border-radius:8px;background:#fff;overflow:hidden;}
.ccn-anh .ccn-anh-o .khung img{max-width:56px;max-height:56px;}
.ccn-anh .ccn-anh-o .khung i{font-size:30px;color:#0a663c;}
.ccn-anh .ccn-anh-o .o:hover .khung{border-color:#e30019;}
.ccn-anh .ccn-anh-o .o:hover{color:#e30019;}

/* Thông số rút gọn dưới ảnh */
#content .ccn-ts-trai{padding:0;}
#content .ccn-ts-trai .tieu-de{margin:6px 0 10px;padding:0;text-align:center;font:600 18px/26px Roboto, Arial;color:#222;text-transform:uppercase;}
#content .ccn-ts-trai table.ccn-ts{margin:0;font-size:14px;line-height:20px;}
#content .ccn-ts-trai table.ccn-ts td{padding:6px 8px;}
#content .ccn-ts-trai table.ccn-ts td.ten{width:40%;}
#content .ccn-ts-trai table.ccn-ts tr.nhom th{padding:6px 8px;font-size:14px;}

/* --- Dòng tóm tắt có tick xanh --- */
#overview ul.ccn-tom{margin:6px 0 4px;padding:0;list-style:none;}
#overview ul.ccn-tom li{display:flex;gap:8px;padding:3px 0;list-style:none;font:400 15px/22px Roboto, Arial;color:#333;}
#overview ul.ccn-tom li i{flex:none;margin-top:3px;font-size:16px;color:#1d9b4a;}

/* --- Box khuyến mại dưới giá (nội dung soạn thảo) --- */
#overview .ccn-hop-km{margin:6px 0 8px;font:400 15px/22px Roboto, Arial;color:#0a4fb5;}
#overview .ccn-hop-km p{margin:0 0 6px;padding:0;}
#overview .ccn-hop-km img{max-width:100%;height:auto;border-radius:6px;}
#overview .ccn-hop-km a{color:#0a4fb5;}
#overview .ccn-hop-km a:hover{color:#e30019;}

/* Bảo hành in đậm */
#overview .ccn-khung-gia .bao-hanh,
#overview .ccn-khung-gia .bao-hanh .nhan{font-weight:700;color:#222;}

/* Ưu đãi của SP (nay nằm dưới dòng thanh toán) */
#overview .ccn-nut-mua + .pro-offer{margin:4px 0 12px;padding:10px 12px 6px;background:#fff;border:1px solid #f3c9c9;border-radius:8px;}
#overview .ccn-nut-mua + .pro-offer .title{padding:0 0 6px;font:600 16px/24px Roboto, Arial;color:#e30019;}

/* Điện thoại: bản cũ ẩn #product-image, hiện slider #progal; nay dùng khối ảnh mới (có vuốt) + thông số dưới ảnh. */
@media (max-width:640px){
	#product-image.ccn-anh{display:block !important;float:none;width:100%;margin-bottom:12px;}
	#progal{display:none !important;}
}
@media (max-width:640px){
	#overview + .ccn-ts-trai{clear:both;padding:10px 0 0;}
}
/* Bảng rút gọn dưới ảnh: mỗi ô tối đa 2 dòng (đủ nội dung ở popup). */
#content .ccn-ts-trai table.ccn-ts td > .cat{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#content table.ccn-ts div.cat{padding:0;font:inherit;color:inherit;}
#overview-right .ccn-hop-phai.mua-nhanh li{padding:5px 0;list-style:none;font:400 15px/21px Roboto, Arial;color:#333;}
#overview-right .ccn-hop-phai.mua-nhanh li i{width:16px;color:#1d9b4a;}

/* Phần dưới trang chi tiết: bỏ cột "Sản phẩm bán chạy nhất" -> nội dung dàn hết chiều ngang, SP cùng loại / giá tương đương 5 ô một hàng. */
#pro-info-tab .content-tab-left{width:100%;float:none;}
#content ul.ulopro li.ccn-the{width:calc((100% - 48px) / 5);}
@media (max-width:1100px){#content ul.ulopro li.ccn-the{width:calc((100% - 36px) / 4);}}
@media (max-width:640px){#content ul.ulopro li.ccn-the{width:calc((100% - 8px) / 2);}}