/* Logoxinh "Dem sao" v2 layout pass: friendlier reading, category tiles, trust strip, mobile bottom bar. Loaded after dem-sao.css / dem-sao-inner.css. */

/* readable product names: body face, 2 lines, no serif caps soup */
.ds .card h3,
body.ds-inner .item_product_main h3,
body.ds-inner .item_product_main h3 a,
body.ds-inner .item_product_main .product-name a{font-family:var(--f-body)!important;font-weight:500!important;font-size:14px!important;line-height:1.4!important;letter-spacing:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.ds .card{padding:10px;gap:8px}
.ds .card .pr{font-size:15px}
.ds .art{border-radius:10px}
.ds .grid{gap:16px}

/* icon helpers */
.ds .ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* trust strip */
.ds .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-block:28px 8px}
.ds .trust div{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.ds .trust .ico{color:var(--mint);margin-top:2px}
.ds .trust b{display:block;color:var(--paper);font-weight:600;font-size:14px}
.ds .trust span{font-size:13px;color:var(--mute)}
@media (max-width:860px){.ds .trust{grid-template-columns:1fr 1fr}}

/* shop-by-need tiles (real product photos) */
.ds .needs{padding-block:56px 8px;display:grid;gap:22px}
.ds .tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ds .tile{display:grid;gap:10px;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:10px 10px 14px;background:var(--panel);transition:transform .25s,border-color .25s}
.ds .tile:hover{transform:translateY(-3px);border-color:var(--mint)}
.ds .tile .ph{aspect-ratio:1;border-radius:10px;overflow:hidden;background:#e9edf2}
.ds .tile img{width:100%;height:100%;object-fit:cover;display:block}
.ds .tile b{color:var(--paper);font-weight:600;font-size:14px;line-height:1.3}
.ds .tile span{color:var(--mute);font:500 11px var(--f-mono);letter-spacing:.06em}
@media (max-width:980px){.ds .tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.ds .tiles{grid-template-columns:repeat(2,1fr)}}

/* section rhythm */
.ds .prods{padding-block:56px}
.ds .state{padding-block:64px}

/* header: icon cart, tidy on phones */
.ds .cart{display:inline-flex;align-items:center;gap:6px}
.ds .cart .ico{width:20px;height:20px}
@media (max-width:640px){
  .ds .nav{gap:10px;padding-block:9px}
  .ds .brand{font-size:15px}
  .ds .chip{padding:4px 9px;font-size:12px;white-space:nowrap}
  .ds .chip .badge{display:none}
  .ds .cart .t{display:none}
  .ds .hero{gap:28px}
  .ds h2{font-size:26px}
}

/* contact buttons: floating pills on desktop, bottom bar on phones */
@media (max-width:760px){
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .ds .fab{left:0;right:0;bottom:0;grid-template-columns:repeat(3,1fr);gap:0;background:var(--night);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  .ds .fab a{justify-content:center;border-radius:10px;margin:0 3px;padding:10px 6px;font-size:13px;box-shadow:none}
  #cf-trigger{bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;transform:scale(.72);transform-origin:bottom left}
}

/* collection page: calmer sidebar + toolbar */
body.ds-inner .aside-item{border:1px solid var(--line)!important;border-radius:14px!important;padding:14px!important;margin-bottom:16px}
body.ds-inner .aside-title,body.ds-inner .aside-title *,body.ds-inner .title-head-aside{font:500 11px var(--f-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--mute)!important;border:0!important;background:transparent!important;padding:0 0 8px!important}
body.ds-inner .aside-content li,body.ds-inner .aside-content .nav-item{border:0!important;background:transparent!important}
body.ds-inner .aside-content a{display:block;padding:7px 8px!important;border-radius:8px;font-size:14px}
body.ds-inner .aside-content a:hover{background:#163050}
body.ds-inner .sort-cate select,body.ds-inner .sort-cate .form-control{background:#0e2036!important;color:var(--paper)!important;border:1px solid #3a5576!important;border-radius:8px}
body.ds-inner .item_product_main{padding:10px}
body.ds-inner .item_product_main .product-thumbnail,body.ds-inner .item_product_main .image_thumb{border-radius:10px;overflow:hidden}
body.ds-inner .item_product_main .product-info{padding:10px 2px 4px!important;text-align:left}
body.ds-inner .products-view .row{row-gap:16px}

/* product page */
body.ds-inner .details-pro .title-product,body.ds-inner h1.title-product{font-size:clamp(22px,2.6vw,30px)!important;line-height:1.2!important}
body.ds-inner .details-pro .price-box .price,body.ds-inner .details-pro .special-price .price{font:600 28px var(--f-display)!important;color:var(--coral)!important}
body.ds-inner .details-pro .swatch .header,body.ds-inner .details-pro .swatch-title{font:500 11px var(--f-mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)!important}
body.ds-inner .details-pro .swatch-element label{padding:7px 14px!important;font-size:14px!important;min-width:56px;text-align:center}
body.ds-inner .details-pro .btn{padding:12px 22px!important;font-size:15px!important}
body.ds-inner .large-image,body.ds-inner .product-image-block{border-radius:14px;overflow:hidden;background:#e9edf2}
.ds-pinfo{display:grid;gap:12px;margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:16px;background:color-mix(in srgb,var(--panel) 75%,transparent)}
.ds-pinfo ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ds-pinfo li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text)}
.ds-pinfo li .ico{color:var(--mint)}
.ds-pinfo .help{border-top:1px solid var(--line);padding-top:12px;font-size:13.5px;color:var(--text)}
.ds-pinfo .help a{color:var(--mint)!important;text-decoration:underline;text-underline-offset:3px}
.ds-pinfo .help b{color:var(--paper)}
body.ds-inner .item_product_main h3,body.ds-inner .item_product_main h3 a,body.ds-inner .item_product_main .product-name a{white-space:normal!important;text-overflow:clip!important;height:auto!important}
body.ds-inner .item_product_main .product-name{height:auto!important;min-height:2.8em}