/* =====================================================================
   cpdonline2u.com — Mobile CSS สำหรับธีม rt_diametric_j15 (Joomla 1.5)
   วางไฟล์ที่: /templates/rt_diametric_j15/css/mobile.css
   มีผลเฉพาะจอกว้างไม่เกิน 768px — หน้าจอคอมพิวเตอร์เหมือนเดิมทุกอย่าง
   ===================================================================== */
@media (max-width: 768px) {

  /* ---------- 1. โครงหน้า: เลิกบังคับกว้าง 960px ---------- */
  html, body { min-width: 0 !important; width: auto !important; }
  body { overflow-x: hidden; } /* ใส่เฉพาะ body เพื่อให้หน้าเลื่อนตามปกติ */
  body { -webkit-text-size-adjust: 100%; }
  #rt-page-surround, .rt-container,
  #rt-headerblock, #rt-headerblock2, #rt-headerblock3,
  #rt-navigation, #rt-navigation2, #rt-navigation3,
  #rt-main-container, #rt-body-surround, #rt-main, #rt-transition,
  #rt-footer-surround, #rt-footer-surround2, #rt-footer-surround3,
  #rt-footer, #rt-footer2, #rt-copyright, #rt-copyright2, #rt-top, #rt-header {
    width: auto !important; min-width: 0 !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  [class*="rt-grid-"] {
    float: none !important; width: auto !important; margin: 0 !important;
    left: auto !important; right: auto !important;
  }
  [class*="rt-prefix-"], [class*="rt-suffix-"] { padding: 0 !important; }
  .rt-block { padding: 10px 12px !important; margin: 0 !important; }
  .module-surround, .module-content { width: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
  #rt-mainbody, .component-content, .rt-article, .rt-article-bg { width: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
  #rt-header { display: none; } /* แถบเทาว่างใต้เมนู (rokstories) */

  img { max-width: 100% !important; height: auto !important; }
  /* รูปที่ลอยซ้าย/ขวาในบทความ: วางกลางบรรทัด ไม่ให้ข้อความบีบเป็นคอลัมน์แคบ */
  .rt-article img[style*="float"], .rt-article img[align], .component-content img[style*="float"], .component-content img[align] { float: none !important; display: block !important; margin: 0 auto 10px !important; }
  iframe, video, embed, object { max-width: 100% !important; }
  .contact .image { float: none !important; text-align: center; margin: 0 0 12px !important; } /* หน้าติดต่อเรา: QR Code อยู่บน ที่อยู่อยู่ล่าง */

  /* ---------- 2. ส่วนหัว: โลโก้ / ไอคอน / ปุ่ม ---------- */
  #rt-top .rt-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 6px 0; }
  #rt-top .rt-grid-4.rt-alpha { order: 1; }
  #rt-top .rt-grid-4.rt-omega { order: 2; }
  #rt-top .rt-grid-4:not(.rt-alpha):not(.rt-omega) { order: 3; width: 100% !important; }
  #rt-top .rt-alpha img { width: 110px !important; }
  #rt-top table { margin: 0 auto; }
  #rt-top table td { padding: 0 3px; }
  #rt-top table td:empty, #rt-top table td:has(> br:only-child) { display: none; }
  #rt-top table img { height: 34px !important; width: auto !important; }
  #rt-top .btn-blue { display: inline-block; padding: 7px 12px !important; font-size: 14px !important; margin: 3px 0 !important; }
  #rt-top p { margin: 0; text-align: right; }
  #rt-top-surround, #rt-headerblock, #rt-headerblock2, #rt-headerblock3 { height: auto !important; min-height: 0 !important; }

  /* ---------- 3. เมนู: ปุ่ม ☰ + รายการแนวตั้ง ---------- */
  #rt-navigation, #rt-navigation2, #rt-navigation3 { height: auto !important; }
  .rt-fusionmenu, .rt-menubar, .menu-block { width: auto !important; height: auto !important; float: none !important; }
  .cpd-menu-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none !important; border: 0 !important; box-shadow: none !important; padding: 12px 14px !important; font: inherit; font-size: 16px !important; font-weight: bold; color: #333; cursor: pointer;
  }
  .cpd-menu-toggle .bars { font-size: 22px; line-height: 1; }
  ul.menutop { display: none !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  ul.menutop.cpd-open { display: block !important; }
  ul.menutop > li { float: none !important; display: block !important; width: 100% !important; border-top: 1px solid #e3e8ef; background: none !important; }
  ul.menutop > li > a.item { display: block !important; float: none !important; height: auto !important; line-height: 1.5 !important; padding: 12px 18px !important; background: none !important; }
  ul.menutop .rt-arrow-pointer { display: none !important; }
  ul.menutop a span { display: inline !important; height: auto !important; line-height: 1.5 !important; padding: 0 !important; margin: 0 !important; background: none !important; float: none !important; }
  ul.menutop > li.parent > a.item::after, ul.menutop > li > a.daddy::after { content: none !important; }
  ul.menutop > li > a.daddy { background: none !important; }
  /* เมนูย่อยของ Fusion ซ่อนไว้ ใช้ ul.cpd-sub ที่ mobile.js สร้างแทน */
  ul.menutop .fusion-submenu-wrapper { display: none !important; }
  ul.menutop .drop-top, ul.menutop .drop-bot { display: none !important; }
  .rt-menubar { padding: 0 !important; }
  ul.cpd-sub { display: block !important; list-style: none; margin: 0 !important; padding: 0 !important; background: #f7f8fa; }
  ul.menutop > li { height: auto !important; overflow: visible !important; position: static !important; }
  ul.cpd-sub { width: 100% !important; clear: both; position: static !important; float: none !important; }
  ul.cpd-sub li { float: none !important; display: block !important; width: auto !important; border-top: 1px solid #e3e8ef; }
  ul.cpd-sub a { display: block; padding: 10px 18px 10px 36px; font-size: 14px; color: #333; text-decoration: none; }
  body > .fusion-submenu-wrapper { display: none !important; } /* ตัวลอยของ Fusion บนจอใหญ่ */
  /* v2: พื้นเมนูสีเรียบ (เดิมรูปไล่เฉดซ้ำเป็นแถบ) + ตัวอักษรขนาดเท่ากันทุกบรรทัด */
  #rt-navigation2 { background-repeat: repeat-x !important; }
  ul.menutop.cpd-open { background: #fff !important; border-bottom: 1px solid #e3e8ef; }
  ul.menutop > li > a.item, ul.menutop > li > a.item span { font-size: 16px !important; font-weight: normal !important; text-transform: none !important; color: #222 !important; line-height: 1.5 !important; }
  ul.menutop > li > a.item { padding: 11px 18px !important; }
  ul.cpd-sub a { font-size: 15px !important; font-weight: normal !important; text-transform: none !important; line-height: 1.5 !important; color: #333 !important; padding: 10px 18px 10px 36px !important; }
  ul.cpd-sub a::before { content: "– "; color: #999; }

  /* ---------- 4. เนื้อหาทั่วไป ---------- */
  #rt-main { padding: 0 !important; }
  .rt-article h1, .rt-article h2, .component-content h1, .component-content h2, .componentheading, .contentheading {
    font-size: 1.35em !important; line-height: 1.35 !important; word-wrap: break-word;
  }
  .component-content, .rt-article { font-size: 15px; line-height: 1.7; word-wrap: break-word; }
  /* ตารางทั่วไป: เลื่อนซ้าย-ขวาในกรอบตัวเอง ไม่ดันหน้าให้กว้าง */
  .component-content table { max-width: 100% !important; }
  .cpd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  [width] { max-width: 100% !important; }

  /* ---------- 4.1 ตารางหลักสูตรหน้าแรก → การ์ดทีละวิชา ---------- */
  table.cpd-courses, table.cpd-courses tbody, table.cpd-courses tr, table.cpd-courses td { display: block !important; width: auto !important; }
  table.cpd-courses thead tr:not(:first-child) { display: none !important; }
  table.cpd-courses thead tr:first-child, table.cpd-courses thead th { display: block !important; width: auto !important; }
  table.cpd-courses tbody tr { position: relative; padding: 12px 14px !important; border-bottom: 6px solid #f4f6f9 !important; }
  table.cpd-courses tbody td { border: 0 !important; padding: 0 !important; text-align: left !important; height: auto !important; }
  table.cpd-courses tbody td:nth-child(1),
  table.cpd-courses tbody td:nth-child(n+4):nth-child(-n+9) { display: none !important; }
  table.cpd-courses tbody td:nth-child(2) { font-size: 12px !important; color: #777; }
  table.cpd-courses tbody td:nth-child(3) { margin: 2px 0 6px !important; }
  table.cpd-courses .cpd-hrs { display: block; font-size: 13px; color: #666; margin-top: 4px; }
  table.cpd-courses tbody td:nth-child(10) { display: inline-block !important; margin-right: 8px !important; vertical-align: middle; }
  table.cpd-courses tbody td:nth-child(10)::before { content: "รวม "; font-size: 13px; color: #777; }
  table.cpd-courses tbody td:nth-child(11) { display: inline-block !important; vertical-align: middle; }
  table.cpd-courses tbody td:nth-child(11) br { display: none; }
  table.cpd-courses tbody td:nth-child(11) strike { margin-right: 6px; }
  table.cpd-courses tbody td:nth-child(12) { position: absolute !important; right: 14px; bottom: 12px; }

  /* ---------- 5. VirtueMart: หน้ารายละเอียดวิชา ---------- */
  #vmMainPage { width: auto !important; }
  #vmMainPage > table, #vmMainPage > table > tbody, #vmMainPage > table > tbody > tr, #vmMainPage > table > tbody > tr > td {
    display: block !important; width: auto !important; height: auto !important;
  }
  #vmMainPage .vmCartContainer, #vmMainPage .vmCartChild { width: auto !important; }

  /* ---------- 6. VirtueMart: ตะกร้า (รถเข็นชำระเงิน) → การ์ด ---------- */
  table.cpd-cart, table.cpd-cart tbody, table.cpd-cart tr, table.cpd-cart td, table.cpd-cart th { display: block; width: auto !important; }
  #vmMainPage table.cpd-cart tr:first-child { display: none !important; } /* หัวตาราง */
  table.cpd-cart tr { padding: 10px 0; border-bottom: 1px solid #e3e8ef; }
  table.cpd-cart td { padding: 3px 0 !important; text-align: left !important; border: 0 !important; }
  #vmMainPage table.cpd-cart td:empty, #vmMainPage table.cpd-cart td:has(> hr) { display: none !important; }
  table.cpd-cart td[data-label]::before { content: attr(data-label) " : "; color: #777; font-size: 13px; }
  table.cpd-cart td form { display: inline-block; vertical-align: middle; }
  /* v2: ป้ายชื่อซ้าย ค่าขวา, แถวยอดรวมอยู่บรรทัดเดียว, ตัดช่องว่าง */
  #vmMainPage table.cpd-cart tr { padding: 8px 0 !important; }
  #vmMainPage table.cpd-cart td[data-label] { display: flex !important; justify-content: space-between; align-items: center; gap: 6px; }
  #vmMainPage table.cpd-cart td[data-label]::before { content: attr(data-label); margin-right: auto; }
  #vmMainPage table.cpd-cart td:first-child { font-weight: bold; padding-bottom: 4px !important; }
  #vmMainPage table.cpd-cart tr.cpd-total { display: flex !important; justify-content: space-between; align-items: center; padding: 6px 0 !important; }
  #vmMainPage table.cpd-cart tr.cpd-total td { padding: 0 !important; }
  #vmMainPage table.cpd-cart tr.cpd-empty { display: none !important; }
  #vmMainPage table.cpd-cart ~ br { display: none; }
  #vmMainPage a.continue_link, #vmMainPage a.checkout_link { font-size: 15px !important; white-space: nowrap; padding-left: 26px !important; background-size: 18px auto !important; background-position: left center !important; }
  #vmMainPage div:has(> a.checkout_link) { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0 !important; }
  #vmMainPage a.checkout_link { margin-left: auto; }

  /* ---------- 7. ฟอร์ม (ล็อกอิน / ที่อยู่ / ชำระเงิน) ---------- */
  input[type="text"], input[type="password"], input[type="email"], select, textarea, .inputbox {
    max-width: 100% !important; font-size: 16px !important; /* กัน iPhone ซูมอัตโนมัติ */
  }
  input[type="text"], input[type="password"], input[type="email"], textarea { width: 100% !important; box-sizing: border-box; padding: 8px !important; }
  table.cpd-cart input.inputbox { width: 50px !important; }

  /* ---------- 8. Footer ---------- */
  /* ---------- 7.1 กล่องสินค้าแนะนำด้านล่าง (#rt-bottom) → 2 คอลัมน์ ---------- */
  #rt-bottom, #rt-bottom2, #rt-bottom3, #rt-bottom4 { width: auto !important; max-width: 100% !important; }
  #rt-bottom .module-content > table, #rt-bottom .module-content > table > tbody { display: block !important; width: auto !important; }
  #rt-bottom .module-content > table > tbody > tr { display: flex !important; flex-wrap: wrap; }
  #rt-bottom .module-content > table > tbody > tr > td { display: block !important; flex: 0 0 50%; max-width: 50%; width: auto !important; box-sizing: border-box; padding: 6px !important; }

  #rt-footer .rt-grid-6 { margin-bottom: 10px !important; }
  #rt-footer h1, #rt-footer h2, #rt-footer2 h2, #rt-footer h3, #rt-bottom h2 { font-size: 22px !important; line-height: 1.35 !important; }
  #rt-footer table { width: auto !important; }
  #rt-copyright .totop-block { margin: 0 auto !important; float: none !important; }

  /* ---------- 8.1 แถบลัดติดล่างจอ (สร้างโดย mobile.js) ---------- */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
  .cpd-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-top: 1px solid #e3e8ef; box-shadow: 0 -4px 12px rgba(15,42,74,.08); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .cpd-dock a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; text-decoration: none !important; color: #0F2A4A !important; font-size: 12px; font-weight: bold; line-height: 1.3; }
  .cpd-dock a .i { font-size: 19px; line-height: 1; }
  .cpd-dock a.main { color: #1d6fae !important; }

  /* ---------- 9. แถบคุกกี้ / popup ---------- */
  #customPopupBox { width: 92% !important; left: 4% !important; margin-left: 0 !important; }
}

/* ปุ่ม ☰ และบรรทัดสรุปชั่วโมง ซ่อนบนจอใหญ่ */
@media (min-width: 769px) { .cpd-menu-toggle, .cpd-hrs, ul.cpd-sub, .cpd-dock { display: none; } }