/* Tablet, split-screen and touch layouts — Atphosting24.com. */
html body .gc-marketplace-badge {display:inline-flex;align-items:center;float:left;max-width:100%;margin:3px 8px 4px 0;padding:2px 7px;border:1px solid var(--atp-border,#dce3e8);border-radius:4px;background:var(--atp-soft,#f3f7fa);color:var(--atp-ink,#243746);font-size:12px;font-weight:600;line-height:1.8;overflow-wrap:anywhere}
/* Use the available viewport, including landscape tablets, rather than device names. */
@media (max-width:1366px) {
 html body :is(#item,#item1688) #buyTocart,
 html body :is(#item,#item1688) .skeleton>.row {
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;align-items:start;
  margin-left:0;margin-right:0;
 }
 html body :is(#item,#item1688) #buyTocart:before,
 html body :is(#item,#item1688) #buyTocart:after,
 html body :is(#item,#item1688) .skeleton>.row:before,
 html body :is(#item,#item1688) .skeleton>.row:after {display:none}
 html body :is(#item,#item1688) :is(.image_area,.item-info,.item-seller-info,.pbsSellerInfo) {
  float:none;width:100%!important;min-width:0;max-width:100%;padding-left:0;padding-right:0;
 }
 html body :is(#item,#item1688) :is(.item-seller-info,.pbsSellerInfo) {grid-column:1/-1}
 html body :is(#item,#item1688) .item-seller-info .i12 {max-width:100%;background-size:contain}
 html body :is(#item,#item1688) .item-info h1 {font-size:18px;margin-top:0}
 html body :is(#item,#item1688) #spec-n1 {aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff}
 html body :is(#item,#item1688) #spec-n1>img {width:100%;height:100%;max-height:none;object-fit:contain}
 html body :is(#item,#item1688) .item-info dl {display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;height:auto}
 html body :is(#item,#item1688) .item-info dt {float:none;width:100%;margin:0;padding:0;line-height:1.8}
 html body :is(#item,#item1688) .item-info dd {float:none;width:100%;min-width:0;margin:0;line-height:1.8}
 html body :is(#item,#item1688) .item-info textarea {width:100%}
 html body :is(#item,#item1688) .skuSpec .row {display:block;height:auto;padding:10px 0}
 html body :is(#item,#item1688) .skuSpec .title {width:100%;height:auto;margin:0 0 8px;padding:0;line-height:1.8}
 html body :is(#item,#item1688) .skuSpec :is(.specItem,.specItem1688) {width:100%;min-width:0}
 html body :is(#item,#item1688) #spec-n5 {display:flex;width:100%;max-width:100%;height:auto}
 html body :is(#item,#item1688) #spec-list {position:static;width:100%;max-width:100%;height:84px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 html body :is(#item,#item1688) #spec-list ul {display:flex;position:static!important;gap:6px;width:max-content!important;max-width:none;margin:0;padding:6px 0}
 html body :is(#item,#item1688) #spec-list li {float:none;flex:0 0 62px;margin:0}
 html body :is(#item,#item1688) #spec-list li img {width:62px;height:62px;object-fit:contain}
 html body :is(#item,#item1688) #spec-n5>.control {display:none}
 html body :is(#item,#item1688) .buy_line dd {display:flex;flex-wrap:wrap;gap:10px}
 html body :is(#item,#item1688) .buy_line input {max-width:100%;margin:0;white-space:normal}
}
/* Wholesale variants must keep their name, price, stock and quantity distinct. */
html body #item1688 .skuSpec .item1688 {display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,auto);gap:8px 14px;align-items:center;margin:0 0 12px;padding:12px;border:1px solid var(--atp-border,#dce3e8);border-radius:6px}
html body #item1688 .skuSpec .item1688>* {min-width:0;width:auto;margin:0;padding:0;white-space:normal;overflow-wrap:anywhere}
html body #item1688 .skuSpec .item1688>.specName {grid-column:1/-1;line-height:1.8}
html body #item1688 .skuSpec .item1688>.specPrice {grid-column:1;font-weight:600}
html body #item1688 .skuSpec .item1688>.specStock {grid-column:2;text-align:right}
html body #item1688 .skuSpec .item1688>dd {grid-column:1/-1;justify-self:end;width:160px;max-width:100%}
html body #item1688 .priceRange {display:block;width:100%;height:auto}
html body #item1688 .priceRange>div:not(.range) {display:flex;flex-wrap:wrap;width:100%}
html body #item1688 .priceRange>.range {display:flex;justify-content:space-between;width:100%;padding:8px 12px}
html body #item1688 .priceRange>div:not(.range)>.range {flex:1 1 100px;min-width:0;padding:12px 6px}
html body #item1688 .priceRange .range :is(.price,.desc) {width:auto;height:auto;white-space:normal;overflow-wrap:anywhere;line-height:1.8}

/* Retain full content width for member forms in both tablet orientations. */
@media (min-width:1024px) and (max-width:1366px) {
 html body .gc-member-aside {float:none;width:100%;margin-bottom:18px}
 html body .gc-member-aside~.col-md-9 {float:none;width:100%}
 html body .member-cover-container>.row>.gc-member-aside {display:block!important;order:-1;margin-top:0}
 html body .gc-member-toggle {display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--atp-border,#dce3e8);border-radius:6px;background:var(--atp-soft,#f3f7fa);color:var(--atp-ink,#243746);font:inherit;font-weight:600;text-align:left}
 html body .gc-member-aside.gc-member-enhanced:not(.gc-member-open)>.gc-member-content {display:none}
 html body .gc-member-content {padding-top:16px}
 html body .gc-member-content .m-info-left {display:none}
 html body .gc-member-content .menu-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
 html body .gc-member-content .menu-list>li {margin:0;min-width:0}
 html body .gc-member-content a {white-space:normal;overflow-wrap:anywhere}
}

/* The estimator previously reverted to short, fixed-size inputs above 900px. */
@media (max-width:1366px) {
 html body #estimate .con-div {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:24px;width:calc(100% - 32px);max-width:1320px;height:auto;margin:0 auto;padding:24px 0}
 html body #estimate .con-div .point {float:none;width:100%;min-width:0;height:auto;margin:0;padding:0}
 html body #estimate .con-div .point .t-l {width:100%;min-height:0;height:auto;margin:0;padding:16px;box-sizing:border-box}
 html body #estimate .point.left .t-l>div {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0!important;height:auto!important}
 html body #estimate .con-div :is(.td-l,.td-r) {float:none;width:100%;min-width:0;height:auto;margin:0;display:block}
 html body #estimate .con-div .td-l {grid-row:span 2}
 html body #estimate .con-div .td-l .form-group {float:none;width:100%;height:auto;margin-bottom:18px}
 html body #estimate .con-div .lab {display:block;width:100%;height:auto;white-space:normal;line-height:1.8;font-size:14px;margin:0 0 8px}
 html body #estimate .con-div label.input {display:block;width:100%;margin:0}
 html body #estimate .con-div :is(select,input[type=number],#show-tick,#goodstype) {width:100%;max-width:100%;min-width:0;min-height:44px;height:auto;margin:0;box-sizing:border-box;font-size:16px}
 html body #estimate .con-div input[type=number] {padding:10px}
 html body #estimate .con-div #goodstype {display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:normal;text-align:left}
 html body #estimate .con-div #goodstype-name {white-space:normal;overflow-wrap:anywhere}
 html body #estimate .con-div .bo {display:grid;grid-column:1/-1;grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);gap:12px;align-items:center;float:none;width:100%;height:auto;margin:0;padding:0}
 html body #estimate .con-div .bo>label {grid-column:1/-1;display:block;width:100%;margin:0;font-size:14px;line-height:1.9;white-space:normal}
 html body #estimate .con-div .bo>label i {font-size:13px;font-weight:400}
 html body #estimate .con-div .bo span {float:none;width:auto;height:auto;margin:0;line-height:1.8;white-space:normal}
 html body #estimate .con-div .bo input[type=number] {float:none;width:100%!important}
 html body #estimate .con-div .bo.cen-btn {display:block}
 html body #estimate .con-div #calculate {width:100%;min-height:48px;height:auto;margin:0;padding:10px 16px;border-radius:6px;background:var(--atp-accent,#14758a);color:var(--atp-on-accent,#fff);font-size:16px}
 html body #estimate .con-div .point.right .t-l {display:block;padding:16px}
 html body #estimate .con-div .point.right .a {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%!important;height:auto;margin:0}
 html body #estimate .con-div .point.right .a>div {display:flex;flex-direction:column;align-items:center;gap:8px;float:none;width:auto!important;min-width:0;height:auto;margin:0;padding:8px;cursor:pointer}
 html body #estimate .con-div .point.right .a>div>div:first-child {float:none;width:60px;height:60px;margin:0}
 html body #estimate .con-div .point.right .a .a-d {display:block;float:none;flex:none;width:100%!important;min-width:0;height:auto;margin:0;padding:0}
 html body #estimate .con-div .point.right .a .a-d i {display:block;font-size:13px;line-height:1.8;text-align:center;white-space:normal;overflow-wrap:anywhere}
 html body #estimate .con-div .point.right .tis {display:block;float:none;clear:both;width:100%;height:auto;margin:18px 0 0;white-space:normal;line-height:1.8;overflow-wrap:anywhere}
 html body #estimate .con-div #tip {grid-column:1/-1;width:100%;height:auto}
 html body #estimate .con-div #tip #bit {float:none!important;display:block;padding:0!important}
}
@media (max-width:1023px) {
 html body #estimate .con-div {grid-template-columns:minmax(0,1fr)}
 html body #estimate .con-div .point.right .a {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px) {
 html body :is(#item,#item1688) #buyTocart,
 html body :is(#item,#item1688) .skeleton>.row {grid-template-columns:minmax(0,1fr)}
 html body :is(#item,#item1688) #preview {margin-left:auto;margin-right:auto}
}
@media (max-width:600px) {
 html body #estimate .point.left .t-l>div {grid-template-columns:minmax(0,1fr)}
 html body #estimate .con-div .point.right .a {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Touch targets apply to large tablets too, including tablets with a trackpad. */
@media (any-pointer:coarse) {
 html body :is(input.form-control,select.form-control,textarea.form-control,.sky-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.sky-form select,.loginContent input,#search-lang,#myPanli) {font-size:16px!important}
 html body :is(.form-control:not(textarea),.sky-form select,.sky-form input:not([type=checkbox]):not([type=radio]):not([type=hidden])) {min-height:44px;height:auto}
 html body :is(.btn,.btn-u,button[type=submit],.pagination>li>a,.nav-tabs>li>a,.dropdown-menu>li>a) {min-height:44px;white-space:normal;line-height:1.7}
 html body .input-group-btn>.btn {min-width:44px;white-space:nowrap}
 html body #SearchNav .select-tab li {min-height:44px;display:flex;align-items:center}
 html body :is(.sky-menu-close,.sky-category-close,.atp-menu-toggle,.gc-category-close) {min-width:44px;min-height:44px}
 html body .gc-category-row>.gc-category-toggle {width:44px;min-width:44px;height:48px}
 html body .gc-category-panel :is(.gc-category-leaf,.gc-category-child,.gc-category-platform) {min-height:44px;padding-top:8px;padding-bottom:8px;box-sizing:border-box}
 html body .gc-member-content .menu-list a {min-height:44px;padding-top:10px;padding-bottom:10px}
 html body :is(#item,#item1688) .skuSpec .item {min-height:44px}
 html body :is(#item,#item1688) .buynum_select {display:flex;width:160px;max-width:100%;height:auto}
 html body :is(#item,#item1688) .buynum_select>.input-group-btn {flex:0 0 44px;width:44px}
 html body :is(#item,#item1688) .buynum_select>.form-control {flex:1;min-width:0;width:0;height:44px;text-align:center}
 html body :is(#item,#item1688) .buynum_select .btn {width:44px;height:44px;padding:6px}
 html body :is(input,select,textarea,button,[tabindex]) {scroll-margin-top:20px;scroll-margin-bottom:110px}
}
/* Short landscape windows and display cutouts keep drawer controls reachable. */
@media (max-width:1100px) {
 html body .sky-rail,html body .sky-navband #atp-navigation.atp-open {top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));max-height:calc(100vh - var(--gc-bottom-height,76px) - 28px);max-height:calc(100dvh - var(--gc-bottom-height,76px) - 28px)}
 html body .sky-mobile-nav {padding-bottom:max(6px,env(safe-area-inset-bottom))}
}

/* Project development / integration: ພັດທະນາໂດຍ ບໍລິສັດ Atphosting24.com ຈຳກັດ ຮ່ວມກັບ ບໍລິສັດຮ່ວມພັດທະນາ ICOM */