body {
  font-family: "Myanmar Text", sans-serif;
  background-color: #ffffff;
  color: #FFD700; /* စာအဝါ */
  margin: 0;
  padding: 0;
}

/* 🌗 Dark mode toggle fixed top-right */
#modeToggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 📝 Main content */
main {
  padding: 5rem 1rem 5rem; /* bottom padding = 5rem, category bar အောက် မဖုံးအောင် */
  text-align: center;
}

/* 🌟 Active link style (soft gold) */
.bottom-category a.active {
  background-color: rgba(255, 215, 0, 0.2); /* အဖျော့ အဝါ */
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.3); /* အဖျော့ shadow */
  text-decoration: none;
}

/* 📚 Bottom Category Bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #222;
  padding: 0.8rem 0; 
  z-index: 5;
}

.bottom-nav a {
  display: flex;            /* vertical layout */
  flex-direction: column;   /* emoji အပေါ်၊ စာ အောက် */
  align-items: center;
  color: #FFD700;
  text-decoration: none;
  font-weight: bold;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background-color 0.3s ease; font-size: 16px;
}

.bottom-nav a .icon {
  font-size: 18px;       /* emoji အရွယ်အစား */
  margin-bottom: 4px;    /* emoji နဲ့ စာကြား အကွာအဝေး */
}

/* 🔝 Fixed Top-Left Title */
#fixedTitle {
  position: fixed;
  top: 0rem;           /* အပေါ် margin – လိုချင်သလို ပြင်နိုင် */
  left: 0.5rem;        /* ဘယ်ဘက် margin */
  font-size: 1rem;   /* စာအရွယ် */
  font-weight: bold;
  background-color: black;
  color: #FFD700;
  padding: 3px 7px;
  border-radius: 6px;
  z-index: 9999;
  pointer-events: none;
}

/* အခြားမူရင်း style မတွေ့ရင် */
body {
  margin: 0;
  
}
.fixed-logo {
  position: fixed; /* နေရာကို ပုံသေထားရန် */
  bottom: 110px;    /* အောက်ခြေ menu bar ရဲ့ အမြင့်ထက် နည်းနည်းပိုထားပါ */
  left: 10px;      /* ပင်မခလုတ်ရှိမယ့် ဘယ်ဘက်အခြမ်းမှာ ထားရန် */
  z-index: 1000;   /* တခြားအရာတွေရဲ့ အပေါ်မှာ ပေါ်နေစေရန် */
}

.fixed-logo img {
  width: 80px;     /* 8mm ခန့်ရှိသော pixel အတိုင်းအတာ (လိုအပ်သလို ပြင်နိုင်သည်) */
  height: 80px;
  border-radius: 50%; /* လိုဂိုကို အဝိုင်းပုံစံ ဖြစ်စေချင်လျှင် သုံးပါ */
  object-fit: cover;
}

/* --- ဓာတ်ပုံဘေးဆွဲ CSS အစ --- */

/* ၁။ စာမျက်နှာ အခြေခံ သတ်မှတ်ချက် */
body {
    font-family: 'Pyidaungsu', sans-serif;
    background-color: #fcfaf5;
    margin: 0;
    padding: 10px;
}

/* ၂။ ခေါင်းစဉ် အလှပြင်ဆင်ခြင်း */
.section-title {
    font-size: 1.1rem;
    margin: 20px 0 10px 5px;
    border-left: 5px solid #ffc107; /* အဝါရောင် ဘေးလိုင်းလေး */
    padding-left: 12px;
}

/* ၃။ ပုံများကို ဘေးတိုက် Scroll ဆွဲနိုင်အောင် လုပ်ဆောင်ခြင်း (Container) */
.gallery-list {
    display: flex;             /* ပုံများကို ဘေးချင်းကပ်စီရန် */
    overflow-x: auto;          /* ပိုနေသောပုံများကို ဘေးသို့ဆွဲကြည့်ရန် */
    gap: 15px;                 /* ပုံတစ်ပုံနှင့်တစ်ပုံကြား အကွာအဝေး */
    padding: 10px 5px;
    scroll-behavior: smooth;   /* ဆွဲလိုက်ရင် ချောမွေ့စွာသွားရန် */
    
    /* Scroll bar အစင်းကြောင်းကို ဖျောက်ရန် */
    scrollbar-width: none;     /* Firefox အတွက် */
    -ms-overflow-style: none;  /* IE အတွက် */
    -webkit-overflow-scrolling: touch; /* iPhone မှာ ဆွဲရတာ ချောမွေ့စေရန် */
}

/* Chrome နှင့် Safari ဘောက်ဇာများအတွက် Scroll bar ဖျောက်ရန် */
.gallery-list::-webkit-scrollbar {
    display: none;
}

/* ၄။ ဓာတ်ပုံကတ် တစ်ခုချင်းစီ၏ အရွယ်အစားနှင့် အလှအပ (Link ပါဝင်သည်) */
.gallery-item {
    flex: 0 0 160px;           /* ပုံတစ်ပုံ၏ အကျယ်ကို ၁၆၀ pixel အသေထားရန် */
    background: #ffffff;
    border-radius: 12px;       /* ထောင့်များကို ဝိုင်းရန် */
    overflow: hidden;          /* ပုံများ ဘောင်အပြင်မထွက်ရန် */
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    
    /* Link ချိတ်ထားလျှင် စာသားမျဉ်းတားဖျောက်ရန် */
    text-decoration: none; 
    display: flex;
    flex-direction: column;
}

/* ၅။ ဓာတ်ပုံများ ဖုန်း Screen ပေါ်တွင် အံကိုက်ဖြစ်အောင် ထိန်းခြင်း */
.gallery-item img {
    width: 100%;               /* ကတ်အကျယ်အတိုင်း ဖြန့်ရန် */
    height: 140px;             /* အမြင့်ကို ၁၄၀ pixel ထက် ပိုမကြီးစေရန် */
    object-fit: cover;         /* ပုံစံမပျက်ဘဲ အကွက်ထဲ အပြည့်ဖြည့်ရန် */
    display: block;
}

/* ၆။ ပုံအောက်မှ စာသား */
.gallery-item .text {
    padding: 10px;
    font-size: 13px;
    text-align: center;
    color: #333;
    font-weight: 500;
}

/* --- ဓာတ်ပုံဘေးဆွဲ CSS အဆုံး --- */



/* ---ခလုပ်ဘေးဆွဲ style.css အစ --- */

/* ၁။ ခလုတ်များအားလုံးကို အုပ်ထားသော အပြင်ဘက်ဘောင် (Container) */
.scroll-wrapper {
    display: flex;                   /* ခလုတ်များကို ဘေးတိုက်စီရန် */
    overflow-x: auto;                /* ဘေးတိုက် Scroll ဆွဲနိုင်ရန် */
    white-space: nowrap;             /* ခလုတ်များ အောက်ကြောင်းမဆင်းစေရန် */
    gap: 10px;                       /* ခလုတ်တစ်ခုချင်းစီကြား အကွာအဝေး */
    padding: 10px;                   /* ဘေးပတ်လည် အကွာအဝေး */
    -webkit-overflow-scrolling: touch; /* ဖုန်းတွင် ချောမွေ့စွာ Scroll ဆွဲနိုင်ရန် */
}

/* ၂။ ခလုတ်တစ်ခုချင်းစီ၏ ပုံစံ (Button Style) */
.app-link {
    display: flex;                   /* စာသားကို အလယ်ဗဟို ပို့ရန် */
    align-items: center;             /* စာသားကို အထက်/အောက် ဗဟိုညှိရန် */
    justify-content: center;         /* စာသားကို ဘယ်/ညာ ဗဟိုညှိရန် */
    text-align: center;              /* စာသားကို ဗဟိုချက်ထားရန် */
    width: 150px;                    /* အလျား ၁၅၀ */
    height: 150px;                   /* အနံ ၁၅၀ (စတုရန်းပုံစံ) */
    flex: 0 0 150px;                 /* Scroll ထဲတွင် အရွယ်အစား မပြောင်းလဲရန် */
    background-color: #E0E0E0;       /* နောက်ခံအရောင် */
    color: rgba(0, 136, 204, 0.7);   /* စာသားအရောင် */
    text-decoration: none;           /* လင့်ခ်မျဉ်းတားကို ဖျောက်ရန် */
    font-size: 1.2rem;               /* စာသားအရွယ်အစား */
    border-radius: 8px;              /* ထောင့်ဝိုင်းပုံစံ */
    border: 2px solid #E0E0E0;       /* အနားသတ်ဘောင် */
    white-space: normal;             /* စာသားရှည်လျှင် အောက်ကြောင်းဆင်းရန် */
    padding: 10px;                   /* ခလုတ်အတွင်း စာသားအကွာအဝေး */
}


/* --- အရောင်အတွက် အပိုင်း အစ --- */

.viber-text {
color:rgba(115, 96, 242, 0.6) !important; /* စာသားကို အမဲရောင် ဖြစ်စေရန် */
}

/* --- အရောင်အတွက် အပိုင်း အဆုံး --- */

/* --- အရောင်အတွက် အပိုင်း အစ --- */

.tiktok-text {
    color: #121212 !important; /* စာသားကို အမဲရောင် ဖြစ်စေရန် */
}

/* --- အရောင်အတွက် အပိုင်း အဆုံး --- */

/* --- အရောင်အတွက် အပိုင်း အစ --- */

.youtube-text {
    color:rgba(255, 0, 51, 0.6) !important; /* စာသားကို အမဲရောင် ဖြစ်စေရန် */
}

/* --- အရောင်အတွက် အပိုင်း အဆုံး --- */

/* --- အရောင်အတွက် အပိုင်း အစ --- */

.facebook-text {
    color:rgba(24, 119, 242, 0.6) !important; /* စာသားကို အမဲရောင် ဖြစ်စေရန် */
}

/* --- အရောင်အတွက် အပိုင်း အဆုံး --- */


/* ---ခလုပ်ဘေးဆွဲ style.css အဆုံး --- */