/* WordPress & WooCommerce integration */

/* ---------------------------------------------------------------------------
 * Lớp bảo vệ layout: giữ đúng độ rộng và font của bộ HTML mẫu
 * (.container = min(100% - 64px, 1480px)), kể cả khi CSS theme cha Flatsome
 * vẫn được tải (Flatsome bó .container lại 1080px và đặt lại .nav/.section).
 * ------------------------------------------------------------------------- */
body.ducphat-site{margin:0}
body.ducphat-site input,body.ducphat-site textarea,body.ducphat-site button,body.ducphat-site select{font-family:inherit}
/* Chỉ ép độ rộng trên các trang dùng markup riêng. Giỏ hàng / thanh toán /
   tài khoản mang thêm class .dp-woo-native và giữ nguyên lưới của Flatsome,
   vì .row của Flatsome có margin âm, bỏ padding của .container sẽ lòi ra ngoài. */
body.ducphat-site:not(.dp-woo-native) .container,
body.ducphat-site .topbar>.container,
body.ducphat-site .header>.container,
body.ducphat-site nav.nav>.container,
body.ducphat-site .footer>.container{width:min(100% - 64px,1480px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
@media(max-width:1100px){
  body.ducphat-site:not(.dp-woo-native) .container,
  body.ducphat-site .topbar>.container,
  body.ducphat-site .header>.container,
  body.ducphat-site nav.nav>.container,
  body.ducphat-site .footer>.container{width:min(100% - 40px,1480px)!important}
}
@media(max-width:520px){
  body.ducphat-site:not(.dp-woo-native) .container,
  body.ducphat-site .topbar>.container,
  body.ducphat-site .header>.container,
  body.ducphat-site nav.nav>.container,
  body.ducphat-site .footer>.container{width:min(100% - 30px,1480px)!important}
}
/* nav.nav là thanh menu của Đức Phát. Dùng selector có tên thẻ để không đụng
   tới ul.nav mà Flatsome sinh ra (menu trang Tài khoản, tab sản phẩm...). */
body.ducphat-site nav.nav{display:block!important;margin:0!important;padding:0!important;list-style:none}
/* ---------------------------------------------------------------------------
 * Menu điện thoại / tablet: ngăn kéo trượt từ phải, rộng hơn nửa màn hình,
 * có lớp nền đen phía sau. Bắt đầu áp dụng từ khổ tablet (<=1024px).
 * ------------------------------------------------------------------------- */
body.ducphat-site .mobile-nav{display:none!important}
body.ducphat-site .dp-nav-backdrop{display:none}
body.ducphat-site .dp-nav-head{display:none}

@media(max-width:1024px){
  body.ducphat-site nav.nav{display:none!important}
  body.ducphat-site .mobile-toggle{display:block!important}

  body.ducphat-site .dp-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1001}
  body.ducphat-site .dp-nav-backdrop.open{opacity:1;visibility:visible}

  body.ducphat-site .mobile-nav{display:flex!important;flex-direction:column;align-items:stretch;gap:0;position:fixed;top:0;right:0;bottom:0;width:60%;min-width:280px;max-width:none;padding:0 0 32px;background:#fff;border-bottom:0;box-shadow:-20px 0 50px rgba(0,0,0,.25);transform:translateX(100%);visibility:hidden;transition:transform .32s ease,visibility .32s ease;overflow-y:auto;overscroll-behavior:contain;z-index:1002}
  body.ducphat-site .mobile-nav.open{transform:translateX(0);visibility:visible}

  body.ducphat-site .dp-nav-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);background:var(--deep);color:#fff}
  body.ducphat-site .dp-nav-head span{font-size:11px;font-weight:800;letter-spacing:2.5px}
  body.ducphat-site .dp-nav-close{background:transparent;border:0;color:#fff;font-size:30px;line-height:1;padding:0 4px;cursor:pointer}

  body.ducphat-site .mobile-nav>a{display:block;padding:15px 22px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px;color:var(--ink)}
  body.ducphat-site .mobile-nav>a:hover,body.ducphat-site .mobile-nav>a.active{color:var(--teal);background:#f3faf6}

  body.dp-nav-open{overflow:hidden}

  /* Dải 4 dịch vụ: từ khổ tablet xuống 2 cột, và kẻ lại viền cho đúng lưới.
     Bộ CSS mẫu chỉ bỏ viền cho ô đầu/ô cuối nên khi xuống 2 cột sẽ thừa một
     vạch dọc ở mép phải và đường kẻ ngang dưới hàng cuối bị hụt một nửa. */
  body.ducphat-site .service-grid{grid-template-columns:repeat(2,1fr)}
  body.ducphat-site .service-grid .service{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  body.ducphat-site .service-grid .service:nth-child(2n){border-right:0}
  body.ducphat-site .service-grid .service:nth-last-child(-n+2){border-bottom:0}
}

@media(max-width:520px){
  body.ducphat-site .service-grid .service{padding:14px 7px}
}
body.ducphat-site .header,body.ducphat-site .topbar{position:static!important;box-shadow:none!important}
body.ducphat-site .header-inner,body.ducphat-site .nav-inner{max-width:none!important}
/* Giới hạn trong main của Đức Phát để không đụng .section mà Flatsome sinh ra
   khi khách tự thêm Section trong UX Builder. */
body.ducphat-site main>.section,body.ducphat-site main>.hero,body.ducphat-site .cta,body.ducphat-site .footer{margin:0!important;overflow:visible!important}
body.ducphat-site .container.dp-wp-page{max-width:1200px!important}
body.ducphat-site .container.dp-article{max-width:960px!important}
body.ducphat-site .product-card .photo a{display:block;height:100%}
body.ducphat-site .product-card .photo img{width:100%;height:100%;object-fit:cover;display:block}
body.ducphat-site .product-body h3 a{color:inherit;text-decoration:none}
body.ducphat-site .product-body .price del{opacity:.55;font-weight:600;margin-right:6px}
body.ducphat-site .product-body .price ins{text-decoration:none}
/* Trang danh mục sản phẩm: ô sắp xếp và phân trang của WooCommerce */
body.ducphat-site .listing-head .dp-sort{display:flex;align-items:center;gap:8px}
body.ducphat-site .filters a.filter{text-decoration:none}
body.ducphat-site .woocommerce-pagination ul{display:flex;gap:8px;list-style:none;padding:0;margin:28px 0 0;justify-content:center}
body.ducphat-site .woocommerce-pagination a,body.ducphat-site .woocommerce-pagination span{display:block;padding:9px 15px;border:1px solid var(--line);border-radius:4px;font-weight:700;font-size:12px}
body.ducphat-site .woocommerce-pagination span.current{background:var(--teal);color:#fff;border-color:var(--teal)}
/* Phân trang của WordPress (trang tìm kiếm, lưu trữ) */
body.ducphat-site .navigation.pagination{margin-top:28px}
body.ducphat-site .navigation.pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
body.ducphat-site .navigation.pagination .page-numbers{display:block;padding:9px 15px;border:1px solid var(--line);border-radius:4px;font-weight:700;font-size:12px;color:var(--navy)}
body.ducphat-site .navigation.pagination .page-numbers.current{background:var(--teal);color:#fff;border-color:var(--teal)}
body.ducphat-site .navigation.pagination .screen-reader-text{position:absolute;left:-9999px}
/* Ô tìm lại trên trang kết quả */
body.ducphat-site .dp-search-again{min-width:280px;max-width:420px}
body.ducphat-site .dp-news-toolbar>div:empty{flex:1}
/* Thông báo của WooCommerce khi CSS theme cha không còn được tải */
body.ducphat-site .woocommerce-message,body.ducphat-site .woocommerce-info,body.ducphat-site .woocommerce-error{list-style:none;margin:0 0 18px;padding:14px 18px;border-left:4px solid var(--teal);background:#eef8f2;font-size:13px}
body.ducphat-site .woocommerce-error{border-left-color:#c0392b;background:#fdecea}
body.ducphat-site .woocommerce-message a,body.ducphat-site .woocommerce-info a{font-weight:700;color:var(--teal)}
.dp-woo-main{padding:55px 0 80px;background:#fff}.dp-woo-heading{margin-bottom:35px}.dp-woo-heading h1{color:#005c3b;font-size:clamp(28px,3vw,42px)}.dp-woo-heading p{color:#58665f}
.woocommerce ul.products li.product{border:1px solid #e5ebe8;border-radius:12px;padding:12px 12px 20px;text-align:left;background:#fff}.woocommerce ul.products li.product img{border-radius:8px;aspect-ratio:1/1;object-fit:cover}.woocommerce ul.products li.product .woocommerce-loop-product__title{color:#073e2c;font-weight:700;font-size:16px}.woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce div.product span.price{color:#00754a;font-weight:700}.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:#00663f!important;color:white!important;border-radius:7px!important;padding:12px 18px!important}.woocommerce div.product div.images img{border-radius:12px}.woocommerce div.product .product_title{color:#003d2d}.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#00663f}.woocommerce .quantity input.qty{min-height:42px}.woocommerce-product-gallery__trigger{z-index:5!important}.dp-wp-page{max-width:1200px}.dp-wp-page h1,.dp-article h1{color:#003d2d}.dp-article{max-width:960px}.dp-article img{max-width:100%;height:auto}.dp-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.dp-post-card{border:1px solid #e7eeea;border-radius:12px;overflow:hidden;padding:16px}.dp-post-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.dp-post-card h2{font-size:20px;color:#004b31}.dp-quote-page h1{color:#004b31}.dp-quote-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;background:#f6faf8;border:1px solid #e3eee8;border-radius:18px;padding:32px;margin:32px 0;max-width:1050px}.dp-quote-form label{font-weight:600;color:#003d2d;display:flex;flex-direction:column;gap:8px}.dp-quote-form input,.dp-quote-form select,.dp-quote-form textarea{background:white;border:1px solid #cbdcd3;border-radius:8px;padding:13px;font-size:15px;width:100%;box-sizing:border-box}.dp-quote-wide{grid-column:1/-1}.dp-honeypot{position:absolute!important;left:-9999px}.dp-quote-form button{width:max-content}.dp-quote-notice{background:#e9f7ef;padding:15px;border-left:4px solid #006b40}
@media(max-width:767px){.dp-post-grid,.dp-quote-form{grid-template-columns:1fr}.dp-quote-form{padding:20px}.dp-quote-wide{grid-column:auto}}