.detail-page{padding-top:33px;padding-bottom:74px}.detail-page .breadcrumbs{margin-bottom:29px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}.detail-main-image{height:500px;position:relative;background:#f2f6f0;border:1px solid #e0e9dd;overflow:hidden}.detail-main-image img{width:100%;height:100%;object-fit:cover;object-position:center 60%}.detail-main-image>span:not(.detail-placeholder-icon){position:absolute;top:14px;left:14px;background:#e5f3e1;color:#2c774b;padding:7px 12px;font-size:11px;font-weight:700}.detail-thumbs{display:flex;gap:10px;margin-top:12px}.detail-thumb{width:88px;height:75px;border:2px solid #dce7dc;padding:0;background:#fff;cursor:pointer}.detail-thumb.selected{border-color:#15804e}.detail-thumb img{width:100%;height:100%;object-fit:cover}.detail-image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#52825f;background:radial-gradient(circle,#ebf5e9,#d9e9d9)}.detail-placeholder-icon{font-size:120px;line-height:1;color:#7caa7b}.detail-image-placeholder strong{font-size:19px}.detail-image-placeholder small{font-size:12px}.detail-summary{padding-top:9px}.detail-summary h1{font-size:clamp(30px,3.6vw,48px);line-height:1.25;margin:13px 0 14px}.detail-intro{font-size:15px;line-height:1.85;color:#607166}.detail-price{border-top:1px solid #dfe8dc;border-bottom:1px solid #dfe8dc;padding:24px 0;margin:25px 0;display:flex;flex-direction:column;gap:5px}.detail-price small{font-size:12px;color:#687e6f}.detail-price strong{font-size:24px;color:#0e6b43}.detail-price span{font-size:12px;color:#78877d}.detail-buttons{display:flex;gap:12px;flex-wrap:wrap}.detail-buttons .button{gap:14px}.detail-meta{margin-top:30px}.detail-meta>div{display:grid;grid-template-columns:125px 1fr;gap:15px;padding:12px 0;border-bottom:1px solid #e6ede3;font-size:13px}.detail-meta span{color:#748579}.detail-meta a{color:#0e7045;font-weight:700}.detail-content{background:#f8faf6;padding:0 0 69px}.detail-tabs{display:flex;border-bottom:1px solid #dbe7d9;gap:10px}.detail-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:22px 20px 17px;color:#65766a;font:700 15px "IBM Plex Sans Thai";cursor:pointer}.detail-tabs button.selected{color:#0d7146;border-color:#68b840}.detail-panel{background:#fff;border:1px solid #e3ebe0;border-top:0;padding:32px 35px;min-height:190px}.detail-panel[hidden]{display:none}.detail-panel h2{font-size:24px;margin:0 0 14px}.detail-panel p{line-height:1.8;color:#586f5f;font-size:14px;max-width:900px}.detail-specs{max-width:760px;border-top:1px solid #e4ece1}.detail-specs>div{display:grid;grid-template-columns:200px 1fr;padding:13px 15px;border-bottom:1px solid #e4ece1;gap:15px;font-size:13px}.detail-specs>div:nth-child(odd){background:#f9fbf7}.detail-specs strong{color:#40684b}.detail-spec-note{font-size:12px!important;margin-top:18px}.detail-related{padding:76px 0}.detail-related-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:23px}.detail-related-head h2{font-size:30px;margin:9px 0 0}.detail-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.detail-related-card{border:1px solid #e1eae0;display:block;background:#fff;transition:transform .2s,box-shadow .2s}.detail-related-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px #164a2415}.detail-related-card img,.related-placeholder{display:block;width:100%;height:185px;object-fit:cover;background:#e5f0e3}.related-placeholder{display:grid;place-items:center;font-size:78px;color:#8eb590}.detail-related-card>div{display:flex;flex-direction:column;gap:8px;padding:17px}.detail-related-card small{font:800 10px Manrope;letter-spacing:1.2px;color:#258052}.detail-related-card strong{font-size:17px}.detail-related-card>div>span{font-size:12px;font-weight:700;color:#13764b}
@media(max-width:800px){.detail-grid{grid-template-columns:1fr;gap:30px}.detail-main-image{height:440px}.detail-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:550px){.detail-page{padding-top:22px;padding-bottom:52px}.detail-main-image{height:335px}.detail-summary h1{font-size:32px}.detail-buttons .button{width:100%;justify-content:space-between}.detail-panel{padding:23px 18px}.detail-specs>div{grid-template-columns:1fr;gap:4px}.detail-related-grid{grid-template-columns:1fr}.detail-related-head{align-items:start;flex-direction:column}.detail-related-card img,.related-placeholder{height:200px}}