/*
 * Nano Beauty - responsive foundation
 * Loaded after page styles so shared mobile rules work across all storefront views.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body {
    -webkit-text-size-adjust: 100%;
}

#page,
.ladi-wraper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

input,
select,
textarea {
    min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
td,
th,
label,
span {
    overflow-wrap: anywhere;
}

.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table {
    min-width: 620px;
}

.modal-dialog,
.modal-content {
    max-width: calc(100vw - 24px);
}

/* Storefront header */
.nano-header-container {
    min-width: 0;
}

.nano-brand-logo,
.nano-brand-info,
.nano-actions-group,
.nano-header-auth,
.nano-auth-wrap {
    min-width: 0;
}

.nano-brand-name,
.nano-brand-slogan,
.nano-btn-user {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nano-main-header,
.nano-header-container {
    max-width: 100vw;
}

/* Shared storefront components */
.nano-hero-section,
.nano-section,
.nano-tech-section,
.nano-about-page,
.nano-blog-page,
.nano-article-page,
.nano-contact-page,
.nano-all-products-page,
.nano-detail-page,
.nano-cart-page,
.nano-checkout-page {
    max-width: 100%;
    overflow-x: hidden;
}

.nano-hero-img,
.nano-product-img,
.nano-tech-img,
.nano-story-img,
.nano-lab-img,
.nano-post-img,
.nano-article-content img,
.nano-contact-page img,
.nano-about-page img {
    max-width: 100%;
    height: auto;
}

.nano-hero-title,
.nano-about-hero-title,
.nano-contact-hero-title,
.nano-blog-title,
.nano-product-detail-title,
.nano-cart-title,
.nano-checkout-title,
.nano-section-title,
.nano-story-heading {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.nano-detail-meta,
.nano-price-banner,
.nano-hero-actions,
.nano-about-cta-actions,
.nano-share-btns,
.nano-quick-chat-btns {
    flex-wrap: wrap;
}

.nano-input-control,
.nano-checkout-input,
.nano-search-input,
.nano-newsletter-input {
    min-width: 0;
    max-width: 100%;
}

/* Product detail, cart and checkout */
.nano-product-hero-card,
.nano-cart-table-card,
.nano-checkout-card,
.nano-order-review-card,
.nano-sidebar-card,
.nano-article-card,
.nano-form-card {
    min-width: 0;
    max-width: 100%;
}

.nano-order-review-card {
    z-index: 1;
}

.nano-checkout-prod-name,
.nano-cart-prod-name,
.nano-post-card-title,
.nano-recent-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Footer */
.nano-newsletter-form {
    width: 100%;
    max-width: 100%;
}

.nano-footer-wrapper {
    max-width: 100%;
    overflow: hidden;
}

.nano-footer-contact-item > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    .nano-header-container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .nano-navbar-nav {
        gap: 4px !important;
    }

    .nano-nav-link-btn {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .nano-hero-title {
        font-size: clamp(2.75rem, 6vw, 3.625rem) !important;
    }

    .nano-main-img-box {
        height: min(440px, 55vw) !important;
    }
}

@media (max-width: 991.98px) {
    .nano-hero-section {
        padding-top: 38px !important;
        padding-bottom: 48px !important;
    }

    .nano-hero-content,
    .nano-hero-visual {
        text-align: center;
    }

    .nano-hero-badges-row,
    .nano-hero-actions {
        justify-content: center;
    }

    .nano-hero-title {
        font-size: clamp(2.3rem, 8vw, 3.4rem) !important;
    }

    .nano-hero-script {
        font-size: clamp(2rem, 7vw, 2.75rem) !important;
    }

    .nano-hero-visual {
        margin-top: 28px;
    }

    .nano-hero-img-box {
        width: min(100%, 560px);
        margin: 0 auto;
    }

    .nano-product-hero-card,
    .nano-checkout-card {
        padding: 24px !important;
    }

    .nano-order-review-card {
        position: static !important;
        top: auto !important;
    }

    .nano-main-img-box {
        height: min(420px, 65vw) !important;
    }

    .nano-product-detail-title,
    .nano-cart-title,
    .nano-checkout-title {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    }
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .row {
        --bs-gutter-x: 1rem;
    }

    .nano-header-container {
        gap: 8px !important;
        padding: 9px 14px !important;
    }

    .nano-header-auth,
.nano-auth-wrap {
        display: none !important;
    }

    .nano-brand-logo {
        flex: 1 1 auto;
    }

    .nano-brand-name {
        font-size: 15px !important;
        letter-spacing: 0.3px;
    }

    .nano-brand-slogan {
        font-size: 11px !important;
    }

    .nano-brand-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .nano-cart-circle-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .nano-hamburger-btn {
        display: block !important;
        font-size: 26px !important;
    }

    .nano-mobile-drawer {
        width: min(320px, calc(100vw - 42px)) !important;
    }

    .nano-section,
    .nano-tech-section,
    .nano-about-page,
    .nano-blog-page,
    .nano-article-page,
    .nano-contact-page,
    .nano-all-products-page,
    .nano-detail-page,
    .nano-cart-page,
    .nano-checkout-page {
        padding-top: 20px !important;
        padding-bottom: 70px !important;
    }

    .nano-main-img-box {
        height: min(340px, 80vw) !important;
        padding: 15px !important;
    }

    .nano-product-hero-card,
    .nano-cart-table-card,
    .nano-checkout-card,
    .nano-order-review-card,
    .nano-sidebar-card,
    .nano-article-card,
    .nano-form-card {
        border-radius: 16px !important;
        padding: 16px !important;
    }

    .nano-current-price {
        font-size: 24px !important;
    }

    .nano-price-banner {
        align-items: flex-start !important;
        padding: 14px 16px !important;
    }

    /* Modern Mobile Cart Cards */
    .nano-cart-table thead {
        display: none !important;
    }

    .nano-cart-table,
    .nano-cart-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .nano-cart-table tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(15, 76, 129, 0.04) !important;
    }

    .nano-cart-table tbody td {
        border: none !important;
        padding: 0 !important;
    }

    .nano-newsletter-section {
        padding: 26px 0 !important;
    }

    .nano-newsletter-form {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px !important;
    }

    .nano-newsletter-input {
        flex: 1 1 170px;
        width: auto !important;
    }

    .nano-newsletter-btn {
        padding: 9px 14px !important;
    }

    .nano-footer-body {
        padding: 30px 0 20px !important;
    }

    .nano-footer-col-title {
        margin-bottom: 14px !important;
    }

    .nano-floating-actions {
        right: 12px !important;
        bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px !important;
        z-index: 1020 !important;
    }

    .nano-float-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .nano-back-top-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .nano-trust-pill-list {
        justify-content: center !important;
        gap: 8px 14px !important;
    }
}

@media (max-width: 479.98px) {
    .nano-brand-name {
        font-size: 13px !important;
    }

    .nano-brand-slogan {
        font-size: 10px !important;
    }

    .nano-brand-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .nano-main-img-box {
        height: min(300px, 78vw) !important;
    }

    .nano-hero-actions > a,
    .nano-about-cta-actions > a,
    .nano-btn-submit-contact {
        width: 100%;
        justify-content: center;
    }

    .nano-hero-badge-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nano-newsletter-input,
    .nano-newsletter-btn {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .nano-newsletter-btn {
        border-radius: 12px !important;
    }

    .nano-footer-brand-title {
        font-size: 17px !important;
    }
}

/* Legacy/Landing-page safety rules */
@media (max-width: 767.98px) {
    .ladi-form-item,
    .ladi-form-item-container,
    .ladi-form-item-background,
    .ladi-form-item-label,
    .ladi-form-item-input {
        max-width: 100%;
    }
}

/* Global Mobile App-Like Safe Area and Viewport Utilities */
@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .nano-badge-text-top,
    .nano-badge-text-sub {
        white-space: nowrap !important;
    }
}

/*
 * Mobile interaction quality layer.
 * These overrides deliberately start below the desktop navigation breakpoint so
 * the existing desktop composition, spacing and typography remain unchanged.
 */
:root {
    --nano-mobile-gutter: 16px;
    --nano-mobile-tap: 44px;
    --nano-mobile-bottom-nav-height: 68px;
}

.nano-footer-toggle {
    display: block;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: inherit;
}

.nano-footer-toggle-icon {
    display: none;
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-bottom: calc(var(--nano-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    body {
        padding-bottom: 0 !important;
        -webkit-tap-highlight-color: transparent;
    }

    body.nano-drawer-is-open {
        overscroll-behavior: none;
    }

    .nano-footer-wrapper {
        padding-bottom: calc(var(--nano-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    }

    .nano-bottom-nav {
        height: calc(var(--nano-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .nano-bottom-nav-item {
        min-width: var(--nano-mobile-tap);
        min-height: var(--nano-mobile-bottom-nav-height);
        padding: 5px 4px !important;
        gap: 1px;
        touch-action: manipulation;
    }

    .nano-bottom-nav-icon-wrap {
        width: 30px !important;
        height: 30px !important;
        margin-bottom: 0 !important;
    }

    .nano-bottom-nav-label {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .nano-bottom-nav-center .nano-bottom-nav-icon-wrap {
        width: 48px !important;
        height: 48px !important;
        margin-top: -18px !important;
    }

    .nano-bottom-nav-center .nano-bottom-nav-label {
        margin-top: 1px !important;
    }

    .nano-floating-actions {
        right: 12px !important;
        bottom: calc(var(--nano-mobile-bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .nano-back-top-btn {
        width: var(--nano-mobile-tap) !important;
        height: var(--nano-mobile-tap) !important;
    }

    .nano-header-container {
        min-height: 60px;
        padding-left: var(--nano-mobile-gutter) !important;
        padding-right: var(--nano-mobile-gutter) !important;
        gap: 6px !important;
    }

    .nano-brand-logo {
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--nano-mobile-tap);
    }

    .nano-brand-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .nano-brand-info {
        min-width: 0;
    }

    .nano-brand-name {
        font-size: 14px !important;
    }

    .nano-brand-slogan {
        font-size: 11px !important;
    }

    .nano-actions-group {
        gap: 4px !important;
    }

    .nano-search-trigger-btn,
    .nano-hamburger-btn,
    .nano-cart-circle-btn,
    .nano-drawer-close {
        width: var(--nano-mobile-tap) !important;
        min-width: var(--nano-mobile-tap);
        height: var(--nano-mobile-tap) !important;
        min-height: var(--nano-mobile-tap);
        touch-action: manipulation;
    }

    .nano-cart-count-badge {
        top: -1px;
        right: -1px;
    }

    .nano-mobile-search-box {
        padding: 10px var(--nano-mobile-gutter) 12px !important;
    }

    .nano-mobile-search-form {
        min-height: 48px;
        padding: 4px 5px 4px 14px !important;
    }

    .nano-mobile-search-input {
        min-height: var(--nano-mobile-tap);
        font-size: 16px !important;
    }

    .nano-mobile-search-submit {
        min-height: var(--nano-mobile-tap);
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    .nano-mobile-drawer {
        left: 0 !important;
        width: min(340px, calc(100vw - 24px)) !important;
        height: 100dvh !important;
        max-height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .nano-mobile-drawer.open {
        left: 0 !important;
        transform: translateX(0);
    }

    .nano-drawer-top {
        padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    }

    .nano-drawer-close {
        border-radius: 12px !important;
    }

    .nano-drawer-section-title {
        font-size: 12px !important;
        margin-top: 18px !important;
    }

    .nano-mobile-menu-list {
        gap: 6px !important;
    }

    .nano-mobile-menu-list li a {
        min-height: 48px;
        padding: 10px 14px !important;
        font-size: 14px !important;
        touch-action: manipulation;
    }

    .nano-mobile-menu-list li a i.menu-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .nano-drawer-btn-login,
    .nano-drawer-btn-reg,
    .nano-drawer-hotline-btn,
    .nano-drawer-zalo-btn {
        min-height: var(--nano-mobile-tap);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    .nano-footer-body {
        padding-top: 32px !important;
    }

    .nano-newsletter-input,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select {
        min-height: var(--nano-mobile-tap);
    }

    textarea {
        min-height: 96px;
    }

    .nano-social-circle,
    .nano-hotline-icon {
        width: var(--nano-mobile-tap) !important;
        height: var(--nano-mobile-tap) !important;
    }

    .nano-footer-menu a {
        min-height: var(--nano-mobile-tap);
        padding: 6px 0;
        font-size: 14px !important;
        touch-action: manipulation;
    }

    .nano-footer-contact-item,
    .nano-footer-about-text {
        font-size: 14px !important;
    }

    .nano-image-fallback {
        object-fit: contain !important;
        background: #f0f7ff;
    }

    .swal2-popup,
    .modal-dialog {
        width: calc(100vw - (var(--nano-mobile-gutter) * 2)) !important;
        max-width: calc(100vw - (var(--nano-mobile-gutter) * 2)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .swal2-actions {
        width: 100%;
        gap: 8px !important;
    }

    .swal2-styled {
        min-height: var(--nano-mobile-tap);
    }

    #page :is(a, button, input, select, textarea):focus-visible {
        outline: 3px solid #00a8ff;
        outline-offset: 3px;
    }
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        padding-left: var(--nano-mobile-gutter) !important;
        padding-right: var(--nano-mobile-gutter) !important;
    }

    .nano-footer-group-column {
        flex: 0 0 100%;
        width: 100%;
    }

    .nano-footer-col-title {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .nano-footer-col-title::after {
        display: none;
    }

    .nano-footer-toggle {
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        color: #ffffff;
        background: transparent;
        border: 0;
        font: inherit;
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
    }

    .nano-footer-toggle-icon {
        display: inline-block;
        color: #38bdf8;
        transition: transform 0.2s ease;
    }

    .nano-footer-toggle[aria-expanded="true"] .nano-footer-toggle-icon {
        transform: rotate(180deg);
    }

    .nano-footer-menu {
        padding: 8px 0 12px !important;
    }

    .nano-footer-menu li {
        margin-bottom: 0 !important;
    }

    .nano-footer-menu[hidden] {
        display: none !important;
    }

    .nano-newsletter-form {
        gap: 10px !important;
    }

    .nano-newsletter-btn {
        min-height: 48px;
    }
}

@media (max-width: 374.98px) {
    .nano-header-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .nano-brand-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .nano-brand-name {
        font-size: 12px !important;
    }

    .nano-brand-slogan {
        display: none;
    }

    .nano-search-trigger-btn,
    .nano-hamburger-btn,
    .nano-cart-circle-btn {
        width: var(--nano-mobile-tap) !important;
        min-width: var(--nano-mobile-tap);
        height: var(--nano-mobile-tap) !important;
        min-height: var(--nano-mobile-tap);
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}