/** ==============================================================================
  * FONT TYPE ในส่วนสำคัญหลัก เช่น Header Title, Header Navbar Link, Footer
  * ==============================================================================
  * Custom Fonts
  * เนื่องจาก มีการเปลี่ยน fonts หลักของภาษาไทย 
  * ให้ระวังความยาวคำ ไม่เท่ากับภาษาอังกฤษ 
  * อย่าลืมต้องตรวจสอบ Media Query ให้ครบ
  * Class .menuzord-menu  มีอยู่แล้วใน theme original
  *
  * สิ่งที่ต้องปรับคือ 
  * header h1 - h6
  * label ที่ใช้สำหรับ form
  * หัวข้อหลักของ page ย่อย คือ .title
  * ลิงค์ nav menu ในส่วน Header คือ .menuzord-menu > li > a
  * ลิงค์ nav menu ในส่วน Header ในส่วนที่มี dropdown คือ .menuzord-menu ul.dropdown li a
  * ข้อความในส่วน footer
  * ลิงค์ nav ในส่วน sidebar
  *
  **/

@import url('https://fonts.googleapis.com/css?family=Kanit:200,300,400,500,600&subset=thai');


.font-thai, 
#menu nav, 
h1, h2, h3, h4, h5, h6, label, 
.title, 
#header .menuzord-menu > li > a,
#header .menuzord-menu ul.dropdown li a, 
#header .widget span, 
#footer p, 
#footer a, 
#footer form,
.sidebar a {
  font-family: 'Kanit', sans-serif !important;
}

/** ==============================================================================
  * FONT TYPE สำหรับ Revolution Slider
  * ==============================================================================
  * Custom Fonts
  * เนื่องจาก มีการเปลี่ยน fonts หลักของภาษาไทย 
  * ให้ระวังความยาวคำ ไม่เท่ากับภาษาอังกฤษ 
  * อย่าลืมต้องตรวจสอบ Media Query ให้ครบ
  * Class .font-raleway มีอยู่แล้วใน theme original ใช้สำหรับข้อความใน Revolution Slider
  * สำหรับ multi language เราไม่ต้องตั้งชื่อใหม่ให้ยุ่งยาก ให้ปรับ custom ที่ชื่อ class เดิมไปเลย
  *
  **/
.font-raleway,
.font-raleway span {
  font-family: 'Kanit', sans-serif !important;
}

/** ==============================================================================
  * RESPONSIVE HEADER NAVBAR FONT SIZE AND HEADER BRAND LOGO IMAGE POSITION
  * ==============================================================================
  *
  * Mobile First Method (Bootstrap 3 + Bootstrap 4 + myCustom Media Queries )
  *
  * เนื่องจาก มีการเปลี่ยน fonts หลักของภาษาไทย และความยาวคำ ไม่เท่ากับภาษาอังกฤษ
  * รูปภาพ Logo Brand Image ในส่วน Header คือ  .menuzord-brand img
  * ลิงค์ nav menu ในส่วน Header คือ  .menuzord-menu > li > a
  *
  **/

/* Custom, iPhone Retina (BS3) */ 
@media only screen and (min-width: 320px) {

}

/* Extra Small Devices, Phones (BS3) */ 
@media only screen and (min-width: 480px) {

}

/* Extra Small Devices, Phones (BS4) */ 
@media only screen and (min-width : 576px) {

}

/* Small Devices, Tablets (BS3+BS4) */
@media only screen and (min-width: 768px) {

}

/* Medium Devices, Desktops (VEE) */
@media only screen and (min-width: 900px) and (max-width: 991px) {
  /* Force Brand Image Original Size 100% */
  .menuzord-brand img {
    max-height: initial;
  }
  /* Force Brand Image Center - เฉพาะ min และ max ที่กำหนดนี้เท่านั้น */
  .menuzord-brand {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
  }
}

/* Medium Devices, Desktops (BS3+BS4) */
@media only screen and (min-width: 992px) {
  .menuzord-brand img {
    max-height: 38px;
  }
  .menuzord-menu > li > a {
    font-size: 12px !important;
  }
}

/* Medium Devices, Desktops (VEE) */
@media only screen and (min-width: 1024px) {
  .menuzord-brand img {
    max-height: 38px;
  }
  .menuzord-menu > li > a {
    font-size: 11.5px !important;
  }
}

/* Large Devices, Wide Screens (BS3+BS4) */
@media only screen and (min-width: 1200px) {
  .menuzord-brand img {
    max-height: 47px;
  }
  .menuzord-menu > li > a {
    font-size: 14px !important;
  }
}

/*@media only screen and (min-width: 1300px) {
  .menuzord-brand img {
    max-height: 50px;
  }
  .menuzord-menu > li > a {
    font-size: 14px !important;
  }
}*/

/** ==============================================================================
  * FONT SIZE OPTIMIZATION (FOOTER)
  * ==============================================================================
  * เนื่องจาก มีการเปลี่ยน fonts หลักของภาษาไทย และความยาวคำ ไม่เท่ากับภาษาอังกฤษ
  *
  **/
#footer form input, 
#footer form textarea, 
#footer form button {
  font-size: 12px;
}

/** ==============================================================================
  * FONT SIZE OPTIMIZATION (REVOLUTION SLIDER)
  * ==============================================================================
  * เนื่องจาก มีการเปลี่ยน fonts หลักของภาษาไทย และความยาวคำ ไม่เท่ากับภาษาอังกฤษ
  *
  * [!} ให้ใช้หน้า page headerCarousel.php เป็นตัวตั้งค่าขนาด font ได้เลย
  * โดยใช้ attribute ที่ชื่อ data-fontsize เป็นตัวจัดการขนาด font
  * สามารถกำหนดได้ว่าจะปรับเฉพาะ font size ของ SLIDER ไหน และ LAYER ไหนที่ต้องการ
  * ปรับเปลี่ยนอิสระตาม theme language ภาษา
  *
  **/