@charset "utf-8";
/* ==========================================================================
   responsive.css  —  mobile adaptation layer
   Loaded AFTER the original stylesheets on every page.
   Desktop layout is left intact; overrides live inside media queries.
   ========================================================================== */

/* NOTE: nothing is applied globally. Every override below lives inside a
   media query, so the desktop layout (> 1024px) renders exactly like the
   original — same box model, same image sizes, same widths. */

/* The hamburger button is injected by responsive.js on every page. It is a
   brand-new element, so hiding it by default does not touch the original
   layout. It is only revealed inside the phone media query. */
.nav-toggle { display: none; }

/* ==========================================================================
   TABLET & DOWN  (≤ 1024px)  — where the fluid behaviour starts
   ========================================================================== */
@media (max-width: 1024px) {
  /* border-box only from here down, so 100%-width + padding never overflows */
  *, *::before, *::after { box-sizing: border-box; }

  img, video, iframe { max-width: 100%; height: auto; }

  table { max-width: 100%; }

  #head,
  .all,
  .product,
  .p-heng,
  .sz,
  .wrap,
  .why .all,
  .foot { width: 100%; max-width: 1009px; }

  .banner { background-size: cover; background-position: center; }

  .left-bal { width: auto; margin-left: 20px; margin-right: 20px; }
}

/* ==========================================================================
   PHONE / SMALL TABLET  (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

  body { font-size: 15px; }

  /* --- Header + logo (stays on the left, like desktop) ------------------ */
  #head { position: relative; }
  .logo {
    width: auto;
    max-width: calc(100% - 70px);   /* leave room for the toggle */
    height: auto;                    /* style.css pins 80px; let the image define height */
    margin: 0 0 0 10px;
    padding: 8px 0 8px;
    text-align: left;
  }
  .logo img { display: block; margin: 0; }

  /* --- Hamburger toggle (created by responsive.js) ---------------------- */
  .nav-toggle {
    display: block;
    position: absolute;
    top: 10px;
    right: 12px;
    width: 46px;
    height: 40px;
    padding: 9px 10px;
    background: #3DAEFD;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    z-index: 30;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    margin: 4px 0;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- Dropdown menu ---------------------------------------------------- */
  #head .nav {
    height: auto;              /* style.css pins this to 40px — release it */
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    background: #3DAEFD;
    transition: max-height .3s ease;
  }
  #head .nav.open { max-height: 520px; }        /* revealed on tap */
  #head .nav ul { display: block; margin: 0; padding: 0; }
  #head .nav li {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    line-height: 46px;             /* tap target */
    text-align: left;
    padding: 0 18px;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }
  #head .nav li a { display: block; }

  /* --- Hero banner ------------------------------------------------------ */
  .banner { height: auto; min-height: 320px; padding: 20px 0; }
  .left-bal { float: none; width: auto; height: auto; margin: 0 15px; }
  .left-bal h1 { font-size: 22px; }

  .down,
  .more {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 10px auto;
  }
  .down a:link,
  .more a:link,
  .more a:visited { width: 100%; }

  /* --- Product blocks (two-column → stacked) ---------------------------- */
  .product .left,
  .product .right,
  .product .do,
  .product .faq {
    float: none;
    width: 100%;
    padding: 15px;
  }
  .product .left h1 { font-size: 20px; }
  .product .right { text-align: center; }
  .product .right img { margin: 0 auto; }

  /* --- Testimonials ("user_say") ---------------------------------------- */
  .user_say .wrap { height: auto; }
  .wrap { height: auto; }
  .user_say .left,
  .user_say .right,
  .wrap .left,
  .wrap .right {
    float: none;
    width: auto;
    margin: 0;
    padding: 15px;
  }
  .wrap .left .im,
  .wrap .right .im,
  .wrap .left .dt,
  .wrap .right .dt,
  .wrap .left .dtd,
  .wrap .right .dtd { float: none; width: auto; }

  /* --- "Why choose us" trust boxes -------------------------------------- */
  .why { height: auto; }
  .why .d1 { float: none; width: auto; margin: 0 0 20px 0; overflow: hidden; }
  .why .d1 .te { width: auto; }
  .why .s2 { margin-top: 25px; }

  /* --- Buy page price rows ---------------------------------------------- */
  .box,
  .price {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding: 0;
    text-align: center;
  }
  .price { text-align: left; }

  /* --- Generic fluid tables (scripts/css.css + legacy pages) ------------ */
  table[width],
  table[width="800"],
  table[width="796"],
  table[width="80%"] { width: 100% !important; }

  td[width] { width: auto !important; }

  .content { padding: 0 12px 20px 12px; }

  /* Legacy image sidebar: let it sit on its own row */
  .tdleft { display: block; width: 100% !important; }

  /* Footer */
  .footer { padding: 25px 15px; }
  .foot { width: 100%; }
}

/* ==========================================================================
   NARROW PHONE  (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
  body { font-size: 15px; }

  .left-bal h1 { font-size: 20px; }
  .title { font-size: 22px; }
  .note  { font-size: 15px; }

  .product .left,
  .product .right,
  .product .do,
  .product .faq { padding: 12px; }

  .table { width: 46% !important; }   /* the 4-up feature grid → 2-up */
}