.qce-wrap{--qce-accent:#33cc33;--qce-dark:#137a1f;--qce-ink:#0f1f13;--qce-line:#e2ece2;--qce-soft:#eefaee;color:var(--qce-ink);background:linear-gradient(180deg,#f3fff3 0,#f8fff8 100%);padding:0 0 48px;box-sizing:border-box}
.qce-wrap *,.qce-wrap *::before,.qce-wrap *::after{box-sizing:border-box}
.qce-wrap button{font-family:inherit;cursor:pointer;text-transform:none;letter-spacing:normal;margin:0}

/* Hero */
.qce-hero{text-align:center;padding:56px 20px 40px;background:linear-gradient(135deg,#f6fff6 0,#effcef 60%,#e3f9e3 100%);border-bottom:1px solid var(--qce-line)}
.qce-hero h1{margin:0 0 14px;font-size:clamp(32px,5.2vw,56px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--qce-ink)}
.qce-hero p{max-width:640px;margin:0 auto;font-size:17px;line-height:1.6;color:#55655a}

/* Stepper */
.qce-app{max-width:1100px;margin:0 auto;padding:0 16px}
.qce-steps{display:flex;align-items:center;justify-content:center;gap:12px;padding:28px 0 22px;flex-wrap:wrap}
.qce-st{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#9aa69c}
.qce-n{width:26px;height:26px;border-radius:50%;border:1px solid #d3e4d3;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.qce-st.done{color:#4b5b50}.qce-st.done .qce-n{border-color:#9be39b;color:var(--qce-dark);background:#f1fff1}
.qce-st.on{color:var(--qce-dark)}.qce-st.on .qce-n{background:var(--qce-accent);border-color:var(--qce-accent);color:#fff;box-shadow:0 6px 16px rgba(51,204,51,.45)}
.qce-line{display:block;width:56px;height:1px;background:#d9e6d9}

/* Card */
.qce-card{background:#fff;border:1px solid var(--qce-line);border-radius:28px;padding:44px 40px;box-shadow:0 24px 60px rgba(30,120,40,.08)}
.qce-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.qce-back{border:1px solid #a8e6a8;background:#fff;color:var(--qce-dark);border-radius:999px;padding:9px 18px;font-size:14px;box-shadow:0 6px 16px rgba(51,204,51,.14)}
.qce-back:hover{background:#f5fff5}
.qce-pill{background:var(--qce-soft);color:var(--qce-dark);font-weight:700;font-size:14px;border-radius:999px;padding:8px 16px}
.qce-head{text-align:center;margin-bottom:30px}
.qce-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--qce-dark);margin-bottom:12px}
.qce-head h2{margin:0 auto 12px;max-width:640px;font-size:clamp(26px,3.6vw,38px);line-height:1.2;font-weight:800;color:var(--qce-ink)}
.qce-head p{margin:0 auto;max-width:640px;color:#66756a;font-size:15px}

/* Step 1 */
.qce-types{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.qce-type{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid var(--qce-line);border-radius:20px;padding:20px 18px;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.qce-type:hover{border-color:#8fe08f;box-shadow:0 12px 28px rgba(30,120,40,.1);transform:translateY(-2px)}
.qce-ico{flex:0 0 54px;height:54px;border-radius:16px;background:var(--qce-soft);color:var(--qce-dark);display:inline-flex;align-items:center;justify-content:center}
.qce-txt{flex:1;min-width:0}
.qce-txt b{display:block;font-size:17px;margin-bottom:5px;color:var(--qce-ink)}
.qce-txt small{display:block;font-size:12.5px;line-height:1.55;color:#6b7a6f}
.qce-arrow{color:#9aa69c;font-size:16px}

/* Step 2 */
.qce-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;max-width:780px;margin:0 auto}
.qce-field{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--qce-line);border-radius:18px;padding:18px 20px;min-height:72px}
.qce-fl b{display:block;font-size:15px;color:var(--qce-ink)}
.qce-fl span{display:block;font-size:14px;color:#6b7a6f;margin-top:4px}
.qce-opt{font-style:normal;font-size:10px;font-weight:700;color:var(--qce-dark);background:var(--qce-soft);border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:4px}
.qce-qty{display:inline-flex;align-items:stretch;height:34px;border:1px solid #dcebdc;border-radius:10px;overflow:hidden;background:#f6fbf6;flex:0 0 auto}
.qce-qty button{width:30px;border:0;background:transparent;color:var(--qce-dark);font-size:16px;padding:0}
.qce-qty button:hover{background:#e8f7e8}
.qce-qty input{width:40px;border:0;border-left:1px solid #e1eee1;border-right:1px solid #e1eee1;background:#fff;text-align:center;font-weight:800;font-size:15px;color:var(--qce-ink);padding:0;margin:0;border-radius:0;box-shadow:none;height:auto;-moz-appearance:textfield}
.qce-qty input::-webkit-outer-spin-button,.qce-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qce-foot{max-width:780px;margin:12px auto 0;font-size:12px;color:#7a887d}
.qce-cta{max-width:780px;margin:22px auto 0;text-align:right}
.qce-btn{background:var(--qce-accent);color:#fff;border:0;border-radius:12px;padding:14px 24px;font-size:15px;font-weight:700;box-shadow:0 12px 26px rgba(51,204,51,.35);transition:transform .15s,filter .15s}
.qce-btn:hover{filter:brightness(.95);transform:translateY(-1px)}

/* Step 3 */
.qce-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto}
.qce-pack{position:relative;overflow:hidden;text-align:left;background:#fff;border:1px solid var(--qce-line);border-radius:22px;padding:30px 30px 26px;color:inherit;min-height:300px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s}
.qce-pack::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;background:var(--qce-soft)}
.qce-pack:hover{border-color:#8fe08f;box-shadow:0 16px 36px rgba(30,120,40,.12);transform:translateY(-3px)}
.qce-tag{align-self:flex-start;background:var(--qce-soft);color:var(--qce-dark);font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:9px 16px;margin-bottom:22px}
.qce-pack h3{margin:0 0 12px;font-size:26px;font-weight:800;color:var(--qce-ink)}
.qce-pack p{margin:0;color:#66756a;font-size:14px;line-height:1.7;flex:1}
.qce-go{position:relative;z-index:1;margin-top:20px;font-weight:800;color:var(--qce-dark);font-size:16px}

/* Result */
.qce-card-result{padding:24px}
.qce-tabsbox{border:1px solid #cfeccf;border-radius:18px;padding:14px 16px;margin-bottom:18px}
.qce-tabs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qce-tabs-l{font-weight:800;font-size:13px}
.qce-tab{flex:1;min-width:120px;border:1px solid #8fe08f;background:#fff;color:var(--qce-dark);border-radius:999px;padding:10px 14px;font-size:14px;font-weight:600}
.qce-tab.on{background:#7fe07f;border-color:#7fe07f;color:#fff}
.qce-result-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#f2fff2,#e4fae4);border:1px solid #b9ecb9;border-radius:24px;padding:30px 32px}
.qce-rh-body{flex:1;min-width:0}
.qce-up{text-transform:uppercase}
.qce-range{font-size:clamp(30px,5vw,56px);font-weight:800;line-height:1.1;color:var(--qce-dark);letter-spacing:-.02em;margin:4px 0 10px}
.qce-range.sm{font-size:clamp(24px,3vw,34px)}
.qce-exact{color:#4b5b50;font-size:14px;margin:-4px 0 8px}
.qce-sub{color:#6b7a6f;font-size:14px;margin-bottom:14px}
.qce-result-hero h3{margin:0 0 10px;font-size:20px;color:var(--qce-dark);font-weight:800}
.qce-meaning p{margin:0 0 8px;color:#3d4a41;font-size:14.5px;line-height:1.85}
.qce-note{margin:12px 0 0;font-size:13px;color:#4b5b50}.qce-note b{color:var(--qce-dark)}
.qce-logo{flex:0 0 auto}
.qce-logo img{display:block;width:100px;height:100px;object-fit:contain;background:#fff;border-radius:22px;padding:6px;box-shadow:0 10px 28px rgba(30,120,40,.15)}
.qce-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:26px}
.qce-list-h{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.qce-list-h h3{margin:0;font-size:22px;font-weight:800}
.qce-list-h span{color:#7a887d;font-size:14px;text-align:right;max-width:90px}
.qce-item{display:grid;grid-template-columns:84px minmax(0,1fr) 64px 190px;gap:16px;align-items:center;border:1px solid var(--qce-line);border-radius:18px;padding:12px 16px 12px 12px;margin-bottom:12px;background:#fff}
.qce-img{display:block;border:1px solid #d9ecd9;border-radius:10px;overflow:hidden;background:#fff}
.qce-img img{display:block;width:100%;height:84px;object-fit:contain}
.qce-info b{display:block;font-size:15.5px;line-height:1.35;color:var(--qce-ink)}
.qce-info em{display:block;font-style:normal;font-size:12.5px;color:#7a887d;margin-top:4px}
.qce-info span{display:block;font-size:13px;color:#66756a;margin-top:6px;line-height:1.5}
.qce-oos{display:inline-block;margin-top:6px;color:#d63638;font-size:12px}
.qce-q{background:#eaf8ea;border-radius:12px;text-align:center;padding:8px 0}
.qce-q small{display:block;font-size:13px;color:#6b7a6f;font-weight:700}
.qce-q b{display:block;font-size:17px;color:var(--qce-dark)}
.qce-p{text-align:right}
.qce-p small{display:block;font-size:11.5px;color:#7a887d}
.qce-p b{display:block;font-size:15px;color:#5d6b61}
.qce-p span{display:block;font-size:17px;font-weight:800;color:#5d6b61;margin-top:6px}
.qce-empty{padding:30px;text-align:center;color:#7a887d;border:1px dashed #cfe5cf;border-radius:16px}
.qce-side{position:sticky;top:24px;background:linear-gradient(180deg,#f7fff7,#eefbee);border:1px solid #c7ecc7;border-radius:22px;padding:24px}
.qce-side .gray{color:#4b5b50}
.qce-side-note{font-size:13px;line-height:1.6;color:#55655a;margin:0 0 20px}
.qce-btns{display:flex;flex-direction:column;gap:12px}
.qce-b{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border-radius:14px;border:1px solid transparent;font-size:15px;font-weight:700;text-align:center;text-decoration:none;padding:10px 14px;line-height:1.3;transition:filter .15s,transform .15s}
.qce-b:hover{filter:brightness(.95);transform:translateY(-1px)}
.qce-b.zalo{background:#0068ff;color:#fff;box-shadow:0 10px 24px rgba(0,104,255,.28)}
.qce-b.hot{background:#fff;color:var(--qce-ink);border-color:#a8e6a8}
.qce-b.quote{background:var(--qce-dark);color:#fff}
.qce-b.cart{background:var(--qce-accent);color:#fff;box-shadow:0 10px 24px rgba(51,204,51,.32)}
.qce-b:disabled{opacity:.65;cursor:wait}
.qce-msg{font-size:13px;line-height:1.5}
.qce-msg.ok{color:#0a8a2a}.qce-msg.bad{color:#d63638}
.qce-stock{font-size:11.5px;color:#7a887d;margin:18px 0 0}
.qce-again{border-top:1px solid var(--qce-line);margin-top:28px;padding-top:22px;text-align:center}
.qce-loading{padding:40px;text-align:center;color:#7a887d}

/* Responsive */
@media (max-width:900px){
	.qce-types,.qce-packs{grid-template-columns:repeat(2,1fr)}
	.qce-cols{grid-template-columns:1fr}
	.qce-side{position:static}
}
@media (max-width:640px){
	.qce-app{padding:0 10px}

	/* Thanh bước: chỉ còn vòng tròn, dàn đều hết chiều ngang */
	.qce-steps{flex-wrap:nowrap;justify-content:space-between;gap:0;padding:22px 6px 18px}
	.qce-st{flex:0 0 auto}
	.qce-t{display:none}
	.qce-n{width:38px;height:38px;font-size:16px}
	.qce-line{flex:1 1 auto;width:auto;min-width:10px;margin:0 8px}

	.qce-card{padding:26px 16px;border-radius:24px}
	.qce-card-result{padding:14px}
	.qce-types,.qce-packs,.qce-fields{grid-template-columns:1fr}
	.qce-type{padding:18px 14px}
	.qce-head{margin-bottom:22px}

	/* Nút quay lại rộng hết khung, nhãn công trình nằm giữa bên dưới */
	.qce-top{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:18px}
	.qce-top .qce-back{width:100%;padding:14px 18px;font-size:16px}
	.qce-top .qce-pill{align-self:center}

	.qce-field{padding:16px}
	.qce-qty{height:38px}
	.qce-qty button{width:34px}
	.qce-qty input{width:52px}
	.qce-pack{min-height:0;padding:24px 22px}
	.qce-cta{text-align:center}
	.qce-cta .qce-btn{width:100%}

	/* Kết quả */
	.qce-tabs-l{flex-basis:100%}
	.qce-tab{flex:1 1 0;min-width:0;padding:10px 6px;font-size:13px}
	.qce-result-hero{flex-direction:column-reverse;align-items:flex-start;padding:22px 18px}
	.qce-logo img{width:64px;height:64px}
	.qce-range{font-size:32px}
	.qce-range.sm{font-size:28px}
	.qce-list-h span{display:none}

	/* Mỗi sản phẩm: hàng trên (ảnh | tên + mô tả | SL), hàng dưới (Thành tiền) */
	.qce-item{grid-template-columns:68px minmax(0,1fr) 56px;grid-template-areas:"img info q" "p p p";gap:12px 14px;align-items:start;padding:14px}
	.qce-img{grid-area:img}
	.qce-info{grid-area:info}
	.qce-q{grid-area:q}
	.qce-img img{height:68px}
	.qce-info b{font-size:15px}
	.qce-p{grid-area:p;text-align:left;border-top:1px solid #e6efe6;padding-top:10px}
	.qce-p small{font-size:12.5px}
	.qce-p b{font-size:17px}
	.qce-p span{display:none}

	.qce-side{padding:20px}
	.qce-btns{gap:14px}
	.qce-b{min-height:56px;border-radius:16px}
}