/* ============================================================
   GP Toolkit — Frontend styles
   Gom toàn bộ CSS inline cũ về 1 file (browser cache được).
   ============================================================ */

/* ---- Read more / Thu gọn mô tả sản phẩm ---- */
.single-product div#tab-description { overflow: hidden; position: relative; padding-bottom: 25px; }
.fix_height { max-height: 280px; overflow: hidden; position: relative; }
.single-product .tab-panels div#tab-description.panel:not(.active) { height: 0 !important; }
.devvn_readmore_flatsome { text-align: center; cursor: pointer; position: absolute; z-index: 10; bottom: 0; width: 100%; background: #fff; }
.devvn_readmore_flatsome:before { height: 55px; margin-top: -45px; content: ""; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); display: block; }
.devvn_readmore_flatsome a { color: #318A00; display: block; }
.devvn_readmore_flatsome a:after { content: ''; width: 0; right: 0; border-top: 6px solid #318A00; border-left: 6px solid transparent; border-right: 6px solid transparent; display: inline-block; vertical-align: middle; margin: -2px 0 0 5px; }
.devvn_readmore_flatsome_less a:after { border-top: 0; border-bottom: 6px solid #318A00; }
.devvn_readmore_flatsome_less:before { display: none; }

/* ---- Scroll to top (progress ring) ---- */
.progress-wrap, .progress-wrap::after { border-radius: 50%; transition: .2s linear; }
.progress-wrap { position: fixed; right: 10px; bottom: 25px; width: 46px; height: 46px; cursor: pointer; display: block; z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); }
.progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); }
.progress-wrap { background: var(--fs-color-alert); }
.progress-wrap:hover { background: #333; }
.progress-wrap .mb-arrow-up { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -56%); width: 16px; height: 16px; border-left: 2.5px solid #fff; border-top: 2.5px solid #fff; border-radius: 1px; transform: translate(-50%, -38%) rotate(45deg); }
.progress-wrap svg path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 4; transition: stroke-dashoffset 10ms linear; }
@media only screen and (max-width: 48em) { .progress-wrap { right: 10px; bottom: 75px; } }

/* ---- Form SĐT ---- */
.form-dien-thoai { margin-top: 12px; background: #5bb5ab; padding: 15px; border-radius: 5px; }
.form-dien-thoai label { background: url(/wp-content/assets/images/icon-phone.png) left top no-repeat; padding: 0 5px 0 52px; margin: 0 0 11px; text-align: left; font-weight: 400; font-size: 14px; color: #fff; display: block; }
.form-dien-thoai form { margin-bottom: 0; }
.form-dien-thoai input[type=tel] { margin-bottom: 0; border-radius: 0; box-shadow: 0 0 0; }
.form-dien-thoai .wpcf7 input[type=submit] { border-radius: 0 !important; text-align: left; margin: 0; padding: 0 10px; font-weight: 400; text-transform: none; }

/* ---- Nút link TMĐT ---- */
.ecommerce-buttons { border: 1px solid #ccc; border-radius: 5px; padding: 15px; }
.ecommerce-buttons li { display: flex; align-items: center; justify-content: space-between; list-style: none; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px; }
.ecommerce-buttons li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.ecommerce-buttons li a { text-decoration: none; border: 1px solid; padding: 5px 15px; border-radius: 5px; color: red; transition: .5s linear; min-width: 150px; text-align: center; }

/* ---- Form bán theo m² ---- */
.m2-calc-box { margin-bottom: 20px; padding: 15px; background: #fcfcfc; border: 1px dashed #999; }
.m2-calc-box label { font-weight: bold; }
.m2-row { display: flex; gap: 10px; }
.m2-row .m2-col { flex: 1; }
.m2-area-line { margin-top: 5px; font-weight: bold; color: #d26e4b; }
.m2-note { font-size: .9em; }
.m2-note #span_area, .m2-calc-box #span_area { color: red; font-weight: bold; }
.m2-area-line #span_area { color: inherit; }